Mobile-first responsive webdesign


– The way new websites are made

As a webdesigner, if you haven’t yet heard of mobile-first and responsive webdesign, I’m guessing you are either very, very, very busy with client work or you have been locked in a basement for about a year because these words are being used everywhere I look. But I do know some webdesigner have not yet looked into it and that most of our clients still do not know what it is or how it’ll benefit their users.

So what the hell is it?

Well lets split this up. Mobile-first is a new way of thinking about your website. As the name implies you start by thinking through the experience you want your mobile visitors to have and then work your way up to a desktop version. Now this is a good thing because it forces you to decide what content is most important right from the start. And then you can load in additional content for users on a desktop or maybe even a tablet. Is Mobile-first the right approach? Not always, no. Can you get a result as good without doing it this way? Yes. But it is one way of thinking about webdesign and it can help you make the hard decisions early on, in the design process. If you want to learn more about all of this go lookup progressive enhancement and graceful degradation on google.

Responsive webdesign is more a technical word used for websites that changes with the width of the device and the browser, this is the way to do it as their are so many mobile devices and browsers that its hard to make rules for them individually. When your website is responsive your design just scales to look it’s best at any width. This is done by shrinking the layout until it breaks and then breaking it up into a new layout, often called a breakpoint, and then you repeat that process.

It’s more work

Make no mistake, making a mobile-first website is more work – you have to think about your many . It’s not easy and it’s a new way of thinking. You will, as a webdesigner, get out of your comfort zone. And because this is a new style of webdesign, you will not be able to solve all of your problems with a simple google search. Things like scaling video is not at all easy and you will be met with constraints from day 1. But you will get a good mobile website, whether that’s worth it, is up to you.

Things to consider

  • Scaling images and video is a challenge. But there are some solutions out there to make the best of it.
  • Think about what content is most important on your website and only load that content for the smallest screensizes.
  • The days of delivering a psd file to a programmer and leaving him to it, is over. Your designs will not be fixed and looking the same everywhere any more.
  • Don’t use hover, it’s broken on touch devices.
  • Rethinking your menu will be a big part of your mobile challenge. Dropdown menus is not a viable option, even though it can be made to work.

Hopefully these notes will help you get a more smooth transaction to responsive website, whether they choose a mobile first approach or not.