Not long ago, websites were typically designed for laptop and desktop screen resolutions. This worked fine until the advent of web capable smart phones and tablets. Responsive Web Design is becoming more and more popular due to the rise of mobile internet usage, in fact it’s now becoming less of a trend and more of a best practice.
Web designers approached the new challenge with a myriad of solutions, the clear winner, however, was Ethan Marcotte’s seminal article on Responsive Web Design back in May of 2010. Responsive web design has changed a lot since then.
What is Responsive Web Design?
For all that’s changed, a lot has stayed the same. The basic principles of responsive web design that Ethan wrote in his article are just as relevant as ever.
Responsive Web Design is a way of designing web pages to be displayed in respect to the size of the device it is being displayed upon. If you resize your browser window, you’ll see the different design elements on screen resize and reposition themselves.
Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
There are countless web capable devices available and there are new form factors every day, so it would be impossible to target every screen individually. This is where “fluid layouts” come in.
Fluid Layout
Fluid layouts let your website respond to its environment and adapt fluidly.
“Empty your mind, be formless, shapeless — like water. Now you put water in a cup, it becomes the cup; You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend.”
– Bruce Lee
Fluid layout involves three main principles that come together to form the whole that is responsive design. They are:
- Fluid Grids
- Fluid Images
- Media Queries
Fluid Grids
Since the beginning, websites have been defined in terms of pixels. This concept was carried over from the print industry, where printed material was always going to be the same fixed size. For better or worse, this is not how websites and digital media are displayed. A website might appear in a large format like on a television, or on a very small screen like a smartphone (or even a smartwatch). For this reason, responsive websites are built with relative units like percentages, rather than fixed units like pixels.
Fluid Images
There have been many advances in responsive images, but the core idea is that images should be able to shrink within the confines of a fluid grid. This can be done very simply with a single line of CSS code:
img { max-width: 100%; }
This code tells the browser that any images should only ever be as large as their pixel value, which will ensure that the image is never stretched or pixelated. However, if they’re nested inside a parent container that’s smaller than their pixel value, then the image should shrink.
Media Queries
If you take a two column layout and try to shrink it down to a mobile phone, it’s a bit challenging. Typically, smartphones are used in portrait mode, meaning that the screen is taller than it is wide. This lends itself to websites that scroll vertically, but it’s not good for wide layouts with several columns. That’s where media queries come in. Media queries are a CSS technology that have been available in browsers for several years now, and they’re a core component of responsive design. Media queries apply different CSS rules when specific conditions are met. For example, when a website is displayed on a large screen it may use three columns, but the same website when viewed on a small / mobile screen would show only one column at a time.
Responsive Website Design: Things to Consider
- Time & Money
- Older Browsers
- Performance
- Content
- Website vs. Web App
- Design/Development Process
Responsive Tools and Frameworks
- Webflow: Free responsive website builder. webflow.com
- Bootstrap from Twitter, Simple, fluid HTML/CSS/JS framework https://getbootstrap.com/
- Foundation: Flexible 6 and 12-grid framework https://foundation.zurb.com/
- Skeleton: Minimal responsive framework https://www.getskeleton.com/
One Site for Every Screen
Responsive design isn’t going anywhere soon as it provides a simple (relatively) and cheap way for businesses to build a fully-functional cross platform, mobile friendly website. However, responsive web design does come with some issues if not implemented properly, the biggest of which being performance. It is therefore of high importance to find a professional web design company to get the best results.
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
– Jeffrey Veen
If you have any responsive links or thoughts that you think are essential for web designers and developers to know about, please share in the comments!
