For years web designers created websites only for desktop monitors. The screen resolutions varied but there was always a “safe zone” of common resolutions.
Nowadays those safe zones are gone. Anything with a screen and Internet access can be used to browse the web.
A study from IDC estimated that over 2 billion people using the Internet in 2016 would be mobile users. 2016 is also the first year that mobile exceeded desktop for Internet browsing.
This data points towards a need for mobile first design. It’s not only a simpler way to create websites, but it’s also necessary to create experiences that work for all users.
What Is Mobile First?
The ideology of mobile first design stems from the design workflow. It’s the idea of creating a website’s design for the smallest screens first, then working your way up to layouts for larger screens.
This assumes you would create a minimalist version of the design first. You’d remove all the unnecessary features and create a fully usable interface on mobile before anything else.
The alternative would be creating a layout for desktops first, then slowly removing features until you get down to smaller screens. This can work but it’s less efficient and doesn’t always consider the user experience.
You can find lots more info in this post covering the benefits and drawbacks of mobile first design.
I also really like the following quote from this Stack answer about mobile first design.
Mobile First is a methodology — a mindset. It’s about designing with the constraints and capabilities that mobile provides. Designing with constraints forces you to focus and prioritize while designing with new capabilities attracts innovation. Hopefully with the result that what you learn from the process benefits your content everywhere — not just on mobile.
The attitude of mobile first is commonly applied to the design phase. But developers should also think about working from a mobile first mindset.
This way all major features are supported by all browsers. Fancy animations or dynamic elements should be an afterthought with a mobile first approach.
Building With Progressive Enhancement
There are two common methodologies for building usable websites.
First is graceful degradation which focuses on all the feature-rich elements first. If some of these features can’t work in certain browsers the developer finds a way to remove that feature gracefully.
Alternatively there’s progressive enhancement which is the best for a mobile-first approach. With progressive enhancement(or PE) you’re creating a bare-bones layout first. Every PE design should be usable with JS disabled and with CSS disabled.
PE assumes that some users have most features disabled and they still need to access the site. From there you can add features like CSS and JS support, followed by CSS3 and more advanced JS properties.
With this method you ensure that a site is usable for everyone — even in the most extreme cases that may never happen.
Since mobile users are typically the most limited on features and screen space it makes sense to apply progressive enhancement with a mobile-first approach.
If you’re a designer or frontend developer with little PE experience you should check out this post I wrote for beginners. It has tons of examples for designing without CSS and JS along with some tips for understanding the progressive enhancement mindset.
And if you need more here are some other great tutorials to get you started:
- Progressive Enhancement: What It Is, And How To Use It?
- A Complete Guide to Progressive Enhancement
- Progressive Enhancement Techniques
Reordering Page Structure
Other than page features you’ll also need to think about structuring page content. Mobile screens don’t have room for sidebars or big fancy headers. Screen space is the most valuable asset.
Try sketching your ideas first as wireframes to get out different ideas. Visually you’ll have a much easier time understanding how content should flow down the page.
Content should flow naturally in a linear fashion. Headers should be large, but remember there’s not much space on mobile screens. Larger text is easier to read but also forces the user to scroll more frequently.
A good rule of thumb is to make text large enough to read from a distance. Nobody should have their neck craned forward staring intently just to read on their smartphone. This also applies to desktop but most monitors have plenty of room for adjustments.
If you want some ideas check out examples in the Media Queries gallery to study how other responsive layouts handle excess content.
Starting from a mobile first approach ensures that all the important stuff fits on the page.
This process can be stressful at first but keep at it. The more you study other websites the easier it’ll be to pick up techniques and apply them to your own designs.
Handling Mobile UX
One other aspect of a design is the user experience. Mobile users will always have a different experience than desktop users because of the interface.
Smartphones require touches and taps rather than mouse clicks. Add the fact that most mobile devices have fairly small screens and you’ll understand why mobile layouts are limited.
You have to consider how large an element is and how difficult it’ll be to tap. Apple’s guidelines typically recommend at least 44px but this isn’t perfect and it’s not an absolute guideline.
The good news is that all mobile web browsers natively support touch. This means you don’t need any special plugins to create a mobile site.
But always remember that users have less direct access to the page without a mouse. This is why it’s crucial to design clearer buttons, nav elements, and larger text for links.
And there are plenty of libraries you can use for handling swipe effects but they’re not supported natively. You can always use JS but the web still has a ways to go for full support of swipe effects.
Stick to the basics and do lots of user testing if possible. Over time you’ll quickly learn what works and what doesn’t.
Moving Forward
The best way to learn anything is through practice and repetition. Mobile first design is no different.
While the techniques and workflows can be challenging to master, the overall ideology should be easy to internalize. Once you understand that designing for mobile first is the future of the web then your design workflow will eventually fall into place.
This article was originally published on the Envato blog.
