Just a place for some incoherent note taking about responsive design.
Design elements to address
- Font-size and leading
- White space
- Vertical space
- Flow
- Page element ordering
- Image and media size
3-, 2- and 1-column layouts
Media Queries
Old school was to set breakpoints at device sizes:
- Mobile (portrait): <=320px
- Mobile (landscape): <=480px
- Tablet (portrait): <=768px
- Tablet (landscape): <1024
- Desktop: >=1024
New school thought is to design on readability. Best readability is 45-75 characters (about 10 words) per single-column line.
Mobile First
But don’t depend on these breakpoints. Design for mobile first, then add a breakpoint to modify your design when the mobile version no longer looks good. Continue in this vein all the way up to desktop.
Smaller screens call for smaller fonts.
Don’t Forget Larger Monitors
Televisions? Billboards?
Set a maximum width to avoid having the text go all the way to the border:
#container {
margin: 0 auto;
max-width: 18000px; /* A really big width */
}Common Device Breakpoints
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
Sources:
- “Defining Breakpoints.” www.responsivedesign.is. accessed 14/08/08.
- van Gemert, Vasilis. “Logical Breakpoints for Your Responsive Design.” Smashing Magazine. 13/03/01.
- Knight, Richard. “Design Responsive Websites in the Browser with Webflow.” Smashing Magazine. 14/08/05.
