If mobile devices are taking over, do web designers still need to think about designing for desktop users? They certainly do. Last year, more than three quarters of all browsing took place on desktop PCs, so no designer can afford to ignore this user base. That said, the market has changed. It’s now a multi-screen world where web users move from one device to another for research, entertainment, shopping and more. Web designers have to take note of that when designing websites for the desktop. It’s also important to think about how web design choices affect search engine optimization (SEO). Luckily, Google has given guidance on what it thinks are the best practices for web designers.

Google’s recommendations for website design and development

Until recently, many web designers had to design not only a desktop site, but a separate, stripped-down version of the site that lived on a mobile subdomain. Mobile device users were then redirected to that site. The downside of that approach was that it led to a poor user experience (UX) and diluted any SEO benefits for the main website. So it’s no surprise that one of the most important recommendations from Google is that websites exist from a single URL. That means that:

  • Web designers only have to create one site.
  • Web crawlers can index the site more easily.
  • Users have a better experience.
  • Tracking on-site interactions is easier.
  • There is no redirection.

Put it all together and you get the single most important trend in desktop web design: responsive web design. Essentially, responsive web design means designing a site that works well on all platforms and screen sizes, using the same HTML code and adjusting what users see on the front end with CSS. (If you’re technically minded, Mozilla has a good guide to CSS media queries.)

In other words, the single most important web design trend this year is to design not just a desktop website, but an everything website, suitable for those using the hugest desktop monitors and the smallest smartphone screens. Responsive website design makes for a better cross-platform user experience. With more people transitioning from device to device to complete actions this is definitely the way to go.

Example: Engadget

Web design – mobile first

In addition to creating a responsive design for desktop websites, designers must think about the growing number of smartphone and tablet users. Research from Pew Internet showed that in 2012, 31% of cell phone owners used only their phones for web browsing; that number is likely to be higher now. It’s why the best practice in desktop web design is a mobile first approach.

Instead of designing for the desktop and progressively removing functionality for mobile users, designers must take the opposite approach. They must start with the elements that will work on the smallest mobile screen and then progressively add layers of functionality and complexity (if they are needed) for larger screens.

Using a mobile first design has the advantages of simplicity, speed, usability, and accessibility, all of which are important features of web design best practices. Accessibility, in particular, is not just “nice to have”; in many countries it is a legal requirement to make web content accessible to users with visual, auditory and cognitive disabilities. (See our article on The Importance of Accessible Websites for more on this.)

Example: Smashing Magazine

Design trends for desktop website design – what’s hot; what’s not

The importance of mobile-first, responsive web design means significant changes in designing for desktop websites. Here are some of the key trends.

Design and layout

  • Fixed layouts are out, and even fluid layouts which shrink to fit each design are on the way out. Instead, web designers are focusing on making page elements move around to suit each device, leaving the content at the forefront at all times. The Next Web is a good example.
  • Grid layouts similar to the one used on Pinterest, and layouts using flexible boxes that shift as needed to cater for different screen sizes are also being used. ReadWrite uses this effectively.
  • Instead of gradients and skeuomorphic page elements, many designers are using flat design with single blocks of color and 2D icons. These result in faster-loading sites which helps both desktop and mobile users. See examples on FlatUI Design.
  • Some designers use infinite scrolling (for example, on Forbes) so that there is a constant stream of content.

Navigation and content organization

  • Many desktop sites now include mobile navigation elements. A single click (or tap) rolls out a menu to help users navigate the site). A good example is on Slate.
  • Another option for desktop web design is a fixed menu bar with content scrolling below it, keeping the menu accessible no matter how far down the page users get. An example is on Southport on Cape Cod.
  • Parallax scrolling is another design option, where background and foreground elements move at different speeds. See examples on Creative Bloq.

Typography 

  • Type is larger even on desktop interfaces so that it also looks good on mobile devices. This includes button text. See Forbes for an example.
  • At the same time, keeping paragraphs short is even more important so that it works well on all devices.

Media

  • Instead of using Flash, which is not supported on many mobile devices, designers are embedding video with HTML5 and CSS.
  • Designers are also optimizing images for loading on mobile devices.

What’s ahead for desktop web design

Mobile first, responsive web design for desktop web designers is only the beginning. With the number of mobile device users still growing, there will be another change in design norms.

Jonathan Smiley of Zurb predicts: “We’ll see responsive design move even further into truly device-agnostic design. That means we can plan for devices that don’t exist yet more cleanly, as well as take better advantage of specific capabilities and constraints.”

We agree. What desktop web design trends are you seeing?

Resources