When tasked with designing or developing an interface of any sort, whether that be websites, apps, etc., there will be a variety of different screen sizes that will be accessing and using these interfaces. While we’re in a time where mobile devices are accessing websites just as frequently as desktop users, it’s important that all elements of the site adapt to each screen size to appeal to half of the website visitors.
Designing for mobile has become a standard that most certainly should be met, but it’s also not an easy task most times.
When designing a website, our natural instinct is to create a canvas that suits larger, desktop-sized screens. Because why wouldn’t we? It makes sense that we would first design for desktop… on a desktop. After the desktop design is complete, we then begin designing for smaller screens.
We’ve created a masterpiece for the desktop, where all of the elements are crafted in a way that makes sense to desktop users, but now when we start designing for mobile we begin to realize… that it’s hard compressing content and designs from a big layout to a small one. With this approach, many times the interface becomes more complicated than it needs to be, because we’re compressing a large amount of data that’s displayed at once into an interface that shouldn’t be showing everything at once.
Is there an alternative approach? A method that will simplify the mobile experience AND the desktop experience without even trying too hard? An approach that makes all layout make more sense and give everything some room to breathe?
Yes, and it’s so easy that it’s almost stupid…
Design your mobile layouts first, and then scale that layout to your tablet and desktop sizes. Here’s why:
Once you’ve figured out a good layout and design for a smaller screen size, it becomes easier to scale that layout out to larger screens. This is because you’ve already found a way to show your data and information in a simplified manner, and when designing the larger screens -all that’s needed to be done is to re-position things and make it larger for desktop.
This technique is one of many for designing for multiple screen sizes, but designing mobile-first is unarguably the most effective.
The downside to designing on mobile is there’s less canvas room if you’re trying to be creative. So if you’re designing a website with lots of fancy graphics and illustrations, it may be easier to display the fancier elements of your websites by designing on a larger canvas first. But we also must realize that the content and UX matters more than anything, including fancy illustrations and graphics.
Designing desktop-first is a hard habit to break, after all there’s so much more room to be creative, but this approach hurts smaller screen designs more often than not. Designing for mobile first lets us expand on an already-simplified layout, making things more minimal with more opportunity for whitespace.