Are you reading this on a mobile device? If so, you aren’t alone. With close to 87% of internet users owning smartphones, it stands to reason that more and more people are doing their internet browsing and research through mobile means.

Mobile-first web design is the practice of designing and developing websites to be viewed on mobile devices first, before working on a desktop view. By optimizing your website for mobile viewing, you can ensure that if anyone happens upon your website while using their smartphone, they won’t be turned away by unreadable text or unclickable links.

The History of Mobile Devices

The term smartphone has been around since 1995, but the first smartphone to feature modern touchscreen technology was the iPhone, which came out in 2007. With this, websites were launched into the mobile world, forever changing web design and development best practices.

Since then, technology has continued to give us more devices that are capable of accessing the internet, including, but not limited to; Smart TVs, gaming consoles, and smartwatches. With so many platforms that people can view websites on, it’s more important than ever to design for more than just the standard desktop view.

Statistics courtesy of “Mobile Marketing Statistics Compilation”, Smart Insights

So, why practice mobile-first web design? Why not tablet-first, or smartwatch-first design? The term mobile, while typically used to refer to phones, is not exclusive to smartphones. The principle behind mobile-first web design is that you design for the smallest possible screen first, and scale your way up to larger sizes. The smallest possible screen size may change over time, but the mobile-first method applies regardless of what screen resolution or device you start out with.

In this article, we’ll cover what different website elements feel like in a mobile environment, how to implement them using both responsive and adaptive design, and what to remain aware of when working with mobile devices and small screens.

Website Elements and Mobile Devices

Most of us are familiar with the various elements that are found on a webpage – logos, navigation, sliders, headers, copy, footers, etc. But in order to learn how these should work on mobile devices, you’ll need to take a closer look at the base elements of a website – text, buttons, and images.

Text

One of the most common elements of any website is text. Text is located all over traditional webpages, from headers and copy, to links and descriptions. The most common problem encountered on a mobile device is that text is too small to read, forcing users to zoom in on your website in order to view it. However, text that is too large can also cause problems – if only a small amount of text can fit on the screen at a time, this is just as poor an experience for mobile users.

Paying close attention to the font sizes used on your website at different screen resolutions can go a long way towards ensuring mobile compatibility. There are four different ways to set the size of your text – pixels, points, ems, and percents.

Pixels and points are fixed units that tend to appear on the web and in print documents, respectively. Ems and percents are relative units that change based on browser settings and screen resolution.

So, which one is better to use for mobile-first web design? Best practices indicate using percents for the best all-around experience, but any of these sizing methods can work with the help of media queries. The best way to find out what works for you and your website is to simply test it out!

Note: Having the right text for a mobile experience is about more than just selecting the proper font size. Font family, weight, color, text decoration and transformations, line heights, and letter spacing can also play a large part in readability on both mobile and desktop devices.

Buttons

If you have visited any website recently, you’re sure to have seen a call-to-action button encouraging you to explore other parts of the website, or a submit button for a form. They’re an essential part of any site, and yet one of the more problematic elements for anyone new to mobile-first design.

Buttons, similar to text, can have readability issues that are related to font size. But they also can have issues with providing too small of a clickable area for mobile users, and being too close to other clickable elements on a website.

The most important part of making buttons mobile-friendly is ensuring that users are able to comfortably tap on the button while scrolling on their mobile device, which means allowing a space for the user’s entire finger or thumb to touch the button. You can give users this space on the button height, the button width, or the margin surrounding the button.

The average width of an adult index finger is 2cm, which is approximately 57 pixels, while the average width of an adult thumb is 1 inch, which is approximately 72 pixels. This means that at it’s smallest size, a button should always have a height of 72px and a width of 144px, in addition to a margin of error that gives at least 10 pixels of additional space on either side.

Images

While websites are not usually constructed entirely from images as they were back when the internet was still young, they are still one of the most prevalent elements of webpages, showing up in large sliders and carousels, attached to product and page descriptions, and scattered across pages as icons or visual cues.

Unlike text and buttons, images can be scaled to fit anywhere with the same aspect ratio. This is the proportion of an image’s width compared to its height, with the most common ones being 16:9, 4:3, and 3:2. As your image scales in size, the aspect ratio should remain the same, giving your image relatively the same appearance across all screen sizes.

Because images are used in so many different places on websites, the way they should be displayed on mobile devices depends heavily on their intended usage, and what other elements of a website they have been paired with, if any. The most popular use of images these days is in sliders.

Image Sliders

Many websites feature a large image slider, or carousel, on their homepage. They provide an immediate visual representation of products or services, and tend to grab a user’s attention as soon as they land on a page.

Sliders in particular tend to challenge design best practices as we know them. Here are a couple considerations when implementing sliders for a mobile device:

1. If the aspect ratio of the image is large, and you intend the user to be able to scroll on the website, then the entire slide cannot link somewhere. A button should be used instead so people do not go to a different page on accident. However, if the aspect ratio of the image is small, then a button does not necessarily need to be used.

2. The text located on your slider must be able to scale proportionately to the image, while still keeping with current mobile text standards. If you cannot appropriately scale the text, you may need to cut down on the amount of text or eliminate it altogether.

3. When on mobile, the text you have on your slider must not cover the entire image in a such a way that the purpose of the image becomes lost. If the message conveyed via text is more important than the image itself, you may need to remove the image or replace it with a more generic image.

Sliders are also one of the places on websites where we can clearly see the impact of mobile-first design. Before mobile-first design was popular, most sliders were a single, linked image with an area reserved for text. Now, because of mobile-first design, they usually feature only a small amount of text, and a button to prompt users to scroll down or reach a new area of the website.

