2010 has been an incredibly verdant year for web designers. Mobile has hit the mainstream; Web typography has reached new levels of sophistication; New coding techniques have vastly improved our ability to get creative with design (without compromising stability). All in all, it’s been a year that’s moved fast, even by the standards of the web, so let’s dig in to our first annual post covering the state of web design as 2010 turns to 2011.
The Death of the Fold
The traditional “fold” (the imaginary line on a screen that designates what content is visible before a viewer needs to scroll) became vague, unimportant, and nearly irrelevant in 2010.
Why? Because the traditional “screen” that people view the web through has undergone an explosion of variety… no longer can we expect web-surfers to be on something close to a 19″ monitor with a resolution somewhere between 1024×768 and 1280×700. Screens nowadays come in all shapes and sizes, from iPhones (and smaller phones) to 60″ HDTVs. It’s not just resolution that can vary wildly though; the very aspect ratio of a screen (even on the same device like the iPhone) can change with the flick of the wrist. Sure, web designers will always be advised to keep the most important messages of a site near the top, but with so many new ways for web-surfers to view the web, there’s no longer a defined height for where content must be above.
We’ll be discussing this topic in a lot more detail this month, so subscribe (it’s free) to stay tuned.
Mobile Sites – Web Design Trends
Sites have been being designed for mobile scenarios since the inception of mobile devices… but 2010 has seen a huge push towards entire sub-sites that are designed specifically to be viewed on small, handheld screens. You can thank the iPhone for starting this trend, but the wave of “mobified” sites is spreading like wildfire…. and come this same time next year, I’m sure you’ll be hard-pressed to find a major publishing site without a mobile companion site.
What’s neat about mobile screens is that it forces designers to get creative with a relatively small amount of real estate. Succeeding in the mobile environment isn’t tough if you keep a few rules in mind: Messages need to be conveyed quicker and with more efficiency; Links have to be designed for a touchscreen environment; and text needs to become legible (or at least effectively zoomable). Here are just a few examples of mobile sites:
For the FULL article, click here
Massive Images – Web Design Trends
Here’s another trend that’s been happening for more than just this last year. Massive images were once taboo for web designers, but thanks to better image optimization, faster internet connections, and smarter loading methods, designers can gain a lot in some sites by pushing image sizes to the max.
More than just “big images”, we’re beginning to see more trending towards sites that use vast illustrative (and photographic) backdrops that are as a part of the actual experience as they are simply additional artwork.
More CSS3 + HTML5 – Web Design Trends
What a gratifying sigh of relief! CSS3 and HTML5 have been on the distant horizon of web design for the past couple of years, but now, in 2011, we see an explosion of it. Designers are finally starting to let go of Flash. However you may feel about Flash, you do know that it does not play well with some of the hot, new technology available to your current and potential visitors. In 2011, you will slowly step away from Flash and embrace the magic known as HTML5. Look at the amazingly similar comparison:
Now that’s shown, please understand that Flash and HTML5 are not equal opponents. There is plenty of room for both in 2011. The problem is that designers in 2010 (and before) misused Flash. Case in point, very rarely should your entire site be made of Flash, especially these days. HTML5 alleviates some of the burden we have placed on Flash. However, HTML5 cannot (yet) replace the extraordinary design elements we can achieve through Flash.
Perhaps even more exciting is the fact that CSS3 is available to us in a real way this year. Move over Photoshop (wow, Adobe just cannot rest), because CSS3 is making short work of text shadow, border radius and image transparency. If you have not already begun, now is the time to really delve into understanding CSS3 and HTML5.
Designing for Touch Screens – Web Design Trends
Technology has become much more tactile. Usability is shifting from abstract to tangible. This means that instead of navigating your mouse to remotely connect, your destination is literally at your fingertips. Tablets, most smartphones and some desktops use touchscreens. Does your design accommodate fingertip navigation?
How much of your design is mouse-oriented? As designers, we worship mice. Our links light up when the mouse hovers over. However, there’s no hovering in touchscreen. How will your design indicate links to your visitors? What about drop-down menus? That’s also a no-go in touchscreen design.
Similarly, how will visitors peruse your site? As controversial as it may be for standard web browsing, horizontal scrolling may be more appropriate for touchscreens. Fitting nicely into this niche is a magazine-like layout where visitors virtually flip through your site.
Lastly, consider using liquid layouts as part of your commitment toward responsive design. In 2011, you are no longer dealing with screen resolution size. Visitors can change their viewing orientation from vertical to horizontal. Your design must be flexible to meet any challenge, or you will be a relic of 2010.
QR: Quick Response
If you have noticed those square barcodes popping on business cards, magazines or else where, you may already know that they are a hot trend for 2011. How exactly does it translate into web design? Amazingly well, in fact.
The barcodes are called QR, short for Quick Response. Simply take a photo of the unique barcode with your camera phone. Like magic, your phone will call up the website associated with said barcode. The beautiful thing about QR is that you can use it in a myriad of ways. Feature your QR on your website, in order for site visitors to have a shortcut to your mobile site. You can also track your visitors through QR, by placing a special referral code on your URL. When you are leaving comments on sites such as this, use the QR as your avatar.
2011 is all about mobility and it will be smart to take advantage of this new medium.
\For the FULL article click here
