Designing for Mobile First
Designing for responsive layouts has been a big topic lately. I’ve been reading up on it a lot, and have officially been won over to a side. I believe that starting small and working upwards in size is most often the best way to create websites these days. We should start with the mobile design first.
Designing mobile first forces the content and functionality to be considered from a “what is most important” standpoint. Designing for mobile also outlines colors, general shapes, the feel of the website; all while restricting the design to its most basic elements. This starting point will help organize the site and fixing user experience problems at this size will help prevent them showing up later, when things are more complex. Architecting the user profiles at this stage will only serve to be the foundations of the ones at the desktop size.
Frankly, I think that this will be a relief to most designers. You get to build your design from the ground up, instead of trying to shove a big design into a small screen. Helpful advice: Use a grid system. Pick your favorite sized grid, and let your developer know how many columns you’re working with. You need essentially three different design versions at the minimum:
- Single column
Thinking about designing the website from the mobile version up will make setting the site up less messy later. It will save your front end developer time. It will give your front end developers a spot to set up all of the “basics” of the website, setup the markup flow, set up media queries and css. If you have the content narrowed down, you’ve got a basic idea of what the back end developers are going to need to focus on first. It will get the whole process moving in the right direction. It will help make things easier for the whole team, and fit right into the Agile or Waterfall process.
Designing for mobile first may seem like putting the cart before the horse at the beginning, but when you think about it, a lot of things have changed in the design world since the internet has been born. We no longer can think in terms of printed static designs slapped onto a screen. We have to consider things like eye strain and display density. Animations are available and design aesthetics change rapidly. We have a huge range of screens, with 85% of visitors have a screen resolution higher than 1024×768. Most computers display 16.8 million colors. Mobile browsing accounts for 12.3% of browsing, but mac only accounts for 9.2% and we’ve been supporting them for years, even as their percentage was as low as 2%.
Design has to adapt to our changing world. It always has. It starts by considering the whole picture at the beginning of the design process, not tacking on ideas later. We wouldn’t try to take a full spread newspaper add and shrink it to the side of a milk carton, so why would we try to make our giant desktop sized designs fit our cell phones? We shouldn’t. We create a similar but simplified design.
Milk carton first people, otherwise your design might sour before you’re done!