Sliders Before Mobile-First Design

Sliders After Mobile-First Design

Note: You might be tempted to use a small image when using mobile-first design, but don’t forget to save a high resolution copy of your image for desktop use. Large images typically scale down just fine, but scaling up a small image can cause a loss of quality that makes your website look unprofessional.

Implementing Designs on Mobile Devices

Most web developers don’t get the chance to preview their work on a mobile device right away – many use a small browser window to view, test, and debug code at small screen sizes. When you go to make any mobile-friendly website, make sure to include the following meta tag in the head of your HTML:

By including this meta tag, you are telling any device that loads your website to base the width your website is shown at on the physical width of the device’s screen, and that the initial view of your website should not be scaled either up or down from the intended view.

In addition to the meta tag, you will also need to add this code snippet to your CSS to ensure compatibility on any devices running Windows 8 and using IE10:

Neither the meta tag nor the CSS rule will assist you in actually writing your code for mobile devices, however – they will only make sure that code works as expected when implemented. In order to write your code, you’ll need the help of media queries – and in order to know what media queries to write, you may need the assistance of one of the following popular web design approaches.

Responsive Design

Responsive design is a web design and development process that responds to the size of the viewport. As the size of the viewport changes, elements on the webpage will increase or decrease in size or fall into place accordingly.

This approach is often used in conjunction with fluid layouts, as both feature a seamless transition between various viewport sizes. The main difference that sets responsive design apart from a true fluid layout, however, is that the elements can change at different times, and in different ways than a fluid layout would allow.

Responsive design is popular with many web developers and is considered the current best practice for web design due to the freedom it allows with designs. You set your own breakpoints according to the width of a viewport, and you decide where to set your breakpoints based on how the layout looks as you change the size of your viewport.

Having trouble writing your media queries? Check out CSS Media Queries to view the full complement of available media queries for your website. Don’t be afraid to try out new combinations, either – there’s no wrong way to set breakpoints with responsive design.

Adaptive Design

Adaptive design is a web design and development process that adapts to the size of the viewport. As the size of the viewport changes, the entire layout of the page or certain areas of the page will change once a certain breakpoint has been reached.

Adaptive design isn’t quite as clear-cut as responsive design, because the definition of what adaptive design really is has grown over time. So when a website is using adaptive design, that means they could be doing one or more of these things:

• Using a completely separate mobile and desktop website or design, where the mobile version typically allows users to access the desktop version if they would like to

• Showing one of any number of pre-defined layouts based on the original viewport size at the time of page load, and keeping that layout even if the viewport size is changed

• Adding or removing a certain element or set of elements based on device type or viewport size, which may or may not change when the viewport size is changed

• Completely changing the layout or design of either the website or any elements based on device type or viewport size, which may or may not change when the viewport size is changed

That being said, adaptive design provides users with a set of breakpoints based on popular devices and common screen resolutions:

While this is just a basic set of breakpoints, websites that use adaptive design have many more than just these. Often they will include height as a parameter, or they’ll use -webkit-device-pixel-ratio to target specific devices. Don’t forget to look up more breakpoints, as well – the min and max widths used change all the time depending on which devices are currently popular and what current website standards place screen resolutions at.

NOTE: While responsive design is considered the current best practice for mobile-first web design, adaptive design is often easier to start with the first time you make a mobile-friendly website. Use whichever one you feel would be best for you, and don’t be afraid to mix these design types together if needed!

Additional Considerations

Designing for mobile devices isn’t always about meeting current website standards – when using their phones or tablets, people have a certain expectation for the way elements are displayed, and it’s okay to design your website a little more like a mobile app for the best user experience.

Here are several things that you should keep in mind about the mobile website experience that differ from a traditional desktop experience:

• Hover effects don’t always work as expected. While the support for hover effects in mobile devices has increased in the past several years, there’s still no one-size-fits-all solution. Make sure hover effects aren’t the only way the individuality of your website is expressed, and don’t lock any content behind a hover effect.

• Images and other resources don’t always load quickly. On a desktop computer, the amount of files you can add may seem unlimited, but mobile devices can quickly become overwhelmed by the number of files and their file size. Consider loading alternative, smaller versions of files for mobile devices to keep your loading time to a minimum.

• People can’t always reach the top half of their mobile device. Most people are willing to move their mouse anywhere on the screen for a bright and friendly call-to-action on desktop computers, but with the mostly one-handed operation of mobile devices people usually only select items towards the bottom of the screen. If you have a single, revenue-driving call-to-action button, you might want to always keep it visible towards the bottom of the screen.

• Mobile compatibility impacts Google search results. If your website is not mobile-friendly, Google will not serve it to mobile searchers. In addition to following the guidelines for website elements in this article, make sure your robots.txt file isn’t blocking any CSS, JS, or images that tell Google your page has been built for a mobile display.

Not sure if your website is mobile-friendly? Run it through Google’s Mobile-Friendly Test to find out!

Now It’s Your Turn!

With overall mobile usage now surpassing desktop computer usage, it’s more important than ever to switch to a mobile-first thought process for designing and developing websites. By keeping in mind how various elements look on mobile devices, and the principles of responsive and adaptive design, you should be able to design your website for any device or screen size. And don’t forget to test out your work on a real mobile device – even the best emulators can’t compare to the real thing.

Christine Logan

Christine is a front-end web developer from Las Vegas, Nevada. Originally from a background in computer science, she now specializes in design best practices and how to apply them to the web. Her website is: http://www.christine-logan.com/