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
Besides screen sizes, web designers have to keep in mind the screen resolutions of new-generation devices. Apple’s high res retina display iPad 3 gives you 2048-by-1536 resolution for sharper, crystal clear images. With the Retina Macbook Pro, Apple has raised the bar for display standards by bringing double-density screens to all its current product categories.
How can designers take advantage of the high-res retina display while keeping in mind that most users will access the web on lower-resolution mobile phones? Designing for the best user experience across devices is the answer.
CSS Sprites let you take a lot of smaller images and combine them into one larger image, so that each single image doesn’t need to load separately. In the case of multiple images, this saves a lot of page loading time... which is especially critical in the case of mobile devices.
Working towards device-independent web design - using CSS pixels (device-independent pixels)
From physical pixels to screen density measured in pixels per inch (PPI), today designers are talking in terms of virtual or CSS pixels. A CSS pixel is an abstract unit used by browsers to precisely and consistently draw content on Web pages. Generically, CSS pixels are referred to as device-independent pixels (DIPs).
As the web continues to evolve, learning new ways of adapting and designing to new standards while keeping the majority of users in mind is a challenge that designers have to live with.
New approaches to design and development include rem units (for elastic pixels sans pixel or percentage measurements), CSS grids support and RWD (responsive web design), (link back to page 1 of this article ensuring that more designers are trying out different ways of getting the job done. Experimental and live iterative design is becoming acceptable in creating websites and web apps: launch a beta version - a work-in-progress, add features, get feedback, improve it and launch another version.
This approach is less expensive to develop and saves time to market, when it invites feedback from live, real-world users: feedback that helps reduce errors and improve the product, resulting in fewer chances for expensive failures.
With the rise in popularity of touchscreen devices to access the web, it is only natural that larger buttons and call to action buttons which allow ease of navigation through touch, have been adopted into web design.
The trend to oversized elements is also demonstrated in the usage of large typography, large photo backgrounds and headers.
In the Teothemes Wordpress theme above, you see large type on a full-screen, textured /blurred photo background, with social networking icons up front. The menu stays fixed on scrolling down, although there is horizontal presentation of content as well.
Large buttons with a soft texture invite web visitors to click through while enhancing design.
Buttons have to be large, colourful and easy to use, for children using the Ipad or Iphone for educative and fun games like Postman Pat, Fireman Sam and Bob the Builder.
The huge background photo in The Amazing Spiderman Game adds to viewer impact.
Mendo, a Dutch site, promotes books with full page photo backgrounds which are visually arresting.
Oversized typography draws attention on Stephen Caver’s website. Today, designers have a plethora of web-friendly fonts to choose from. Some of these are seen in the Brave Nu Digital site below.