Monday, February 27, 2012
1) Getting mobile compatible
Over the last few years, minimalistic designs have gained immense popularity. This trend is expected to be carried over to 2012. The findings of a research study conducted reveled that over 1/5th of the web searches intended to be carried out will be done through mobile devices this year. Making the websites mobile compatible is the need of the hour and will help bring exponential growth in business.
2) Demise of Flash and emergence of HTML5
Flash used to be extremely popular till late. Adobe recently announced its policy changes that will have a significant effect on usage of flash, when it comes to mobile web use. Keeping these changes in mind, websites have started switching over to CSS3, JQuery and HTML5.
The interactivity of flash has no equals though, but 2012 will still see emergence of CSS3, JQuery and HTML5. Real time communication and multimedia support are some of the innovative features of the emerging technology that will propel its growth in 2012.
3) Emergence of 3D technology
Visually rich applications appeal to all. 2012 will see emergence of 3D technology thereby making the desktop more attractive. Increasing number of websites is working on devising 3D effects ranging from shadows to textures. Visually interactive applications are in the pipeline and 2012 will see emergence of some of these. This can be in form of graphics and interactive layouts that is sure to take web design trends to a higher level.
4) Interactive Typography
Use of creative fonts is being discussed in business circles and many websites are in the process of mixing fonts to come up with a masterpiece that is sure to make web more interactive. CSS3 has come as a boon in this endeavor of making web interactive. It allows free typography making the work of designers easy. Expect to see interactive typography techniques in 2012.
5) Making it big
Designers are thinking differently. Expect to see innovative headings, huge icons and designer logos. The idea is to make a lasting impression on the visitor. Creating an impression with the user seems to rule the mind of the web designers.
6) Interactive additions
Interactive additions in form of modal window are in the offering. This helps in adding inputs without the need of leaving the page. Login boxes and registration screens are sure to benefit from this innovative addition. This will not only save precious time of the users but will also ensure that web gets a creative look.
7) Hybrid layouts
2012 will see the use of hybrid layout technology. In this some aspects as text will be of fixed width making the other elements fluid. This is sure to give the screen a comprehensive look, without any inch of the monitor being wasted. Hybrid layouts will give the web a distinct character and make the web livelier.
8) Bright colors and fluid backgrounds
White or black backgrounds will be a talk of the past. Expect to see expandable backgrounds with bright colors. Bright colors will not only add life to the web but will also give the web world a raw an innovative look.
9) Compact information
Single page layout will be a great addition in 2012. All the required information will be compacted in a single page layout giving the web, an aesthetic touch. Precious time of the web user will be saved, as all the essential information will be available in a single page.
10) Social media
Social media sites as Facebook and Twitter will see increased presence on all web formats in 2012. This will not only make sharing information easier but will also bring increased web traffic to the site.
Evolution of new web design trends is a continuous process and 2012 will see emergence of new technology that is sure to bring a revolution in the web world.
Wednesday, February 15, 2012
WordPress for Android is pleased to announce their new launch of an innovative product that posts, edits and manages comments on your WordPress blog-site. Version 2.0 presents a new and exciting Dashboard UI with Quick Action bar.
These features offer an impressive new editor that makes for easy editing than ever. WordPress for Android supports self-hosted WordPress 3.0 and higher blogs and WordPress.com. This is truly an exciting launch that WordPress and Android have been more than happy to present to the world.
You will find everything you need to do locatedin a central location. At first sight you will observe the Dashboard item. You will observe when you start the application that it offers one-tap access to usual features when creating blog posts. You will find the diverse features on the Dashboard that will enhance your blogging needs.
There is a new standard count-ribbon that displays unapproved comments you have waiting for approval. If you want to attach media files, Quick Photo and Video buttons can show you to the camera where you can take pictures of the moment while attaching it to a new blog-post. The Dashboard also provides a new Action Bar that lets you switch quickly between blogs.
The New Editor Features
The post editor has been improved, allowing more power than ever over posting content. The format toolbar can be located on the top of the keyboard. This will allow for rich-text editing and addition of links. You add media content while editing “Titles”, Caption, Placement and Size of images. The editor contains a full-screen, so you can see the text while editing. Post Formats have been added. You will seea menu in the post-editor that lets you select the desired Posting Formats.
The Ready for Tablet
WordPress for Android version 2.0 has been optimized for daily-tablet use. When viewing Pages, Comments and Posts on the Android tablet, you will witness scrollable lists on the left- side of the screen. If you own an Android tablet, you will find that WordPress has it all covered. Special attention has been paid to larger-screen devices with the current market launch.
The What’s new?
- Version 2.0.4
- Swedish, Italian, Danish and Bosnian updates
- Fixes for Post Editor
- Bug fixes
The Other changes
- Reliable improvements
- Post Status can now be found in post-list
- Improvement of Stats-chart
- WorPress.com improvements with Read Feature
- Background post-uploading
WordPress for Android has been created as an Open Source project. Various individuals worldwide have contributed to release and proves one-and-all have performed a marvelous job.
WordPress has come a long way with evolving to meet the needs of blog, website owners and business owners. WordPress has revolutionized into a popular tool in helping businesses and companies worldwide. The latest version proves the dedication and hard work that is entailed into software and programs in order to make not only businesses better but the world.
The post is contributed by William Taylor. William calls wordpress as multipurpose piece of software. Its creative concepts have really transformed, the way websites used to be. Visit his site for adsl internet and digital tv.
Tuesday, February 7, 2012
These trends encompass web and graphics design techniques which will likely play a big role moving into 2012. You have probably seen a few of these represented throughout many of your favorite sites online.
Thankfully the methods to implement these features are becoming easier to understand and much slimmer in code.
1. Responsive Interface DesignThe average user’s experience is possibly the most important aspect to consider when designing a website. You want page elements to respond quickly to keyboard/mouse input and behave as expected. Some examples may include side fly-out menus, drop-down boxes, and popup windows.
registration pages you’ll receive small responses as you work through each input area. You can automate checking for valid e-mail addresses, duplicate usernames, and even double-check password inputs. This will save time on the user’s end and provides a handy guide throughout the signup process.
2. Touchscreen Mobile DevicesIn the past couple of years it has become evident that smartphones are gaining support among even non-tech enthusiasts. But only since 2011 have we seen an explosion of mobile sites and mobile-specific templates.
Trends in mobile web design have shown that building an entirely separate mobile theme often provides the best results. In this way you can keep all the dynamic content in place on your main layout while serving up a slimmed version of the site to mobile users.
Who can say they honestly don’t enjoy free downloads? Web designers have been sharing their content online for years, but only recently has this become a very popular trend among digital artists. There have been a few communities built specifically around offering free downloads for web and graphic designers.
3. Tons of Freebies!
Two of my personal favorites are Download PSD and Designmoo, both of which get updated frequently by top-quality members. Additionally the Hongkiat Freebies archive has plenty of sweet goodies to check out. In any era before it has literally never been this easy to download free web interfaces, layouts, logos, banners, and practically any other type of PSD/AI file!
Some Neat DownloadsBelow are just a few cool freebies to check out from earlier in 2011. And if you think this list has some great files, just wait until 2012 rolls around!
Mini Web UI Set
Dark Mini Music Player
Dark Photo Slider
Login in/Signin Form
Login Modal Box
Clean Login Form
Minimal Loading Bars
Both of these new design archetypes have accumulated an ever-growing following throughout 2011. Semantic web designers have been waiting years to churn out CSS-only designs rendering rounded corners and drop shadows. Additionally the W3C has made a lot of headway in garnering support from the most popular browsers.
4. HTML5 & CSS3 Standards
I can only see good things for the future of HTML5/CSS3 web development. Front-end designers are often overlooked in today’s field, yet they serve such a great importance to the entire composition process. Try not to squeeze yourself into any set ‘label’ based on the techniques you know and practice daily. We offer a beginner’s how-to guide for HTML5/CSS3 coding if you feel the need to catch up.
Although this design technique isn’t exactly “new” it never truly broke through mainstream until just recently. You have probably seen examples of corner ribbons, banner navigation bars, and small ribbon badges. These trends have likely exploded because of the massive accumulation of detailed tutorials which can be found all through Google.
5. Ribbons and Banners
Web designers are more competent these days in launching their own blogs to share information. Now simple techniques can easily be passed around between designers to duplicate the most popular effects. There are even free PSDs you can download to save yourself the effort.
The final release of WordPress 3.0 included a host of long-awaited features such as custom post types and unique article images. Yet the most profound changes I have seen are coming from WordPress development shops which specialize in premium WP themes.
6. Premium WordPress Themes
After you purchase such a theme the installation process is similar to any other. Yet it’s now possible to include custom plug-in functionality, child themes, new admin menus, and a whole bunch of other features right from within the theme! WooThemes, ElegantThemes and Rocket Themes are few brands which stand out to me above all the rest. Their quality is impeccable and I feel their developers go above-and-beyond to create the best templates and most intuitive admin menus.
Going into 2012 I can only imagine WordPress will become even easier to use. This means more high-quality themes to be released, and more amazing blogs to be launched.
Speaking about WordPress themes we should also bring up the quickly-adopted success of online magazines. These websites are not so different from any generic WordPress blog aside from the general structure and page layout. You can spot these larger mags by the sheer presentation of their home page, and collection of authors writing for the site.
7. Online Magazines
As magazines begin moving online they will become a source of income for many writers. Granted a topic such as ‘web design’ targets a smaller niche than, say, gaming or economics. But the fact that we’re seeing more design magazines online than print goes to show where the world may be heading in the years to come.
As a facet of CSS3 it’s now easier than ever for designers to implement a drop shadow anywhere on the page. Box text and box-style elements have been given respective properties to render clear-cut shadow effects.
8. Easy Drop Shadows
The text-shadow syntax is very easy to memorize and follows along as box-shadow. With images now unnecessary in rendering these effects, web developers can focus on expanding these basic ideas further. I personally love Matt Hamm’s page curls which were developed entirely with CSS3. You can find all the code on his website to duplicate the effect and implement a similar style onto your own pages.
Fonts are a big part of the sphere encompassing web design tradition. The most notable fonts including Arial, Helvetica, Georgia, and Trebuchet MS have been around for years now. Although they continue to serve a deep purpose in web standards, there are plenty of alternate options for advanced webpage typography.
9. Dynamic Typography
Another alternative is Google Web Fonts which behaves in a similar manner to Typekit. I recommend interested designers to check out CSS3′s @font-face media query, as you are given much more creativity. This code can be used to import a
.otffont file from your web server and include it as a usable stylesheet font! With so many alternate systems used for building dynamic fonts I’m expecting 2012 to hold a surge of innovation and design talent in this area.
With the subsequent popularity of jQuery I have spotted more and more image slideshows being dropped into web layouts. Galleries are perfect for demonstrating a quick glimpse of inner-page content. This could be a set of portfolio entries, photographs, blog posts with featured images, demo screenshots, etc.
10. Image Gallery Slideshows
When you consider the many unique sliding and fading animations it has never been easier to construct a quick slideshow for your home page. I’m confident that 2012 will see an uptick in these trends, and not just between designers. Online web applications and software companies have been using slideshows as guided tutorials to display screenshots and unique features.
I feel that modal boxes are still fairly new to the Internet considering they’ve been appearing in desktop software and mobile apps for years. The purpose of a modal window is to offer box content(such as user registration or login) on top of the current page without loading onto a new one.
11. Modal Popup Boxes
Many of the open-source image gallery scripts use a type of lightbox effect where the background fades darker than the popup box. I really enjoy this feature whenever I see it, although it has yet to be adopted by many. And although modal boxes are sexy and sleek, they can also be very difficult to code and get working properly.
To get ideas for your own websites check out some of the more popular social news sharing communities. Reddit and Digg are the first two which come to mind as they both feature register/login modal boxes with a typical layout. Additionally the UI effects for Google+ boast a considerable amount of modal functionality.
Collections of list items have appeared since the very early days of web design. As we moved into the new century designers began using HTML ordered and unordered lists to house navigation menus. But nowadays lists can and are being used for much more.
12. Inspirational Lists
In most of the blog themes I find the entire sidebar is loaded with lists! Not to mention designers who have crafted awesome CSS styles for lists in their article entries. We covered inspiring list styles in another post earlier this year which may give you some more insight to the matter. Looking forward into 2012 I’m expecting some really creative examples, possibly on par with Flowapp’s custom layout for tasks & to-dos.
In the web universe we can agree that content is king. But most designers will also agree that a page of blank text becomes boring real quickly. Images can add that extra spice if you know how to sprinkle them in gently. One such method is using dynamic thumbnails to provide previews for each page or article.
13. Generated Image Thumbnails
Blogs today are continuing to adopt the featured image trend, so why not apply generated thumbnails into your theme as well? These often draw my attention towards the article headline and help to break up a page full of text links.
As another example Dribbble provides a whole gallery listing of thumbnails for each design shot. In such a table row-style layout it’s super easy to catch a glimpse of each thumbnail and scroll through to find what you’re looking for. This tactic has proven to grab the attention of the whole design community! Er, at least the members of Dribbble at best. I can only expect that 2012 will see further exertion of these ideas building upon such examples from the past.
This unique trend semi-originates from the popularity of Mac OS X icon designs. As programmers began to launch websites for their Mac applications we all too frequently have seen the enormous sizes represented in branding. Accordingly this trend has also been picked up through iOS developers and now comfortably rests within modern design culture.
14. Oversized Icons
It’s difficult to predict how these trends will fair as we move into 2012. On the one hand these icons can be clunky and take up more space than necessary. Yet we’re not even close to hitting a shortage of iOS/OSX apps and designers are still churning out pixel-perfect icon specs. Not to mention that web designers are now including oversized icons within just about any page branding! It’s a good way to nab your visitor’s direct attention and build a name for your company.
Anchor links are certainly within the top five most important elements of any website. These have obviously come a long way since the 1990s and popular design trends have only been growing exponentially. It appears we are moving into an era where exaggerated design takes precedence.
15. Exaggerated Hyperlinks
Check out a few of the link examples from Patterntap to see if any jump out and catch your eye. There are so many incredible ideas for hyperlink design, both in standard and hover effects. CSS3 rounded corners, text shadows, and custom font families add even more great ideas into the mix! One of my favorite examples is from SimpleBits which uses a short dynamic animation on each of their blog entry permalinks.
These ideas are only some of the more popular trends I have noticed gaining precedence throughout 2011. Great web design is always about focus and keeping user intentions as top priority. It’s unlikely these philosophies will differ moving into 2012, but how we build layouts and present data is always in change. Let us know your thoughts or questions in the comments discussion area.
Wednesday, February 1, 2012
|Having a mobile-optimized web site can really make your site stand apart from the pack. Even though smartphones like the iPhone and Google Android devices can display “the full web,” having a web page formatted for smaller screens and with features that can take advantage of a touch screen, geolocation, or address book functionality can make the mobile web browsing experience that much better.|
Even just a few years ago, optimizing websites for mobile browsers was a painful and difficult process, in part because of the limitations of most mobile browsers. Today, thanks to the proliferation of WebKit (which powers the browsers on the iPhone, Android and webOS devices, with BlackBerry expected to join the mix next year), it’s much easier to decide on a strategy for making your website pop on mobile platforms.
We’ve put together a toolkit of resources for the designer and non-designer alike to get you started. Did we miss your favorite tool or service? Let us know in the comments!
Services for Optimizing Your Content for Mobile Browsers
If you don’t have experience with HTML and CSS (or you don’t have the time), there are a number of services that can create mobile versions of your website for you.
MoFuse and MoFuse Premium — MoFuse has been offering a simple way for bloggers and businesses to easily create mobile versions of their websites for quite some time. For bloggers or smaller sites, the company offers MoFuse for Blogs, which is a free and easy way to quickly mobilize your web site (it uses your RSS feed to generate the new site) whenever it is accessed by going to “m.yourdomain.com.” For businesses or larger sites that want a little more control, MoFuse Premium offers more customizable options.
Disclosure: MoFuse powers Mashable’s mobile website.
Mippin — Mippin is another free service that can create a quick mobile version of your website using your RSS feed. The options aren’t extensive, but the version that Mippin creates should be viewable on almost any WAP compatible mobile phone.
mobiSiteGalore — mobiSiteGalore can create quick mobile versions of websites, offers users some customization options, and can take advantage of the .mobi TLD. mobiSiteGalore will let you create your mobile site from a computer or from your phone.
Plugins for WordPress and Other Publishing Systems
Having a WAP-formatted site is fine, but if you want to be able to offer visitors from an iPhone or Android device some really great optimized mobile features, you want to consider creating a separate stylesheet for your website. For users of WordPress and other publishing systems, there are a lot of plugin options available that make adding a mobile theme to your site extremely easy.
WPtouch — WPtouch is a fantastic plugin available for WordPress.org users (WordPress.com users can also take advantage of WPtouch with the recent addition of mobile themes) that automatically makes your site easy to read and access from an iPhone or Android device.
The plugin is extremely robust and even offers backend features like the ability to set an iPhone Favicon (so that when users add your web page to their iPhone’s home screen, it has a great looking icon), the ability to work with other WordPress plugins like FlickrRSS and Blip.it, support for AJAX, customized headers, and more. What I really like about WPtouch is that users can choose to turn it off and access the full version of a website at any time by flicking the mobile on/off switch at the bottom of each page.
WordPress Mobile Edition – Crowd Favorite created this plugin that allows users to easily define what type of devices should be shown a mobile web page (and what shouldn’t — for instance if you want BlackBerry users to see your mobile page but you want iPhone users to see the full site) and it comes with Crowd Favorite’s Carrington Mobile Theme which is easy on the eyes and also fully customizable.
WordPress Mobile Pack — The WordPress Mobile Pack is from the dotMobi team and it is a whole suite of tools for mobile web optimization. It includes a base mobile theme, which is very attractive, a mobile admin panel, mobile ad support and the option for visitors to switch between the full and mobile versions of a website.
WPtap — WPtap is a plugin for WordPress, and the site also offers up some alternative themes for users who want a more customized look and feel to add to their sites. WPtap looks very similar to WPtouch, but the emphasis seems to be on offering pre-built mobile styles.
WordPress Mobile by Mobify — This is a plugin for the Mobify service (see description in the next section). It handles automatic redirection of mobile clients to your Mobify mobile view page.
Mobile Plugin for Drupal — Mobile Plugin offers Drupal sites a mobile optimized view, comes with a mobile version of the standard Drupal Garland theme and includes device detection, hooks for adding mobile-specific features and automatic YouTube mobile replacement.
OSMOBI — OSMOBI is a service and plugin for Joomla and Drupal users that makes it easy to customize your blog for mobile visitors. The service is free for 150 page views every day but premium plans are also available.
Tools for Designers
Mobify — Mobify is a really interesting service because it makes it easy for designers or users who know HTML and CSS to painlessly modify and optimize their website for mobile access. The service is free (though paid monthly plans are available for more features) and it works extremely well with systems like WordPress, Drupal, ExpressionEngine and any other system that has predictable URL patterns and well formed HTML.
Mobify has a visual editor that lets you see what your content looks like on different device types and you can then modify the CSS and see the changes in real-time. Some sites that have used Mobify to create mobile optimized versions of their content include A List Apart and revered web developers and designers, such as Jonathan Snook and Veerle Pieters.
iPhoney — iPhoney from Marketcircle gives Mac users a pixel-accurate web browsing environment that is powered by Safari. Why does this matter? Because when crafting the mobile version of your site, it’s important to be able to see how the final product will look on your phone. iPhoney hasn’t been updated in a while but is still a really useful tool.
iWebKit — iWebKit is a framework of sorts for creating iPhone-optimized websites or web apps that can take advantage of the iPhone’s UI elements and other features.
jQTouch — jQTouch is a really innovative jQuery plugin for mobile web development on the iPhone and iPod touch. With it you can create websites or web apps with animations, support for forms, customized UI elements, additional extensions, swipe controls, and more. The developer is really active with the project and some of the stuff you can do with it is amazing.
iPhone Compatible CSS Layouts — Matthew James Taylor created a bunch of liquid CSS layouts that are iPhone and iPod Touch compatible and free for anyone to use. If you’re looking for a starting point for building a mobile optimized site, you might want to give these layouts a look.
Mobile Web Design by Cameron Moll — This is a really great book (available in print or as an ebook) with tips, best practices, and examples on styling and optimizing your site for mobile content. If it suffers from anything it is that it was written before the iPhone explosion really took off, thus it isn’t as up to date as it could be. Still, for mobile web enthusiasts, there’s a lot of great information here.
Craig Hockenbery’s “Put Your Content in My Pocket” — In August of 2007, Craig Hockenberry (from the Iconfactory and one of the brains behind Twitterrific for the Mac and the iPhone) wrote a great article for “A List Apart” and although some of the technologies have evolved, much of what Craig wrote then still applies today. A great read.
Smashing Magazines’s Mobile Design Showcase – Need some inspiration? Smashing Magazine did a great roundup of iPhone optimized designs in September.
CSSiPhone — CSSiPhone is a CSS gallery dedicated to iPhone optimized site designs. Like Picasso said, “Good artists copy, great artists steal!”
Opera Mobile Developer Community — As some of our commenters pointed out, the Opera browser lets you see what a website will look like on a mobile handset by pressing Shift-F11. Also check out Opera’s developer documentation for optimizing pages to be viewed on mobile devices. Opera Mobile and Opera Mini is a common browser on many cellular phones.
What do you think about the direction of mobile web development? Do you have any favorite mobile sites or mobile design tips? Let us know!