Hi all,

Firstly bear with me as my knowledge in web design is very limited (at the moment).

I'm going through some tutorials regarding responsive web design.

And all of them start their coding in mobile version followed by the tablet and desktop versions.

I'm wondering why is this. I know there might be a very logical answer but what is it?

I believe it's best practice and easier to start off developing for mobile then scaling the design accordingly, rather than starting off with a desktop site then trying to cram everything in as you scale down.

It started out this way because IE8 and IE7 didnt get media querys so if you did mobile first then you would get a mobile layout on these older browsers. So it became best practice to build mobile first - remember that then responsive design was very much in it's infancy, the're were a lot of ideas floating around and none had been properly researched in depth. Since then polyfills have been created to allow media querys in legacy IE so now it really doesn't matter if you build mobile first or not.

 

What's important is that you don't think of specific devices like mobile, tablet etc, there's so many grey areas and devices of different screen sizes. You should enure that your UI looks great at all conceiveable screen sizes.

 

I tend to build out my largest screen UI's first then reduce the screen size and adapt the UI accordingly. So I'm not using mobile first yet my UI's look every bit as good on the smallest screens as those designed using mobile first principles. This is not a superior workflow to mobile first, but neither is the opposite true. I do often find though with mobile first designs that the large screen equivalents are lacking and still have elements still in a mobile kind of view, which I dislike - why show a collapsed nav menu on large screens, forcing the user to make an extra click to see the contents? This I feel though is more down to the dev(s) who built the site rather than the principle. I'm happy to work in both ways, but I just find I get slightly better results starting with large screens.

 

There's an argument that you load in less CSS for mobile devices doing mobile first.. While that's true, in almost all cases you are optimising in the wrong place if this is concerning you. On an average project my resulting CSS is around 10-15kb Gzipped. That's the size of a small image. Perhaps if i went mobile first I could shave a KB off. which in the grand shceme of things is nothing - we're talking milliseconds.

You're better off spending time optimising images, serving up smaller versions to small screened devices, lazy load your images.

Edited June 29, 201511 yr by rbrtsmith

What's important is that you don't think of specific devices like mobile, tablet etc, there's so many grey areas and devices of different screen sizes. You should enure that your UI looks great at all conceiveable screen sizes.

 

I tend to build out my largest screen UI's first then reduce the screen size and adapt the UI accordingly. So I'm not using mobile first yet my UI's look every bit as good on the smallest screens as those designed using mobile first principles. This is not a superior workflow to mobile first, but neither is the opposite true. I do often find though with mobile first designs that the large screen equivalents are lacking and still have elements still in a mobile kind of view, which I dislike - why show a collapsed nav menu on large screens, forcing the user to make an extra click to see the contents? This I feel though is more down to the dev(s) who built the site rather than the principle. I'm happy to work in both ways, but I just find I get slightly better results starting with large screens.

 

That's more likely i'd agree with. There are definitely some issues because every design is different and may require different coding (like you mentioned 'nav').

Correct me if i'm wrong. I think the desktop version is harder as compared to mobile ones because there's a lot going with floats, relative/absolute positions and margins, paddings etc.

Once I have the desktop version ready, then it's only a matter of clearing floats and minor adjustments. And that seem easier to me.

There's a lot more to do than that, but yeah in principle yeah. Do whatever you feel most comfortable with. It's the end result that matters.

Warning this might get a little bookish

 

Besides from not having to load a lot of CSS on a small device I also think the mobile first method is a result of a prevailing mental model among developers.

I'm thinking of the whole progressive enhancement vs. graceful degradation debate.

Through the last few years PE has been the preferred solution to support decices with different properties/specs.

 

If you think about it mobil first is a typical example on what PE is. You are developing for the minimal specs (eg. a screen resolution of 320x480) and enhancing from that.

And you can keep enhancing the product by adding new media queries if some new super resolution screens becomes standard in the future.

 

Likewise Desktop first is an example of graceful degradation where you develop to the highest device resolution first and "degrade" from that standard.

 

As I said progressive enhancement has been the prevailing method for some time and I think it affects the way we think when we are developing.

Edited June 29, 201511 yr by Nillervision

