desigining website for mobile/small screens

[unwashed potato!]

i'm trying to make my new site responsive some what to different browser sizes, in particular mobile browsers so that they have a clearer, simpler design.

has anyone any suggestions as to what sort of widths i should look to focus on for instance, my site at max width is 1150px, and i'd like to say change the design slightly for those 1150-900, then 900 - 700, then anything less has the max width set at say 320px, but perhaps is that a bit too small. i've looked online and the viewport for mobile varies from 320 to 480 from what i can see.

any suggestions what the brackets should be?

 

[Hutchy]

Would it be too late to suggest the use of a framework in the building of your new site?

The reason I ask is, popular frameworks such as Bootstrap and Foundation are built for such a responsive task and make it very straight forward to consider different viewport sizes.

If not, bootstrap defines it's viewports as:

Large: 1200px upwards
Medium: 992px+
Small: 768px+
Extra Small: Less than 768px

It's assumed that anything below 768px you "go mobile".

 

[unwashed potato!]

thanks for the reply. it would be too late yes but i'll consider a framework for next time.

those are the dimensions i've kind of gone with for now so will stick to that. thanks.

edit:

updated the site.

what do people think? there's still loads to do but anything anyone notices that seems out of place?

http://www.mayergroup.co.uk/

 

[Black Dynamite]

Just had a quick look, still a few issues with size between mobile and PC (ie tablet).

Problem for me seems to be with the container class where you have set a fixed pixel width.

I'm being picky but it means I can scroll horizontally on a tablet screen apart from that looks good mate

 

[touch]

Looks like you've got your media queries the wrong way around. This, for example:

@media screen and (max-width: 680px) and (min-width: 480px)
.container {
width: 640px;
}

Targets screen sizes between 480px and 680px wide. When you set the width of the container in here to 640px, it's only going to fit on screen sizes between 640-680px wide, others will need to scroll.
You would usually want to limit the width of the page to the minimum size of the screen which that query targets. So, you'd set the container to 480px wide in this query. It has auto margins so it will sit nicely in the centre if the screen is larger than 480 but there wont be any screen sizes where the page is wider than the device and causes a horizontal scroll.

In most cases, I would usually only use a max-width value for targeting screen sizes. So it looks like this:

@media only screen and (max-width : 1024px) { 
//stuff
}
@media only screen and (max-width : 980px) { 
//stuff
}
@media only screen and (max-width : 800px) {
//stuff
}

This lets you cascade styles down as anything you put in these blocks targets all screen sizes below. For example, it you have css to change your main menu from a horizontal display to a drop down in the "max-width:980px" block, that will also apply to all screen sizes smaller than 980, so you dont need to repeat that code in any other blocks.

 

[ClubFoot]

^ I use the above method. Never have any problems.