How Mobile Devices Are Transforming Web Design

In 2012, Google conducted a survey that concluded that 38% of all online media was consumed by smartphones.  By the end of 2014, only 3 years later, Smartphones will be used to access 60% of the media.  Beyond that, technology trend-watchers suggest that it could go as high as 85% — or even higher.

So it should come as no surprise that the massive shift to the smaller screens common to mobile devices are having a direct effect on Web Design and the manner in which content is delivered on websites.  We’ve recently witnessed the emergence of Responsive Web Design (RWD), which allows a website to adapt seamlessly to various screen sizes, resizing, rearranging and/or discarding graphic, textual and media content so that it can be navigated easily and be seen on some screens that aren’t much larger than a business card.

The necessity of designing and programming a site to function on multiple devices is driven by the new requirements demanded by consumers.  Especially on a smartphone, people want content to load quickly (that means less graphics), they want it easy to read (that requires shorter sentences, larger type, and less text), and they want it simple to navigate (fewer pages with denser content).

As a result, here are Seven Things to Watch for in Web Design:

Single Page Websites

Most websites have too much content, even before the advent of mobile computing.  With consumers looking for an easy-to-navigate site, with just enough information so they can make a decision, the single page website is the answer.  They rely solely on scrolling, allowing a smartphone user to avoid delays due to page load time — all they need to do is start at the top and scroll on down — one page containing everything they need to know.  This is not the best solution if you are looking for high SEO (search engine optimization), but most businesses are too small in any case to warrant that concern.  If you are looking to keep things short and sweet (and affordable), a single page website is worth considering.  See a sample…


On a similar note, with the advent of smaller screens, users have become more used to scrolling and therefore, the need to keep critical information “above the fold” is fading. The key is to keep a website page free from being too cluttered, containing categorical content within “tiles” or easy to click buttons, that can easily shift and slide to adapt to different screen widths.  Also, arrows or “text teasers” that entice people to scroll down will become increasingly popular on sites.

Flat User-Interface (Flat UI)

Flat UI, or flat user-interface, is an emerging concept in web design — the most common example is used by the Windows 8 operating system (see image below). The approach focuses on CONTENT (rather than large, complicated, fixed width graphics) and provides a basic design with less distracting elements. Gone are the days of fancy gradients, rounded corners, drop shadows, and objects that look and feel like 3 dimensional objects. Fewer graphics and simpler design elements equate to faster load times, which helps those who want to view the site on a slower connection with a mobile device. See live sample…


Fixed Header Bar

In the past, menu bars would be stuck in the header of the website, often near the logo, and usually at a fixed width. As you scrolled down, the navigation would disappear with the header, forcing users to scroll back to the top if they wanted to navigate further on the site. With longer web pages and mobile browsers, accessing that menu becomes more difficult. The solution is to fix the header bar to the top of the browser window, allowing it to follow visitors as they scroll down the page.  Yes, it takes up limited screen space, but it makes navigating faster — a worthwhile trade-off for some web developers.  See a sample…

Large Type

Large headers make a quick, immediate impact on readers and can better communicate the goal of your site, especially on a small screen.  Visitors will skip over large sections of text — or they will abandon a site altogether. Large type can help make headings that interest the reader and draw them further into the text (see image below). The average reader decides within a few seconds whether a website is worth exploring, so these large headings can help grab the attention of readers and pull them into other content on the site. See a sample…


Large Backgrounds

In the past, large background images have been hideous, would take forever to load, and make a website look horrific. These backgrounds were often more distracting and annoying than actually helpful in conveying a clear message. With faster internet connections, the time it takes to load a page is not as big of a focus as it was 5-10 years ago. Large background images are no longer an issue of loading time, but more of a question on whether the background image fits with the site. Assuming the right design and image, web designers can smoothly connect large background images into the rest of a design, actually enhancing the experience of the reader.  See a sample… 

Parallax Scrolling

Parallax scrolling is a special scrolling technique where background and foreground images and text are animated as you scroll, which helps create depth and can help bring the page to “life.” As you scroll through the page, text and other graphics become animated and move on the page to help create scenery and change content.  See a sample… 

What Should You Do About the Changing World of Web Design?

If you want your website to stay fresh and on the edge of the latest trends, we suggest updating your website’s design and layout every 2-3 years. While small tweaks are often necessary for different marketing ideas, a complete web overhaul every few years is becoming more common, as a direct result of the constantly evolving nature of the internet — but more importantly — the habits of the consuming public.  To put it bluntly, if you don’t serve your “meal” the way people want to eat it, they won’t.

Ask us for a quote on redesigning your website; the estimate is free, and an updated website might be the “make-or-break” decision for your company’s future.  A design update can enhance your brand and improve a visitor’s mindset related to the organization, as well as reach the new-age customers you’re looking for.

Take a few moments to read the companion articles in this series for more insight on emerging trends:

–       Why You Need a Responsive Website

–       The Death of the PC?


This entry was posted in Mobile, Web DesignBookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>