CODEWITHSUNDEEP
cssresponsive-designmedia-queries
vitto
vitto

Reputation: 19466

What's the difference between mobile first and non mobile first responsive layout?

Well, I'm not sure I got the difference between mobile first and non mobile first responsive layout?

This is what I know, and probably something is not right:

  1. Use Media queries with CSS (also for non mobile first layout)
  2. Create a layout by starting from mobile and not from desktop version

I've saw there's a difference between bootstrap setting and foundation setting, is it important for that difference?

<!-- Bootstrap -->
<!-- I've read it's not mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Foundation -->
<!-- I've read it's mobile first -->
<meta name="viewport" content="width=device-width">

At the end that's all I know, is there something more to know about it?
Where i can find a good guide?

Upvotes: 1

Views: 3694

Answers (3)

H Ketabi
H Ketabi

Reputation: 3144

With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an as-neeeded basis to platforms that can handle them well.

enter image description here

Look at: http://www.slideshare.net/splashomnimedia/desktopfirst-vs-mobilefirst-web-design

Upvotes: 1

Anmol Saraf
Anmol Saraf

Reputation: 15743

Article here provides important details.

What is mobile first?

Mobile first, from a coding perspective, means that your base style is typically a single-column, fully-fluid layout. You use @media (min-width: whatever) to add a grid-based layout on top of that.

The alternative – desktop first – involves starting with a wide, grid-based layout, and using @media (max-width: whatever) to scale down to a single-column layout.

Why mobile first?

iPhone and Android browsers are quite capable, but older smart phones, feature phones and other small-screen devices like gaming consoles may not support media queries.

Imagine trying to read tiny text in a big screen layout on an old, underpowered feature phone.

Mobile first web design extends progressive enhancement to site layout, allowing you to serve simple, readable content to all devices, and layer on structure and presentation for more capable devices.

An example of Mobile First from the latest Dreamweaver 6 Fluid Layout is as below -

/* Mobile Layout: 480px and below. NOTE: No Media Query line here*/

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.*/
/* NOTE: Now from here media query lines are added for Tablets and Desktop */

@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
}

Hope it helps.

EDIT: Another article here which explains above example with a little more details. Excerpt as below -

Progressive Queries

Since some older mobile devices may not support media queries at all, bottling up the small version of your CSS rules inside a query may keep it from recognizing what CSS it can render within it. Instead of this, it may be a good idea to have the smaller version be the "default", while adding in the additional CSS rules for larger screens via media queries (since desktop browsers are more likely to recognize the media queries).

Supporting IE and older browsers

Upvotes: 2

Xarcell
Xarcell

Reputation: 2011

Just as it says....

"mobile first" and "non-mobile first" layout.

Mobile first means from the start, it is made to look how you want it to look in mobile. Then in most cases you then use min-width media query to adjust according to larger screen sizes.

Non-Mobile first means you design it for desktop or large screens first. Then in most cases using max-width media query to go back and make it look better in smaller/mobile screens.

I hear there are problems with browser's understanding min-device-width and max-device-width. Just use min-width and max-width.

If your designing a responsive theme, it is best to start mobile first.

Watch This Video: http://www.youtube.com/watch?v=-BVmrSG93XE

Upvotes: 4

Related Questions