I am currently working on sites all the time and struggle every time with using the Media Queries and what screen sizes i should actually accommodate for all being my hope.
I have been using bootstrap in the past but want to move into making my own framework but really am struggling with the how many Queries to create as when you slide the screen in you always find something that could be refined.
At current i really only create for apple products as they are the devices i use on a daily basics and can test for easily. But would really like to accommodate for all users.
I don't want three versions. That really seems like a waste of time if i upload a blog i have to do it to 3 different databases. I really think that Media Quires are a much better option.
Don't accomodate screen sizes, use fairly fluid grids and base your breakpoints on when things get too wide/narrow.
Example (this uses "desktop first" which isn't optimal, but it makes for a decent example on how to think):
Let's say you have the fairly standard layout with a main content and a sidebar. Set it so that they fill up a percentage of the container, and then slowly make the screen more narrow. Once things are too narrow to be readable/usable, rearrange it however you want.
Breakpoint 1: Content and sidebar (divided into two parts for this example) ("desktop variant")
breakpoint 2: content with the sidebars side-by-side below it
Breakpoint 3: Content with the sidebars under it
This is obviously simplifying things, but it's one of the ways I work. Don't worry too much about it being perfect at specific breakpoints, but rather be usable at a sliding scale. I'd suggest keeping the breakpoints at least 100px (about-ish) apart, and the fewer you need to implement to make the design look good on a sliding scale, the better.
One good measurement to work from is the width of the line, at least when you're working with a lot of text. That tends to be the biggest marker I use.
Hey Guys,
I am currently working on sites all the time and struggle every time with using the Media Queries and what screen sizes i should actually accommodate for all being my hope.
I have been using bootstrap in the past but want to move into making my own framework but really am struggling with the how many Queries to create as when you slide the screen in you always find something that could be refined.
At current i really only create for apple products as they are the devices i use on a daily basics and can test for easily. But would really like to accommodate for all users.
Any tips or tricks that you use would be great.
Thanks
A very classic approach is to consider 3 versions of your site:
I don't want three versions. That really seems like a waste of time if i upload a blog i have to do it to 3 different databases. I really think that Media Quires are a much better option.
... Of course I am talking about Media Queries.
Don't accomodate screen sizes, use fairly fluid grids and base your breakpoints on when things get too wide/narrow.
Example (this uses "desktop first" which isn't optimal, but it makes for a decent example on how to think):
Let's say you have the fairly standard layout with a main content and a sidebar. Set it so that they fill up a percentage of the container, and then slowly make the screen more narrow. Once things are too narrow to be readable/usable, rearrange it however you want.
Breakpoint 1: Content and sidebar (divided into two parts for this example) ("desktop variant")
breakpoint 2: content with the sidebars side-by-side below it
Breakpoint 3: Content with the sidebars under it
This is obviously simplifying things, but it's one of the ways I work. Don't worry too much about it being perfect at specific breakpoints, but rather be usable at a sliding scale. I'd suggest keeping the breakpoints at least 100px (about-ish) apart, and the fewer you need to implement to make the design look good on a sliding scale, the better.
oh sorry versions to me is separate sites.
So what media Queries would you run with so many tablet sizes and so many smart phone dimensions.
Thanks Melindrea.
I will keep this in mind on my next project. Now my question seems stupid thanks for a good reply.
I tend to like using the Golden Grid System as a good base.
One good measurement to work from is the width of the line, at least when you're working with a lot of text. That tends to be the biggest marker I use.