SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Responsive Design Break-points

4 years 7 months ago - 4 years 7 months ago #110173 by FireFly9
Responsive Design Break-points was created by FireFly9
Does anyone at OST have a good standard for break-points. Every tutorial I've found (this article for example: www.1stwebdesigner.com/overview-of-break...sponsive-web-design/ ) does it a bit different, so I thought I'd ask here.

In Rods video he does it as below, so I'm just wondering if this is now old advice, or what I might use to optimize my approach. [I'm making progress with my learning curve on responsive design, but not smart enough yet to know yet if my site will break down on some devices. Suggestions most welcome. ]

I'm also getting the impression that it better to use ems rather than pixels for text , and % or ems for elements or layout. Do you agree? Found this article on ditching pixels: bradfrost.com/blog/post/7-habits-of-high...ctive-media-queries/

Rod's Media Query.....
/* smaller than an iPhone */
@media screen and (max-width: 478px) {
}
}
/* iPhone Portrait */
@media screen and (max-width: 480px) {
}
}
/* iPads (portrait and landscape)
*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* tablet landscape */
@media screen and (max-width: 768px) {
}
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

/* Suggested pixel widths to consider

320px
480px
600px
768px
900px
1200px


Not sure when to use min-width or max-width.

*/

Please Log in to join the conversation.

4 years 7 months ago #110203 by Valentin
Replied by Valentin on topic Responsive Design Break-points
Hi FF9,

You can define the break points not only in a single way. The common practice suggest going from large screensize (width) into smaller.

Example:
@media (max-width: 1024px){
     // CSS properties here
}
 
@media (max-width: 768px){
     // CSS properties here
}
 
@media (max-width: 480px){
     // CSS properties here
}

use ems rather than pixels for text , and % or ems for elements or layout

I can't agree or disagree. Go for the option that works better for your needs.
In my case I feel more comfortable using pixels for text, percentage for layouts.

There are common width values based on popular screensizes, use those as breakpoints:
  • 1024px
  • 960px
  • 768px
  • 480px
You can create other values, just be sure are correctly ordered.
For example, if you add a breakpoint for 900px screen width, add between 960px and 768px

Let us know if this clarification helps

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 7 months ago - 4 years 7 months ago #110282 by FireFly9
Replied by FireFly9 on topic Responsive Design Break-points
Do you typically use max-width. Most it seems use min-widths if they are only using one or the other, it seems. I am perplexed so far regarding when to use one or the other without causing the screen to fail for certain common devices.

Can you give me a list of the standard min-widths. What about portrait view vs. landscape? Does that generally need to be defined as a rule?

Hopefully the new tutorial will cover this. Has a course been decided on yet? See: www.ostraining.com/support-forum/coding-...-design-video-17852/

Also regarding boiler plates.
I have temporarily opened a dreamweaver CC acct for responsive design. It's not an acct I will maintain though as I'd sooner just use my local dreamweaver CS5, or text editor to code , and I don't want to be held captive by Adobe any more than I have to be lol... DW CC adds a boiler plate. Is a boiler plate needed if doing things a simply as possible using media queries?

Please Log in to join the conversation.

4 years 7 months ago - 4 years 7 months ago #110305 by Valentin
Replied by Valentin on topic Responsive Design Break-points
Hi FF9,

Do you typically use max-width. Most it seems use min-widths if they are only using one or the other, it seems. I am perplexed so far regarding when to use one or the other without causing the screen to fail for certain common devices.

Both are valid options. The most commn is just max-width, but in some cases is required to use min-width and max-width to apply specific CSS to screens that match sizes between two values.

Can you give me a list of the standard min-widths. What about portrait view vs. landscape? Does that generally need to be defined as a rule?

This is a list of the standard media queries to match specific devices / screens: css-tricks.com/snippets/css/media-queries-for-standard-devices/

Using media queries doesn't necessarily means you would require all the standard break-point values in a website; depends on your project and how polished a design needs to be.

Hopefully the new tutorial will cover this. Has a course been decided on yet? See: www.ostraining.com/support-forum/coding-...-design-video-17852/

Sorry for the late. We are still discussing about that.
In the meanwhile we have extra tips in the blog about responsive design that can be helpful:
www.ostraining.com/blog/joomla/custom-responsive-templates/

Is a boiler plate needed if doing things a simply as possible using media queries?

Sorry, I don't use Dreamweaver from long time ago.
May you share more details about how the boilerplate is involved with responsive design, please? I'll do my best to assist you.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 7 months ago #110599 by FireFly9
Replied by FireFly9 on topic Responsive Design Break-points
Re Boilerplate: Copied this from the DW tutorial on Lynda.com

" Boilerplate.css is part of an initiative called HTML5 boilerplate that attempts to level the playing field across browsers and give web designers a solid platform on which to build their sites. Dreamweaver has not only adapted their core CSS, albeit slightly modified, they've also incorporated the recommended conditional comments for handling older versions of Internet Explorer, as you can see at the top of the source file. "

Thus I have included the boiler plate that DW CC created (but in the future this can be linked in from an on-line source. Bootstrap I believe supplies one with their package).

DW uses a 'mobile-first' approach - designing the CSS for phones, and then adjusting the media queries from that point to display the site in the larger views. IE going from say 480 px (default) to the tablet and then laptop, etc. For me this doesn't work so well as I find it more difficult to edit active pages this way (using DW or an editor) so I do it your way going from large (laptop as default) to small (mobile).

I will start a new thread as I need some CSS tricks for the project I have been working on.

Please Log in to join the conversation.

4 years 7 months ago #110656 by Valentin
Replied by Valentin on topic Responsive Design Break-points
Hi FF9,

Re Boilerplate: Copied this from the DW tutorial on Lynda.com

" Boilerplate.css is part of an initiative called HTML5 boilerplate that attempts to level the playing field across browsers and give web designers a solid platform on which to build their sites. Dreamweaver has not only adapted their core CSS, albeit slightly modified, they've also incorporated the recommended conditional comments for handling older versions of Internet Explorer, as you can see at the top of the source file. "

Thus I have included the boiler plate that DW CC created (but in the future this can be linked in from an on-line source. Bootstrap I believe supplies one with their package).

Great! The boilerplate from DW sounds like a good start. I would assume based on your comments is like an alternative to Bootstrap.

DW uses a 'mobile-first' approach - designing the CSS for phones, and then adjusting the media queries from that point to display the site in the larger views. IE going from say 480 px (default) to the tablet and then laptop, etc. For me this doesn't work so well as I find it more difficult to edit active pages this way (using DW or an editor) so I do it your way going from large (laptop as default) to small (mobile).

Agree. I personally design for desktop, then addapt to smaller devices; is the opposite to "mobile-first" approach. Since is more common follow that way, is safer and easier in my opinion.

Unless the site you will create has more visits from mobile, that would give a valid reason to design in the "mobile-first" way.

I will start a new thread as I need some CSS tricks for the project I have been working on.

Sure. If there is anything we can help you with, feel free to post your questions.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!