CODEWITHSUNDEEP
cssmobileresponsive-designmedia-queries
Eric
Eric

Reputation: 2034

What will load first with responsive design?

I've just finished reading yiibu's slideshow on their responsive site development for nokia, and one of the larger points of it seems to be to focus on mobile first, then desktops and other larger and faster platforms. ( http://www.slideshare.net/yiibu/pragmatic-responsive-design ) Not just in the planning phase, but literally develop your responsive design in the sense that the innitial styles, with no media queries applied, will be the design for your smallest platform, with the lowest capabilities. (older phones, depending on your audience) Which is backwards from what I've innitially thought to do (and from what I've seen, what others usually do as well).

The rationale was that this method would prevent people on mobile devices with lower bandwidth from downloading additional scripts and large images, by innitially downloading only the scripts and images needed for the minimum device, then loading more, and more, depending on the size and predicted capabilities of the device, eventually putting the most burden on the largest devices (laptops and desktop computers). --- This being contrary to what I've been doing, which is designing for the desktop, then adding media queries to optimize for mobile devices.

My question is, do I need to design for mobile first, then add media queries to optimize for larger devices with more capabilities in order to prevent the burden of downloading large images that wont be used on mobile devices?

.....Or can I just use sepparate stylesheets and call to a mobile stylesheet before calling to a stylesheet focused on larger browsers/devices?

Upvotes: 0

Views: 111

Answers (1)

Marco Berrocal
Marco Berrocal

Reputation: 362

The order of who you call first or not, shouldn't matter. The media queries by themselves are a bunch of if-else based on the criteria you place in them (device, orientation, width, etc). So by adding them first or last won't mean that a mobile phone will consider a style sheet for a desktop browser (example).

What you should do though, is to have the base stuff that is consistent across ALL devices (such as typography, font-sizes, background colors of elements, text color) on a base stylesheet that is readable to all devices.

This makes the actual reading of the file smaller as a specific stylesheet will be made for margins, paddings and widths depending on the actual size of the screen.

Last but not least, as to whether you should design the experience for mobile first or not, it's up to you, your way of working and what not. I know I don't. I design for desktop first and work my way down. I much prefer this.

Upvotes: 1

Related Questions