I've always built responsive sites desktop first, but I'm well aware of the mobile first approach. Personally, I choose to prioritise content in the early stages, even before mock-ups, then I design with the focus of including the same content on both. The end result is identical, with no content being hidden for the sake of having to. That's one benefit of being heavily involved, if not the main designer on a lot of our projects. I know how the document will behave, and can chime in if something's just not achievable across devices. I know a lot of developers haven't got design experience, which is fine, it just means you need to spend more time working with your designer.

Warning this might get a little bookish

 

Besides from not having to load a lot of CSS on a small device I also think the mobile first method is a result of a prevailing mental model among developers.

I'm thinking of the whole progressive enhancement vs. graceful degradation debate.

Through the last few years PE has been the preferred solution to support decices with different properties/specs.

 

If you think about it mobil first is a typical example on what PE is. You are developing for the minimal specs (eg. a screen resolution of 320x480) and enhancing from that.

And you can keep enhancing the product by adding new media queries if some new super resolution screens becomes standard in the future.

 

Likewise Desktop first is an example of graceful degradation where you develop to the highest device resolution first and "degrade" from that standard.

 

As I said progressive enhancement has been the prevailing method for some time and I think it affects the way we think when we are developing.

 

If you're writing modular CSS the difference in filesize is not a lot, it's minescule. In terms of extra CSS properties to handle: Todays modern devices can parse tens of thousands of rules faster than you can blink, this isn't the place you want to be spending time optimising, it's a mostly wasted effort, same goes for CSS DOM lookups, unless you're doing something dreadfully wrong like hundreds of * selectors there won't be any human noticeable difference.

 

First we optimise our images. Next one of the biggest bottlenecks is our JS, things like undelegated click handlers, DOM repaints, memory leaks etc, although this has nothing to do with Mobile/Desktop first.

 

I get your thoughts about PE. But if you're building in a standards compliant manner then going desktop first won't be an issue, you just have to be aware of everything you design and build that it will scale down gracefully. Maybe for a less experienced developer it might be a bit easier to build mobile first - but then those will also have to scale up gracefully, I've seen many examples that do not.

 

There are fantastic examples built with both schools of thought, and many bad ones too. I cannot say one is better than the other. It's what you are most comfortable using. There are far more important things that will influence a projects outcome. Deciding between desktop and mobile first isn't one of them.

Edited June 29, 201511 yr by rbrtsmith

I've always built responsive sites desktop first, but I'm well aware of the mobile first approach. Personally, I choose to prioritise content in the early stages, even before mock-ups, then I design with the focus of including the same content on both. The end result is identical, with no content being hidden for the sake of having to. That's one benefit of being heavily involved, if not the main designer on a lot of our projects. I know how the document will behave, and can chime in if something's just not achievable across devices. I know a lot of developers haven't got design experience, which is fine, it just means you need to spend more time working with your designer.

 

Content first has been shown to be a very good way of developing. I'm trying to push our agency in this direction, but it can be hard with slow clients..

 

If you're writing modular CSS the difference in filesize is not a lot, it's minescule. In terms of extra CSS properties to handle: Todays modern devices can parse tens of thousands of rules faster than you can blink, this isn't the place you want to be spending time optimising, it's a mostly wasted effort, same goes for CSS DOM lookups, unless you're doing something dreadfully wrong like hundreds of * selectors there won't be any human noticeable difference.

 

First we optimise our images. Next one of the biggest bottlenecks is our JS, things like undelegated click handlers, DOM repaints, memory leaks etc, although this has nothing to do with Mobile/Desktop first.

 

I get your thoughts about PE. But if you're building in a standards compliant manner then going desktop first won't be an issue, you just have to be aware of everything you design and build that it will scale down gracefully. Maybe for a less experienced developer it might be a bit easier to build mobile first - but then those will also have to scale up gracefully, I've seen many examples that do not.

 

There are fantastic examples built with both schools of thought, and many bad ones too. I cannot say one is better than the other. It's what you are most comfortable using. There are far more important things that will influence a projects outcome. Deciding between desktop and mobile first isn't one of them.

I'm not saying that mobile first necessarily is the better approach. I'm just trying to explain why I think it has becomed the most dominant. As I said I think the whole mindset of PE has a big influence on that.

I'm pretty sure it was because there was originally no polyfil on old IE for media querys so it was easier to just serve them the mobile view and it then just became best practice. Then media query polyfils came in and removed. Old bet practices tend to stick.

 

Were seeing it now with React.js many saying that it's bad because we're not separating concerns.. issue being they are not actually looking at why that was a best practice in the first place. What was a best practice 5 years ago might not be best practice now as things change

