Responsive CSS design - large or small screen to start

Question

I plan to design a web app with Phonegap. As I need to deal with different screen sizes, I will have to work with responsive design and CSS3 media queries.

I have a 1080x720 resolution android phone, and I want to start with this (large) resolution, and say the css is base.css. And for smaller screens, I will add something like small.css to overwrite base.css (places where needed).

Assume the css would be complicated, will it incur more workload for small screen phones (whose capability tends to be weaker than large ones)? Is it better to start with small.css as base.css, and overwrite it with big.css on large phones? Or it doesn't matter in web app scenario (as css file size is not a big issue)?

Any design considerations and hints?

Answer 1

I can only agree with @Lisbeth. Start with the bigger design and keep it all in one CSS file. If your jumping between designing wider screens and smaller, you'll easily get confused and the end result will suffer. Make a complete design for big screens and then move on to next size down. This is a mockup that I'm using for most my projects. Just add it to the bottom of your CSS file. A good article that descibes the details

// Code for "regular" computer screens

/*------------------------------------*\
    $SMALL COMPUTER SCREENS
\*------------------------------------*/
 @media all and (max-width: 1034px) {

}

/*------------------------------------*\
    $IPAD AND TABLET
\*------------------------------------*/

@media only screen and (max-width: 767px) {

}

/*------------------------------------*\
    $IPHONE 4S LANDSCAPE
\*------------------------------------*/

@media only screen and (max-width : 480px) {

}

/*------------------------------------*\
    $IHPONE 4S
\*------------------------------------*/

@media only screen and (max-width : 320px) {

}

Answer 2

I usually start with a 1000px width and complete the design first. Then I use media queries for 800px,600px and <400px.

While designing the page decide which elements are to be shrink and which elements to be float-removed. Then apply the appropriate changes in media queries. Instead of using two css, use one (This saves your number of requests). Make small tweaks to fit your small screen devices.

http://css-tricks.com/ have an excellent responsive design. Just note how they are changing the elements.

Or a simple answer, start from bigger width to a lower one !