Did you know that web designer, speaker and author, Ethan Marcotte was the first to coin the term ‘responsive website design’ in 2010? There’s no doubt he was ahead of his time because by 2014, more people were accessing the internet from their mobile phone than from their desktop computer. Suddenly, mobile website design and, more importantly, responsive design was critical for businesses.
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”
Ethan Marcotte
So, 14 years on from Marcotte’s revolutionary forward-thinking thought, how are we still falling short of appreciating how vital mobile web design and device responsiveness is? As the tech & responsive website design revolution has continued to gather speed the market has been met with a further plethora of new products from tablets to different sized phones, laptops, desktops and consoles. And, what comes with this? Different screen sizes, different resolutions and thus a constant demand for better performance, better tech and more bespoke user experiences.
The below article, put together by our expert KIJO team, aims to explain what you need to do to ensure your responsive, mobile website design is doing exactly what it needs to do across devices. These responsive design best practices are all ones we stick to here at KIJO too.
Responsive design is a design approach that allows a user to experience the same website in a mutually satisfying way no matter the screen’s size, device type or orientation.
It requires intelligently used CSS media queries, flexible layouts, images and grids. The website should achieve the same thing across all devices and respond to a user’s preferences accordingly.
Below are the 10 responsive, mobile web design essentials we consider of paramount importance here at KIJO.
The viewport is the visible area of a web page. This area changes depending on the device being used. In the days before mobile and tablet browsing, most web pages were static and designed only for desktop screens.
But, as we’ve established, times have certainly changed! Now, as modern web designers, we have to perpetually optimise for a variety of devices. We do this by initially setting the meta viewport tag, which controls the width and scaling of the browser’s viewport.
In order to achieve the best results, include width = device – width to always match the width of the device “in hand”, and initial – scale = 1 to ensure the CSS pixels and device-independent pixels have a 1:1 relationship. This should limit any clunky inconsistencies when a browser switches from desktop to mobile and tablet.
KIJO Pro Tip: Keep your page accessible by not disabling user scaling.
We have all visited a mobile site only to be met with oversized images and a zoomed layout which forces us to scroll horizontally. This is not a good user experience (UX)! However, as developers and designers, we can definitely extend our empathy for the people who have made these mistakes.
When you use a meta viewport tag it can be all too easy to create content that doesn’t fit the viewport. The answer here is to not use content that requires a certain viewport width to render correctly. Avoid large, fixed elements that are not going to perform well cross-device. Guard against using large absolute positioning values for page elements. These will almost certainly cause issues on the smaller phone screens and produce what looks like a poor mobile website design.
You can also use CSS media queries. The media query appeared in its first iteration as media types in CSS 2.1 with little adoption. The idea was to target specific web-ready devices with acceptable media. However, most implementations were, to say the least, imperfect and it took until CSS3 was released for media queries to take form.
Media queries are an improvement in media types. They allow us to target and inspect the device that will render our site, adding device-specific rules that will shift content into the optimal layout for a positive user experience. The use of media queries means you can have a different user interface for each device, depending on that device’s breakpoint (i.e. portrait or landscape orientation). This makes it easier for a design to retain its integrity across multiple browsers and platforms.
Think of media queries as simple filters that can be used in CSS to change styles on a device-dependent basis. These can include height, width, type, resolution, and orientation. The syntax of media queries allows you to create these rules depending on the characteristics of the device you are designing for ensuring high quality mobile website design.
KIJO Pro Tip: When using the media attribute in the stylesheet use min-width instead of min-device-width in order to cover the most ground.
One of the core concepts underlying responsive, mobile website design is the idea of fluidity. This is in direct opposition to ‘old school’ fixed-width layouts. By using relative units instead of fixed units you can significantly simplify the layout of your design. This also prevents the creation of any elements that are too large for the viewport.
Relative units also allow browsers to render content depending on the zoom level of the user, mitigating the need for clunky horizontal scroll bars.
Following on from relative units, utilising a flexible grid-based layout is an absolute must. At KIJO, we use CSS to position spacing, margins and different layouts in a way that is not based on pixels. Why? Pixels can actually be a terrible way to approach design. Pixels vary widely across screen sizes. There is no standardised measurement that a designer can work with.
Instead of using pixels to express layouts, widths, margins, and text sizes, consider using percentages or “em”. Ems are a unit of measurement that is based on the current font’s point size. Ems are scalable by nature, which makes them perfect for a responsive and changing environment.
The equation for translating pixels into ems is as follows:
Target ÷ Context = Result(em)
The same calculation can be used for percentages.
The breakpoint is the point at which a web page will respond with the optimal layout to ensure efficient consumption of its content on a specific device. They are an extremely important element of good responsive, mobile website design. Unfortunately, many go about them the wrong way.
They define their breakpoints based on specific devices or operating systems. This can cause severe issues when these systems change. Instead, define your breakpoints using the content itself.
An expert tip would be to always design for the smallest screen size first, then refine the user experience as the screen size grows. Only use a breakpoint when it becomes necessary and the aesthetics of the page begin to suffer (i.e. too much white space).
This is one area where breakthroughs can be used to enhance readability on smaller devices. Popular readability theory suggests each line should carry about eight to ten words (in English). Therefore, whenever a line is set to surpass the ten-word limit you should consider using a breakpoint.
As a best practice, avoid completely hiding text when you can. It is tempting to remove ‘lesser’ content in the pursuit of a sleek appearance. However, don’t make the mistake of thinking the desires of a user change just because the screen size is different. If you are intent on hiding certain elements of your content on different devices, make sure the user data suggests that’s a wise choice.
You’ll want to keep a close eye on how things look when you start using media queries and breakpoints. You could mess around with browser resizing to trigger these actions or you could just use DevTools. If so, it’s important to note that each browser uses slightly different tools so you may need specific instructions depending on what you use. Below are instructions for Google Chrome Dev Tools.
KIJO Pro Tip: You can also use DevTools to measure ‘page weight’: the combined byte for total resources being utilised on-page.
It isn’t just the layouts that should change in responsive, mobile web design. It’s the content too. In particular, images must be used correctly to ensure that they look great and load quickly. According to Group Product Marketing Manager, Alex Shellman at Google Ad Manager, 53% of users will abandon a site if it takes longer than 3 seconds to load. So, quick loading images really are imperative.
The most important thing to remember is that you should always use relative sizes (as we mentioned above in “relative units”) for your images. This stops them from overflowing the container and causing a poor UX.
If you want to use different images for different devices, use the picture element to specify this. Also, use srcset and the x descriptor in the img element so that the browser knows which image you would prefer to use.
You could also utilise inline images if your page has unique content that’s not being used anywhere else on the site.
One element of web design that will never change is the need to thoroughly test.
We could be the best designers in the world. But, if our work doesn’t offer the optimal experience for our target user, then we have failed spectacularly. With that in mind, consider encompassing user testing during different stages of development.
This involves bringing in members of your core audience that have an incentive to tell you the truth. Their feedback will help you plug any gaps in your design. Get them to play with your site or app on as many different devices as possible in order to get the fullest picture. Only when our work is out in the ‘field’ like this will we get a firsthand view of whether it’s working and headed in the right direction.
As the future of web design and tech in general becomes clearer, it is even more important that we focus our time and energy on building websites that are truly fluid and responsive.
Versatility with regards to content and device layout will continue to be critical going forward. And, as always, testing to make sure the questions we are asking are the right ones.
Did you like this article? Why not read our next one: 7 UX Principals For Creating A Great Website.
Feel you could use some more support in building a website that is completely responsive? Contact us today to talk about websites, app development and discover how KIJO can elevate your online presence.
