When building a responsive website should I start from mobile layout or web layout?

[IlyaDaderko]

I was just thinking that while building a responsive website it could be a good idea to start from mobile version and than build up to full web version. So say you start with simple layout and than add to it. Do you think it is a good idea? will it decrease or increase time spent to finish finnal product? What would you prefer?

I just want to hear some ideas ;)

[ToxicFire]

Tbh its an on going question without a definative answer, one way you could think about it is, not to catergorize it as mobile or desktop but a design that scales. Consider what its primarily going to be viewed on though that should affect how you approach your design.

[dstorey]

You will tend to find that mobile devices have more constraint resources than desktop, so it makes sense to feed them the least amount of styles as is required, and lay on the extra bells and whistles on top of that for the more capable devices.

I find it is easier to start from the mobile friendly layout and add to that for the desktop site. That way you are adding things to the design, rather than taking away and trying to squeeze a bigger site into a smaller space. It has the advantage that mobiles only get the rules they need, and the desktop browsers do the added work, rather than the other way around.

I also think the process of adding rather than taking away helps to keep me more honest as a developer and designer. I’m more likely to think “do I really need to add that extra bit of markup or those extra design details, or does it work well the way it is already”.

[Andy Howells]

Can open, WORMS EVERYWHERE.

This is a huge contentious point with responsive web design. Do we serve the basics first and then upscale, or do we serve everything and then downscale?

The best way to determine which will be best is looking at analytics, or looking at projections for device usage.

If mobile will be the predominant usage, then a mobile first approach is definitely worthwhile, that way you’re loading only what is needed for those users.

If desktop is likely to be the most popular then evidently a desktop first approach will be beneficial.

However, the argument should ultimately be irrelevant. Visitors should not be getting different assets** depending on their devices. If you’re stripping out content for mobile, it probably shouldn’t be on desktop either if it isn’t relevant.

The only time my argument is not valid is when it comes to image assets for screen sizes, or for retina, or perhaps visual flair like fonts that require largish downloads. Those are really the only circumstances in which to go mobile first and dis-include the larger more problematic files, or replace them with more lightweight/smaller alternatives.

Case in point, say you have an image background that’s 100Kb that’s supposed to cover a 1000px width and 400px height, obviously Mobile users won’t see the benefit of it, at the very least it won’t fit their screen or make sense to include it. So if you went mobile first you either wouldn’t include it or you’d have an alternative.

[Author]

Posts