As web designers, developers and creatives, we spend a lot of time in front of big beautiful screens.
Our line of work means we’re constantly viewing projects on high resolution monitors, with retina displays and plenty of room to fit all the content we could ever want. But what can be easy to forget is that viewports like ours are far from the norm. We’re the lucky few with an excellent view.
That’s why it’s important to every-so-often remind ourselves how the majority of users are viewing the websites we labor over. Users are increasingly viewing content on smaller screens. Whether it’s on a tablet or mobile device, these smaller screens are making up an ever increasing amount of traffic to websites. In fact, web traffic from mobile has surpassed that from desktops, and did so a full two years ago.
While we’ve by no means forgotten the countless reasons why designing for mobile is important, we do want to take a second to remind everyone why it makes such a big difference, as well as how far we’ve come in mobile web design thinking in just a few short years.
Mobile Design Then vs Mobile Design Now
Web designers and developers have long considered screen size and browser window dimensions in their design process. At first, mobile was always a secondary concern, with minimal changes going into a mobile version of a desktop site.
It actually used to be fairly common to simply see shrunken versions of desktop sites on your phone. These websites were not only a headache to navigate, with constant pinching, zooming and scrolling involved, but it also took way too long to load due to media features too heavy for mobile devices to handle. Flash for example has never been a good look on mobile.
But as mobile devices and apps began to explode, so did a focus on the mobile user experience. What came next was what designers referred to as “mobile first design”. Mobile first design used the theory of progressive enhancement to design websites fit for shrinking screens.
Progressive enhancement designs with a focus first on the limits of the lowest browser, then adds elements to match the capabilities of larger screens and devices. Graceful degradation on the other hand is the process of removing elements to create mobile versions of sites, though it often can leave site feeling empty.
These days, the sheer amount of different screen sizes has once again changed how designers are approaching designing for mobile. Mobile screens used to be limited to 320 x 480 pixels, but now can be as large as 2950 x 1440 pixels. That’s quite a jump, and with it has come the need for sites to be more dynamic than ever. With that has come the continued growth of responsive web design, and even the emergence of new theories like intrinsic web design.
Your Mobile Design Options
When it comes to the technical ways you can create mobile websites there are three general trains of thought. We’ll see if intrinsic web design is able to gain the popularity to become a standard, but even then it could fit loosely into the responsive design model. Each of these methods has their pros and cons, but in general responsive web design has become the industry standard.
Responsive Web Design
Responsive website design uses fluid grids to resize and position content for any screen size. It manages to keep sites looking clean, while providing the necessary content whether the site is viewed on desktops, phones or tablets. One benefit of responsive design is that sites use the same HTML and URL for all screen sizes. Where you can run into problems is on content rich pages, as it may take longer to load, influencing the user experience and in turn your SEO.
Dynamic Serving
With dynamic serving, designers are able to choose specific HTML and CSS code depending on the user’s screen size. By removing certain elements for smaller screen sizes you can optimize the mobile experience with the content that works best for that viewport. Like responsive design, dynamic serving also uses a single URL. The downside is that you are essentially creating separate sites for each screen size, which takes longer to both design and maintain.
Separate URLs
Designing sites with separate URLs is exactly what it sounds like. Each screen size gets a dedicated URL with multi-directional annotation deciding which site gets loaded depending on the viewport. The obvious downside here is the legwork it takes to design multiple sites as opposed to one fluid design, however there’s also a danger of incorrectly setting up your annotation and getting penalized by Google. The upside is that you know your sites will work for their determined screen sizes.
User Experience Makes All the Difference
The most important thing to remember when designing for mobile is that it’s all about user interface and experience. The reason you create fluid designs or mobile specific sites is that you want users to be able to easily interact and consume the content on the page. That means no pinching, scrolling or tiny tap zones. It also means your pages should load quickly.
The reason these things are so important goes beyond just the user experience, they’re also things Google considers in its SEO algorithm. You’re hopefully aware of how important playing by Google’s rules is, but in case you need reminding here are some numbers from the past year to back it up.
- Google has a 78% market share of global search engine queries.
- The closest US competitor has a 5% market share.
- It has a 85% market share of global mobile search engine queries
- The closest US competitor has a >1% market share.
Needless to say, ranking well on Google’s search engine is crucial to getting more eyes on your site. In order to get them there, and keep them around, you need to have a site that works well for whatever device they are on, and provides them a comfortable user experience.
Mobile Shows No Signs of Stopping
The thinking on mobile web design has changed quite a bit over the years, but one thing that hasn’t wavered is the growth of mobile devices. Smartphones sales now exceed that of desktop computers, users are more likely to access the internet via mobile devices and tablets then desktops, and every year people are spending more and more time accessing digital media via mobile. It’s a trend that shows no signs of stopping.
As the number of mobile devices and tablets increases it’s important for designers to continue to tailor their design practices to these viewports. However, that doesn’t mean just making things simple. That would lead to some seriously boring design. Instead, we need to think about how content and user needs drive what we put on a website, and how we present it. With more and more data available on how users interact with content, it’s time to not only design websites to display and load correctly for visitors, but also be optimized to those visitors’ needs.
Smart, strategic website design will always outperform gimmicks. Design for design’s sake may look beautiful, but does it solve problems for the user? That’s the real question to consider when tackling mobile web design.
If you want to know more about our creative digital services feel free to contact us here: winhearts@harlointeractive.com
