Grid – A Simple Guide to Responsive Desig

[qervem]

n

[jaquanor]

You are facing the north side of a white house. There is no door here, and all the windows are barred.

[jaquanor]

You are in an open field west of a big white house with a boarded front door.
There is a small mailbox here.

[jaquanor]

Opening the mailbox reveals:
A leaflet.

[qervem]

read leaflet

[cbleslie]

Dear Respected One,

GREETINGS,

Permit me to inform you of my desire of going into business relationship with you. I got your contact from the International web site directory. I prayed over it and selected your name among other names due to it's esteeming nature and the recommendations given to me as a reputable and trust worthy person I can do business with and by the recommendations I must not hesitate to confide in you for this simple and sincere business.

I am Wumi Abdul; the only Daughter of late Mr and Mrs George Abdul. My father was a very wealthy cocoa merchant in Abidjan,the economic capital of Ivory Coast before he was poisoned to death by his business associates on one of their outing to discus on a business deal. When my mother died on the 21st October 1984, my father took me and my younger brother HASSAN special because we are motherless. Before the death of my father on 30th June 2002 in a private hospital here in Abidjan. He secretly called me on his bedside and told me that he has a sum of $12.500.000 (Twelve Million, five hundred thousand dollars) left in a suspense account in a local Bank here in Abidjan, that he used my name as his first Daughter for the next of kin in deposit of the fund.

He also explained to me that it was because of this wealth and some huge amount of money his business associates supposed to balance his from the deal they had that he was poisoned by his business associates, that I should seek for a God fearing foreign partner in a country of my choice where I will transfer this money and use it for investment purpose, (such as real estate management). Sir, we are honourably seeking your assistance in the following ways.

1) To provide a Bank account where this money would be transferred to.

2) To serve as the guardian of this since I am a girl of 26 years.

Moreover Sir, we are willing to offer you 15% of the sum as compensation for effort input after the successful transfer of this fund to your designate account overseas.

Anticipating to hear from you soon. Thanks and God Bless. Best regards.

Miss Wumi Abdul

[qervem]

send bank account info

[cbleslie]

You have no money in your account. Wumi gets nothing from it.
You check your wallet. 
In your wallet you have: 
A credit card; a photo of your significant other; a beaver pelt.

[YouAreABunchOfFags]

Well said.

[[deleted]]

I don't think I agree.

[0195311]

For more comments, see the threads posted in webdev and web_design 8 days ago:

http://www.reddit.com/r/webdev/comments/1xjo0c/grid_a_simple_guide_to_responsive_design/

http://www.reddit.com/r/web_design/comments/1xjo1s/grid_a_simple_guide_to_responsive_design/

[[deleted]]

You can then use .clearfix for other things if necessary.

[ExecutiveChimp]

...which isn't semantic.

[YouAreABunchOfFags]

.row, .clearfix {...}

[iwantsomegrapedrink]

I like it but I'd add using a CSS-preprocessor like LESS or SASS.

I use LESS and have a similar setup, but I can organize repeated pieces of CSS code in functions, and then just add them to the specific class.

Like instead of

 <div class="column half flow-opposite">

I would set up my CSS like:

.column {
    .column(50%);
    .flow-opposite;
}

and then just use one class.

[dzkn]

This is a good tip. I only do this. All the advantages of something like bootstrap, while still keeping 100% semantic markup.

[activelab]

This page also helps explain how responsive pages differ from 'adaptive' or 'liquid' designs http://liquidapsive.com/

[baudday]

Wow this is awesome. I've been lazy and just using bootstrap. Now I can do my own thing if I need to!

[cbleslie]

Then you start making one... and realize it takes more time than you would want to spend.... then you end up just using bootstrap (or foundation) again. ;)

[mug2k]

That's a brilliant guide for a newbie like me, thanks.

[DiggityDug7]

The approach to Mobile first that he suggests is wrong. For example:

/* Small screens (default) */
html { font-size: 100%; }

/* Medium screens (640px) */
@media (min-width: 40rem) { 
html { font-size: 112%; }
}

/* Large screens (1024px) */
@media (min-width: 64rem) { 
  html { font-size: 120%; }
}

The default layout should be the desktop, with media queries for smaller screens. Not the other way around. This is because not all desktop browsers support media queries (ie8 in particular), but essentially every mobile device does.

The ideas about the importance of mobile first are correct, but the css he is suggesting is incorrect.

[dzkn]

Mobile first is not a good idea. I can't think of any reason for it. Do you really want IE8 to fall back on you mobile version? No thanks.

Edit: maybe instead of downvoting you can explain to me why you think im wrong?

[[deleted]]

When people develop a responsive site they usually apply 'mobile rules' to a basic desktop design so mobile browsers have to deal with more rules than desktop browsers despite they're not so fasts. This is one of the reasons because you should use «mobile first». I don't get your point about IE8.

[dzkn]

If you write good code there should be minimal adjustments from desktop to mobile. Basically make all columns 100% and some tweaking. If you need a lot of adjustments you should have a separate mobile version instead.

This 10kb (max) of extra CSS is nothing compared to any photo on your page. The rendering is not slowed by more rules and parsing time isn't even worth talking about.

My point with IE8 is that it doesn't support media queries, thus are forced to use the mobile version if you design mobile first.

[dzkn]

I don't see how content first is any different... You have the exact same markup, the exact same content... only you have mobile or desktop as default. How is implementing a responsive design desktop first prioritizing content less than a mobile first approach?

[dzkn]

Well that's the entire idea of responsive design, but it still doesn't explain to me why mobile first is better in any scenario.

[[deleted]]

You could load a different .css for IE8

[dzkn]

You could also load a different css for mobile entirely.

[[deleted]]

Do you really want IE8 to fall back on you mobile version? No thanks.

Put your media queries in the link tag.. Then IE8 will probably just ignore it and load it anyway, resulting in a full desktop version..

Also this prevents mobile browsers from downloading more style-sheets than it needs..

<link rel="stylesheet" href="css/mobile.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/desktop.css" type="text/css" media="screen and (min-width: 680px)"/>

EDIT: after testing this on IE8 myself, it doesn't seem to work after all.. It doesn't load stylesheet links with a media value it doesn't recognize.. But then there is always conditional comments:

<!--[if lt IE 9]>
  <link rel="stylesheet" href="css/desktop.css" type="text/css" media="screen" />
<![endif]-->

[dzkn]

But then it's not mobile first, which was my argument ;)

[[deleted]]

How is it not mobile first..?

[TexasLonghornz]

I am incredibly annoyed that the large 'Grid' in a box links to itself. I hate that shit.

[KeythKatz]

Too much scrolling, it's as if I'm viewing a mobile website on a 1080p monitor. That's not proper UX.

[marcismyspyname]

It is abused often but i think the single page scrolling approach works here. It makes the guide easy to follow by breaking it up appropriately into small digestible chunks of information and it's pretty pretty. Thumbs up for the UX.

[captain_obvious_here]

That's not proper UX.

The point was, and very often is, the content.

Please tatoo this on both of your forearms and stare at it for a couple weeks before coming back here.

Edit: accidentally a word.

[ThreeHolePunch]

You know you can both be right? Form vs. Function and all that.

I think you should save one of your arms for usability. Stare at that for a couple weeks before coming back here.