- Webknit
- WON
- Base
I can’t believe it has finally clicked. People have been telling me “mobile first” is the way to go with RWD (Responsive web design). I must admit I completely ignored them but now I think I understand it. I’m going to try to explain it here.
Firstly it’s important to say that although I am normally right, I may not be right here. It’s a matter of personal preference. Everyone has different ways of doing things. I will, however, try and give a fair summary of Mobile first with both pros and cons for you to make your own decision.
Traditionally every web designer has approached the desktop side of any project first, of course they have, desktop is prehistoric whereas mobile is new born baby in comparison. Once mobile came onto the scene it was thought logical/practical to make desktop first and then work DOWN to mobile.
Over the past few years this Mobile First approach has taken the industry by storm and although I have heard everyone ranting on about it I couldn’t for the life of me understand what on earth they were talking about. Where is the logic of making the mobile version first? Even just thinking of it now, I think I may have gone insane just taking about this approach, but the main reason for this post is so that I can read it when I get confused and reassure myself I’ve made a logical choice.
Firstly the mobile market is HUGE. I think everyone knows that. I’m not going to go into the facts and figures of this, just stand where lots of people are and look around. You will see mobiles, lots of them.
Yes this old chestnut.
Graceful degradation means to create and serve the best experience possible and and then account for each possible degradation and ensure that site remains functional throughout. As regards mobile web design this means that the full website would include everything and then content would be removed etc as the viewport gets smaller and the system simpler (For example a flash video could be removed on mobile and replaced with an image).
Progressive enhancement is a little different. This means you put your best stuff forward on mobile to the best of its ability and then as the viewport gets wider the site is enhanced for larger platforms with fewer constraints.
I can write what those two mean off by heart after having to learn them at university but I still don’t really understand the difference (Who cares as long as the client is happy with everything?).
Graceful degradation means that I will make my desktop version amazing, making use of all that screen size and technology and then cut bits out and change things to get it looking right on mobile. The mobile version will just be “something you did after the main bit”. It may sometimes look great but chances are that it will just feel more like an afterthought rather than a polished site.
With progressive enhancement I get my mobile version looking spanking and then I continue to improve my website on desktop. I’m not hiding anything and I’m not watering anything down, I’m just deciding how to enhance it and make it more robust.
There is a little bit more to it though. If we design for desktop first then we are making images, text and videos for the desktop version. What usually happens is things are hidden from the mobile view. There are two problems with this. Firstly why on earth are you hiding something that you want people to see? And secondly the content will get downloaded whether it’s hidden or not resulting in longer loading times for something the user won’t even see.
Design for mobile first, get it looking smart and loading fast and then load any other stuff you require after. Simple.
First of all your stylesheets should be separate. Imagine the example below being one massive stylesheet and you are loading on a 768px screen . Its going to load the whole page when you only really want half.
@media only screen and (min-width: 320px) {
LOADS OF CSS
}
@media only screen and (min-width: 768px) {
LOADS OF CSS
}
Do I have to say why this is crap? Get them split up and defined in your <head> like below.
<link rel="stylesheet" href="320.css" media="only screen and (min-width: 320px)"> <link rel="stylesheet" href=" 768.css" media="only screen and (min-width: 768px)">
Going mobile first isn’t easy. It’s difficult and takes time to learn, but so did learning to code and that was worth it yeah? I’m fairly confident that the benefits of coding mobile first outweigh the challenges.
Most responsive websites I see have max-width media queries setting elements to display:block, float:none, max-width:100%, etc… as the viewport gets narrower.
For most elements developers are applying the above styles to; divs, headers, footers and sections. These are the default styles for these elements. So by starting mobile first, you never have to write these styles. You only have to apply styles to the elements that need to change from their default style as the viewport gets wider. With this approach, your code will be smaller overall and therefore, faster.
The important thing to remember is that you base CSS styles are for MOBILE. That is the one thing I couldn’t get my head around. Your mobile styles go in the base.css files as do all your default styles. You then add extra styles as the viewport gets BIGGER.
The biggest problem that is apparent to me is how to design for mobile first. That seems much more difficult than coding mobile first! But I don’t know too much about that as I’ve not tried and I tend to design on screen!
After writing all that I am honestly struggling to think of reasons why I shouldn’t do it this way? Yeah, it’s hard, it wasn’t fun changing my process but now that I understand I’m better off. RWD gives me more options not less. I should be embracing my mobile users not just thinking of what they will see after I’ve done my desktop.
It is, however, very frustrating starting with a smaller screen and fewer resources and is probably the main reason why some people won’t get involved.
I think the reasons for mobile first speak for themselves. The cons seem to be more personal. But what have you got to lose by trying it (besides from the fact its standard procedure for most decent RWDers). If you’re a bit worried about learning new skills and trying new methods then you probably aren’t a good web designer anyway.
I’ve updated my Base template and made it mobile first. Get it downloaded and have a look. Once it clicks you will never look back.
Honest.
Thanks for for helping me see the light and assisting me with my queries on Base.