Edited June 29, 201511 yr by rbrtsmith

Old bet practices tend to stick.

Exactly my point. This is why I'm talking about mental models. If you have followed a certain school/direction/practice for some time it affects how you perceive things and you rarely question it from "rational" criteria because it has becomed a part of how you think

Exactly my point. This is why I'm talking about mental models. If you have followed a certain school/direction/practice for some time it affects how you perceive things and you rarely question it from "rational" criteria because it has becomed a part of how you think

'

Agreed, I think us developers as a whole can do better to keep open minds, it seems throughout the history of programming it is developers stuck in their ways that has held back innovation the most, and killed off many potentially great languages and ideas as a result.

Edited June 29, 201511 yr by rbrtsmith

'

Agreed, I think us developers as a whole can do better to keep open minds, it seems throughout the history of programming it is developers stuck in their ways that has held back innovation the most, and killed off many potentially great languages and ideas as a result.

 

Facebook are one of the best at that. React and React Native are good examples. They tend to solve problems using the best method they can, even if it goes against traditional conventions.

Have you seen the article on CSS-Tricks? https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/ looking at the comments it seems folk are really upset and almost offended at the idea. I get the impression some of them are feeling vulnerable that their skills in CSS might be shortlived if it all goes into JS.. and because their more designers they don't wanna learn JS.. Well unfortunately for them front-end development is going down the road of needing to know JS. They should either move with the times and learn, or just stick to design. IMO - afterall we're building software here.

 

Things change and we must continue to learn and embrace new things, maybe actually educate ourselves in it before we rubbish the idea.

 

In the case of React it won't remove the need for CSS, it just allows us to tightly couple certain CSS rules to react components, that is all. It's also designed and build by far more experienced devs than us or those commenting on CSS-Tricks so we should take time to learn it before we form judgemental opinions. Clearly many of the commentors on CSS Tricks don't understand the first thing about React, but are happy to attack it.

 

We all need to see new innovations with a more open mind and don't see standards as everlasting gospel, they change over time, just like everything else.

Edited June 29, 201511 yr by rbrtsmith

^ I started a topic some months ago with a similar debate It can be found here:

Blasphemous thoughts on embedding?

 

Except I was talking about including styles in PHP applications but it's the same debate. One of my points is that when we build web applications today we often only have a single view page which makes the idea about reusable styles over multiple pages redundant. The remaining issue is the caching thing though.

^ I started a topic some months ago with a similar debate It can be found here:

Blasphemous thoughts on embedding?

 

Except I was talking about including styles in PHP applications but it's the same debate. One of my points is that when we build web applications today we often only have a single view page which makes the idea about reusable styles over multiple pages redundant. The remaining issue is the caching thing though.

 

That's my thought's too. Even for multiple views, if you are calling in the same components it's really not an issue if they have inline styles. What matters is that where we author any styling it should be DRY. Does not matter one ioda if ithe compiled source or what is sent to the browser is dry.

 

People say it looks a bit ugly. I say pragmatism trumps code style every time.

Edited June 30, 201511 yr by rbrtsmith

Have taken this post down and my sincere apologies.

Edited June 30, 201511 yr by alexjames212

All Google or any search engine cares or should care about is to crawl sites that are made for humans not search engines. The trend for people to shop on the go has spiked tremendously over the past couple of years. This is why responsive mobile websites are given priority. Lately, i wrote a blog on this topic, feel free to find it here: Top 3 Things that you are Missing out When your Site is Not Mobile Responsive and let me know your thoughts.

 

Thanks,

 

This topic has nothing to do with SEO or whether or not to use responsive design. We're talking about mobile first vs desktop first.

 

This topic has nothing to do with SEO or whether or not to use responsive design. We're talking about mobile first vs desktop first.

Hey sorry for jumping in and dropping a link, my bad, did not read the title properly and i really appreciate your gesture.

 

Thanks,

No problem, thanks for sharing your post. Maybe you should create a new topic if you are wanting to discuss the benefits of responsive design

Thank you for your suggestion rbrtsmith. Ill consider doing it with my upcoming blog post.

Maybe some people will disagree with me on this one but I don't believe it will make much difference which one you do first. The end result should be that you website works great for both desktop and mobile sized view ports. Whether you start with a mobile mockup and expand it for desktop or whether you start with desktop mockup and shrink it down to work on small screens it should net you the same result.

