As we head deeper into 2013, let's take a look at the trends making the web what it is today - a vibrant, constantly changing, updating and interactive place where work gets done, ideas are exchanged, transactions take place at a rate that triggers a whole new world of web development, web applications and website design, making it easier to access information, relate with people, network and get things done.
Trend 1: Responsive web design (RWD)
Trend 2: Infinite scroll and more vertical scrolling
Trend 3: Sticky navigation/fixed headers/fixed position design elements
Trend 4: Parallax scrolling
Trend 5: HTML5 and CSS3 are here to stay
Trend 6: Flash is out for mobile website design
Trend 7: Leaner, faster, high - performance websites
Trend 8: Modular design using design process building blocks
Trend 9: Scalable web design (SWD)
Trend 10: Designing for the retina web and the mobile web
Trend 11: The beta model release - going strong
Trend 12: Thinking big - Oversized buttons, headers, background photos and text
Trend 13: Simplicity - Minimalism is better
Trend 14: Single color sites - effectively using monochromatic color palettes
Trend 15: Illustration in web design
Trend 16: Social network badge design
Trend 17: Circles in website design
Trend 18: Blurred backgrounds
Trend 19: Single Page Websites
Trend 20: Skeuomorphic design is on its way out
The boom in tablets and mobile devices and the rise in multi-screen internet usage has placed the focus squarely on responsive web design or RWD as it is called. 17% of all adult cell phone owners in the US access the Internet mostly on their cell phones. No longer is it feasible or necessary to design different layouts for every possible screen size and resolution. Responsive web design has the flexibility to handle all environments, with layouts that respond to any screen size, whether desktop or mobile. It uses the same set of code to display properly on desktop, tablet and smartphone browsers.
Based on fluid grids, liquid layouts and media queries, responsive web design ensures that the design adjusts to fit different screen sizes, going from say three-column text layouts for PCs to single-column text for mobile phones. Web designers now have to take into account the dynamic nature of the web in other presentation formats too - from large-screen web browsing in corporate boardrooms and in homes, to high performance on car dashboards, among other user interfaces.
In keeping with the new design trend, major brands like Time magazine, Mashable, Microsoft and Awwards have launched responsive websites. Time magazine presents an enormous amount of information in a reader-friendly way without hiding content on mobile devices, whereas Awwards requires a few extra clicks for mobile users to get to non-core content.
Responsive web design makes good business sense. Here's why:
Responsive site design encourages the visitor to call - good for your business. Simpler navigation and functionality
You will find more statistics at Statista Mobile-first design
Designers will focus on mobile-first regarding design, form, usability and functionality. They will concentrate on how a person uses or interacts with the website, using natural user interface design (fingers and gestures, not cursors).
Tablet-first design makes sense
Growth in tablet sales is projected to outstrip PC sales worldwide. Says Forrester Research, tablets will become the "preferred, primary device for millions of people around the world" by 2016, owing to their convenience and rich user experience. Social networking, internet usage, consumer buying behaviour and web browsing habits are going unstoppably mobile. This is why many designers are opting for a "tablet-first" design approach - since users access more content on tablets than they do on mobile websites. ReadWrite is a tech blog that follows a "tablet-first" design - simple, consistent and user-friendly through all devices.
Some quick stats are given below on the growth in tablet sales and website traffic on tablets:
The share of Web site traffic on tablets grew more than 300% in the past year, according to research by Adobe.
According to research by Computer Industry Almanac Inc., by 2015 the worldwide sales of tablets are projected to reach nearly 36% of total PC sales or 186 million units, which is higher than the total worldwide PC sales in 2004.
USA tablet sales are forecasted to top 53 million units in 2015 or over 43% of total PC sales.
World tablet sales, 2010-2015:
- 2010: 16 million units (5.1% of total PC sales)
- 2012: 86.6 million units (20.9%)
- 2015: 185.7 million (35.9%)
Source : http://www.ericpaulsnowden.com/blog/#/2012/11/new-responsive-web-redesigns-from-major-brands/
Looking beyond the iPad, publishers will continue to create native iOS apps as Android and Microsoft tablet sales will trigger the rise of "impressive, hand-built responsive HTML apps that play everywhere". As mobile platforms evolve, designers need to watch out for Tizen, an HTML5-based mobile OS created by Samsung and Intel. Initial devices are expected in Q2 2013.
"Tizen is an open source, standards-based software platform supported by leading mobile operators, device manufacturers, and silicon suppliers for multiple device categories such as smartphones, tablets, netbooks, in-vehicle infotainment devices, and smart TVs. Tizen offers an innovative operating system, applications, and a user experience that consumers can take from device to device."
Web designers will have to design for multi-screen usage to make web content quickly and easily consumable by a sophisticated and impatient, on-the-go audience. Responsive design forces designers to focus on the most important content first.
All set to go responsive? Get ready to get noticed with readymade Responsive Website templates from Entheos!
This trend has become popular because of sites like Pinterest and Tumblr, which allow content to be loaded continually as the visitor scrolls down the page. No longer does everything of interest have to be concentrated "above the fold" - users are now comfortable with scrolling and so content can be placed at strategic points that attract eye movement as the reader quickly scans the page.
Vertical scrolling is the preferred user mode although a few devices allow for horizontal scrolling. It's just easier to navigate the site when you know which way to go.
Often used in single page web layouts, sticky (or fixed) headers using CSS or JQuery make it easy for the visitor to navigate anywhere in the site. In Sticky Navigation, the website menu sticks to the top or left of the page and is set firmly in place so that it does not vanish when the user scrolls down.
As your visitors scroll down the page, the nav menu scrolls along with them while remaining in the same position on the page. This makes the user's browsing experience much faster and less frustrating. Sticky menus are quicker to navigate and users prefer them without knowing why.
The website menu is locked into place so that it does not disappear when the user scrolls down. This makes the user's browsing experience much faster and less frustrating. Sticky navigation can be used for the footer and other design elements (like the logo or Call to Action button) as well.
Sticky navigation can also be used for other design elements like the footer, sidebar, product picture, logo or Call to Action button.
When the page size is smaller, sticky menus could restrict the space for content. One way out of this is to shrink the menu as scrolling begins or hide some parts of it, for simplicity and clarity. Smartphone users in need of more information will then click on additional links to get to the required content.
See examples of sticky page elements below.
Ryan Scherf has a beautifully designed fixed menu on a textured background with the feel of wood, to match the arrow button on the bottom left of the page, and the form with the call to action that ends the page.
In the Nizo site, the iPhone is fixed although other objects on the page move, giving the viewer a visual point of reference.
Kisko uses a Slide and Stick approach with its nav menu scrolling along with the site visitor but sticking to the top of the page once the end of the page is reached.
Web Appers has a sticky sidebar which stays constant when you scroll the page.
Parallax scrolling places 2-D objects on different layers in a web page and moves them in the same direction at different speeds to create a 3-D feel. The closest layers move the fastest. This technique which is used in games or product launches, is expected to become more popular in web design in 2013. Parallax scrolling lends interest to the somewhat standard web pages like the Home Page and About Us page, making them interesting and interactive.
The Bagagia site above shows the IPad case to great advantage. As the viewer scrolls, the case turns around and brings it close to the viewer's eye in extreme closeup. You can almost feel the material!
The TokioLab site reveals itself word for word while the reader scrolls.
Cultural Solutions uses graphic circles, another design trend, on a soft, textured background and leads the reader through the content as she scrolls.
Egopop's cartoon characters create a 3-dimensional, animation effect with parallax scrolling while drawing attention to the portfolio of the designer.
Soleil Noir has an engaging site that presents its beliefs and work culture in a scrolling slideshow, using bold typography, illustrations, colourful moving backgrounds and animation effects through parallax scrolling.