Aesthetic, accessible, efficient . . . those are at least three things a good website should be . . .
This week we were given an introduction on responsive web design and its useful implementation in multiple screen devices. As the history goes, when new devices able to access the internet emerged, designers were faced with a need to make websites and content friendlier to said devices. First came the concept of ‘Fluid Design’ as proposed by Ethan Marcotte, who then later proposed ‘Responsive Web Design,’ and this alternative has been in use since.
Responsive web design circles around using media queries and breakpoints as a mean of flexible content design. As a rule of thumb, it is better to create a website to be viewed from the worst resolution (mobile devices) first and build up to a desktop screen size. This technique, called progressive enhancement, results in less code overall and a more efficient design.
With the advent of CSS3, flexible design is easier than before. The key to flexible grids is using percentage values in place of pixel amounts when setting element dimensions in media queries. Additionally, using the ‘min-width/max-width’ & ‘min-height/max-height’ properties sets stopping points to prevent the content from becoming too “crushed” within their parent element. Media queries can also be set to convert 2+ columns of text on a page into a single column for greater readability on a mobile phone.
Also introduced was the property & value ‘box-sizing: border-box’ which changes the box model from its default to another where the content’s width is made up of its content, padding, and border, but its margin remains outside and is not counted in the width.