Edited July 9, 201511 yr by Lyndsey
fixed typos

Maybe some people will disagree with me on this one but I don't believe it will make much difference which one you do first. The end result should be that you website works great for both desktop and mobile sized view ports. Whether you start with a mobile mockup and compress it for mobile or whether you start with desktop mockup and shrink it down to work on small screens should net you the same result.

 

 

I agree.

Mobile first approach is the best approach because you are basically making it look good on a small screen then you widen that screen a little. If something looks bad at that screen then change it and keep going until it looks fine in all widths. using min-width with css media queries will help you out, if you want to follow this approach.

Mobile first approach is the best approach because you are basically making it look good on a small screen then you widen that screen a little. If something looks bad at that screen then change it and keep going until it looks fine in all widths. using min-width with css media queries will help you out, if you want to follow this approach.

 

It's not the best approach. There isn't a best approach. My mobile UIs are pretty good and I don't do mobile first. There's plenty of other very talented developers who also don't.

Maybe some people will disagree with me on this one but I don't believe it will make much difference which one you do first. The end result should be that you website works great for both desktop and mobile sized view ports. Whether you start with a mobile mockup and compress expand it for mobile the desktop or whether you start with desktop mockup and shrink it down to work on small screens it should net you the same result.

Whoops, made a mistake. A mod can edit this if they wish.

Maybe some people will disagree with me on this one but I don't believe it will make much difference which one you do first. The end result should be that you website works great for both desktop and mobile sized view ports. Whether you start with a mobile mockup and expand it for desktop or whether you start with desktop mockup and shrink it down to work on small screens it should net you the same result.

 

I agree.

 

I guess mobile first approach teaches us that we should only be adding in content that is necessary, but as long as you have that in mind when designing, it doesn't matter which screen size you start with. KISS - Keep it simple stupid. I try to remember this, always!

The reason why we usually start developing the mobile version when we are taking responsiveness into consideration is because it is easier to make adjustments from smaller screen going to tablet and other bigger screen resolution. What is important though is that you should already have a design to use to avoid any difficulty in the future.

I think the idea of starting mobile first is to remind web designers not to neglect mobile devices, at least that's how I think of it.

I think the idea of starting mobile first is to remind web designers not to neglect mobile devices, at least that's how I think of it.

 

That can in some cases be very true. One thing I often see on forums is,

 

'I need to create a heavily cut down version of my site for mobile devices'.

 

'How heavily cut down?'

 

'Well just a couple of sentences and a button to view the desktop site'.

 

'That will be an awful experience for mobile users'.

 

'Oh, it's only to keep Google happy'.

 

That can in some cases be very true. One thing I often see on forums is,

 

'I need to create a heavily cut down version of my site for mobile devices'.

 

'How heavily cut down?'

 

'Well just a couple of sentences and a button to view the desktop site'.

 

'That will be an awful experience for mobile users'.

 

'Oh, it's only to keep Google happy'.

 

 

Yeah that's a dreaful approach to take, might keep Google happy but it won't keep the ever increasing % of mobile users happy.

Google penalizing non responsive website was the final push to force the web to be more accessible for mobile users. If we hesitate and keep designing for desktops, users will continue to use their browsers less and less and stick to apps. I think 'webapps' are the way to go for web designers, if we want to stay relevant. Sites which work hand in hand with social media - so people can post links to their blogs etc and flow naturally between apps like Facebook and the web.

 

I am sick of clicking a link to website that you can't use on your phone. "Top 10" whatever articles that you struggle to navigate. When I am on my phone I am becoming less and less likely to click links to websites because they are always a bad experience, and I'm including the responsive sites in this - littered with ads and graphics etc that my S4 can't handle (it's due for upgrade but lots of people aren't on the latest devices). These websites are doing the web industry a disservice, making the web seem like one giant spammy piece of sh*t. My mum doesn't even know when she's in an app compared to being on the usual web, but she knows not to click those links without risking crashing Facebook.

 

Keeping Google happy is not the approach to take. Keep your users happy and in turn Google will reward you.

I'll also add we should be targeting mobile and desktop as different entities, where does mobile end, where does desktop start? what comes in between. In short we should design for every concievable screen size, even those that do not exist. You also have to think about touch, mouse and keyboard interractions - your site should be easy to navigate and look great using any medium.