Simple Responsive Website Design Template

HTML & CSS
1

I am trying to create a very simple RWD Template. I have searched and unable to find the most suitable max and min widths which will be ideal for the plethora of current screen sizes.

Online Demo
with source
I must learn how use Fiddle :frowning:

Has anyone managed to find suitable values that satisfy the latest screens?

Update CSS fragment:

/* RED DEFAULT */ .mainRwd {background-color:#fbb; ;}
.mainRwd:before {content: "DEFAULT: width: 88em;"; } 
h1 {color:red;}

/* BLUE  Tablet */ @media screen and (max-width: 60em){
  .mainRwd {background-color:#cff;}
  .mainRwd:before {content: "Tablet: max-width: 60em;"; } 
  h1 {color:#00f;}
} 

/* GREEN Mobile */ @media (max-width: 52em){
  .mainRwd {background-color:#bfb;}
  .mainRwd:before {content: "Mobile: max-width: 52em;"; } 
  h1 {color: #0a0;}
}
2

Are you using a framework like Foundation or Bootstrap?

http://foundation.zurb.com/templates.html

3

I am not a fan of frameworks, far too bloated and usually difficult to modify to suit particular requirements.

Edit:
I just downloaded their simplest framework and the CSS file is 6,093 lines and 189.i Kb, also requires Modenizr. No thanks :frowning:

4

Stop chasing your tail and forget about specific devices. The only breakpoints you need are the one that your design needs. Nothing else matters.

Don’t design for specific devices at all.

The problem with all frameworks is that they set arbitrary breakpoints that have nothing to do with the design in hand and assume that devices haven’t changed (they have - there are thousands of them now all at different widths).

All you need do is create a fluid layout and then when your design looks awkward or doesn’t fit then throw in a media query and make it look better. With a few well chosen media queries (and loads of dragging the browser window open and close) you will automatically cater for all devices.

I follow this concept on all sites I do these days and it works well (even with new devices appearing all the time).

3 Likes
5

I was looking at this article @RyanReese wrote recently this morning - http://www.sitepoint.com/media-queries-width-vs-device-width/ and that pointed at this from Foundation - http://foundation.zurb.com/docs/media-queries.html - as a simple media query baseline , that seems about as simple as you can get.

6

It’s pretty accurate but by no means should it be a one-size-fits-all. If the media queries don’t match where specific elements are breaking, then you need to actually make new ones. ALthough you really shouldn’t need more than a few media queries if your page is truly fluid. If you have as many media query rules as you do regular CSS, then you almost definitely screwed up big time.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.