Total Followers 132,503
Last time, we went over media queries. This is an important aspect to know of Responsive Web Design (RWD from now on) because it is this CSS declaration that allows for the different layouts to appear at different screen sizes.
Hmm, now what about different screen sizes? To make it easy to understand, lets look at this using an analogy. So, imagine that RWD is a blueprint for a wonderfully new house. The foundation, which the rest of the house depends on, would be media queries. After the foundation comes the first level of the house, which sets the tone for how the rest of the house will be built. In this house, the first floor would be break points.
Break points in RWD are browser widths that have a media query declaration to change the layout once the browser is within the declared range. Take for example, the recent media query tutorial published. In this tutorial, Michael has the page changing from its base 960px layout once it is being viewed at 768px. The code snippet for doing this is shown below.
@media only screen and (max-width: 768px){
/* CSS Styles */
}
This media query is called once a device with a browser width of 768px or below is viewing this page, creating a break point.
On average, every responsive site will have a minimum of two break points. These being for tablets and mobile devices. Unlike the desktop, tablet and mobile are based on the screen sizes of the iPhone and iPad because they are the most popular devices in both mobile and tablet devices. Whether or not this is a best practice is a conversation for later. Below, you’ll find the code snippets for these standard breakpoints.
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
This is good enough for most responsive websites today, however there are always instances when a little more detail in how your layout changes is necessary. For instance, creating breakpoints for devices when they are in landscape and portrait orientation.
@media only screen and (max-device-width : 320px) {
/* Styles */
}
@media only screen and (min-device-width : 321px) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
It is well documented, in code namely, that no two websites are built the same. With that in mind, it only makes sense that no two responsive websites should be able to successfully satisfy its responsive needs by using the standard breakpoints. Therefore, it is important to figure out where and when inside the range of the standard breakpoints does your build need some extra attention.
Creating a custom breakpoint is very straightforward and only requires a familiarity with media queries to create. However, there are a lot of ways it can be done wrong and create unnecessary breaks. For instance, let’s say that a website looked a little off at 355px. So to fix this a developer would do something like the code snippet below.
@media only screen and (max-device-width : 355px){
/* Styles */
}
The problem with this snippet above is that while it is correcting the issue for viewing devices at 355px, it is also creating other issues now for devices that are lower than 355px. A proper way of doing this would have been to find the range in which this visual issue is occurring and to specify an orientation. So let’s just imagine that the proper range would be 340px and 355px, and this is a portrait viewing mode issue. The code for that would like like what is shown below.
@media only screen and (min-device-width : 340px) and (max-device-width : 355px) and (orientation : portrait) {
/* Styles */
}
Imagine this very typical situation. A newly responsive website looks great at all the major screen dimensions of popular devices, but there are a few hiccups. The hiccups being that the layout looks out of whack at some browser widths in the 400px area. Since this is not a popular screen width the creative behind the build decided to just let it be. Was this a good decision? No!
The purpose of RWD is to create a best possible future proof solution in possible browser screen dimensions. To accomplish this, the viewing devices of today should not be a determining factor of how a responsive site is suppose to break, or have a higher priority in the long run. The widths of devices today are best described as benchmarks, or starting points. What should be done here is put an emphasis on the layout of the page, and what browser width does the layout start looking bad?
Since the release of the great responsive frameworks now available, learning and instantly applying RWD has been greatly simplified. However, like with any starter code, only rookies take the code done by another and completely wrap their project(s) around it. Being able to ensure that the responsive site(s) that you’re going to be doing look good at any possible viewing resolution, not just the standards, shows a higher understanding. This perceived higher understanding will translate into a better view of your services in the eyes of clients, and will give you more leverage in initial talks.
Extensions like Resize Window for Chrome are great for doing things like this because as you shrink your browser, the current dimensions are shown in the bottom right corner.
This is where you’re going to find the inconsistencies in appearance. In this step, with an extension like Resize Window, you’re going to need to spend some time looking at your site at every pixel width to see where it starts to look funny and document it. This could take a while.
Simply put your findings into a call similar to the ones listed above, and there you go.
Get The Only Freelancer crash course you will ever need to read!
Jamal is a young freelance web designer, web developer, writer, and blogger based in Atlanta, Ga. His work can be found at his online identity Five Alarm Interactive(FAI). He is a college student and philosophical poet by day, and passionate professional by night. You can keep up with him on Twitter @5alarmint.
Monday, October 15th, 2012 04:42
Good article. Using min-device-width and max-device-width will make the browser tools you mention later useless though.
Wednesday, October 24th, 2012 11:46
Good catch djwd. I touched in this in my previous article on media queries. Its a good read, so you should find it to be interesting.
Wednesday, October 10th, 2012 21:11
Definitely a nice site, but Ralf got it right by saying that your images does get distorted. But aside from that, I’m totally loving it.
Monday, October 8th, 2012 17:43
Thank you for a great and informative article! Responsive themes are very useful with the wide range of screen sizes today. It is important to make sure your website looks great no matter what browser or screen resolution.
Monday, October 8th, 2012 11:00
Great article about break points and RWD. I learned some new techniques to use in the future.
Monday, October 8th, 2012 06:04
Great Article and very detailed.
The min-width property is definetly a must in the css file, so that the site design can fit on every screen sizes.
Sunday, October 7th, 2012 07:58
Thanks for your helpful article, Jamal. With the popularity of tablets and mobile devices, this information will certainly come in handy.
Thanks again and have a great day1
Sunday, October 7th, 2012 00:16
This is a great article, Jamal. I’ve been messing with.responsive design myself, and have just recently implemented the technique on my own blog.
Monday, October 8th, 2012 07:16
Your Site looks nice, but your images get distorted. You should fix this. Try something like:
img {
max-width: 100%;
width: auto\9;
height: auto !important;
-ms-interpolation-mode: bicubic;
}
Wednesday, October 24th, 2012 11:48
Hey Casey,
In my viewing, I don’t see how your site is responsive. Maybe you’ve made some changes that take that aspect of it away at my time of viewing?
Saturday, October 6th, 2012 23:34
Media Queries should cover a range of resolutions. Your “Standard Breakpoints” have a gap, what happens when a device between 480px and 768px goes in your site? it will show the full site, probably broken; so I suggest for “Standard Breakpoints” this:
/*Mobile*/
@media only screen and (max-device-width : 767px) /*All from 0 to 767px*/ {
/* Styles */
}
/*Tablets*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
Sunday, October 7th, 2012 11:50
Hi Roberto,
Thanks for the comment. Your statement is correct. However, as the title of the first breakpoint suggests it is for Mobile devices only. The area between 480 and 767 isn’t focused on entirely enough for the most part in RWD in my opinion, creating somewhat of a forgotten zone so to speak. So instead of including that line, but referring to it as the first code snippet, it goes along with my ending section of the article.
Thanks for the comment again :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Brianna Deleasa
Monday, October 8th, 2012 17:43
Thank you for a great and informative article! Responsive themes are very useful with the wide range of screen sizes today. It is important to make sure your website looks great no matter what browser or screen resolution.
Anonymous
Monday, October 8th, 2012 06:04
Great Article and very detailed.
The min-width property is definetly a must in the css file, so that the site design can fit on every screen sizes.
Veruca
Sunday, October 7th, 2012 07:58
Thanks for your helpful article, Jamal. With the popularity of tablets and mobile devices, this information will certainly come in handy.
Thanks again and have a great day1
Casey Dennison
Sunday, October 7th, 2012 00:16
This is a great article, Jamal. I’ve been messing with.responsive design myself, and have just recently implemented the technique on my own blog.
Jamal
Wednesday, October 24th, 2012 11:48
Hey Casey,
In my viewing, I don’t see how your site is responsive. Maybe you’ve made some changes that take that aspect of it away at my time of viewing?
Ralf
Monday, October 8th, 2012 07:16
Your Site looks nice, but your images get distorted. You should fix this. Try something like:
img {
max-width: 100%;
width: auto\9;
height: auto !important;
-ms-interpolation-mode: bicubic;
}
Jamal
Wednesday, October 24th, 2012 11:49
Good catch Ralf!
Kelvin Newton
Wednesday, October 10th, 2012 21:11
Definitely a nice site, but Ralf got it right by saying that your images does get distorted. But aside from that, I’m totally loving it.
djwd
Monday, October 15th, 2012 04:42
Good article. Using min-device-width and max-device-width will make the browser tools you mention later useless though.
Jamal
Wednesday, October 24th, 2012 11:46
Good catch djwd. I touched in this in my previous article on media queries. Its a good read, so you should find it to be interesting.
Muksid Ratul
Monday, October 8th, 2012 03:06
Great information’s. I really liked it.
dave
Monday, October 8th, 2012 11:00
Great article about break points and RWD. I learned some new techniques to use in the future.
Roberto Alanis
Saturday, October 6th, 2012 23:34
Media Queries should cover a range of resolutions. Your “Standard Breakpoints” have a gap, what happens when a device between 480px and 768px goes in your site? it will show the full site, probably broken; so I suggest for “Standard Breakpoints” this:
/*Mobile*/
@media only screen and (max-device-width : 767px) /*All from 0 to 767px*/ {
/* Styles */
}
/*Tablets*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
Jamal
Sunday, October 7th, 2012 11:50
Hi Roberto,
Thanks for the comment. Your statement is correct. However, as the title of the first breakpoint suggests it is for Mobile devices only. The area between 480 and 767 isn’t focused on entirely enough for the most part in RWD in my opinion, creating somewhat of a forgotten zone so to speak. So instead of including that line, but referring to it as the first code snippet, it goes along with my ending section of the article.
Thanks for the comment again :)