Nine great tips for a responsive website layout.
Posted on
A responsive design is a website layout that has been formatted to function on all devices regardless of type or screen resolution such as cell phones, tablets, and computers. Currently, 80% of the internet traffic originates from a mobile device, thus a responsive layout is considered to be an important aspect of any website.
Below are nine great tips that should be considered when implementing a responsive design.
When possible, it is always a good idea to avoid using JavaScript for structuring your website. Understandably, this may not be avoidable with elements such as rotating slideshows or mobile friendly menus. In these cases, it is important to incorporate a fall back with CSS, such as assigning an element with an active class in CSS using javascript to hide it. This is essentially true with mobile menus. If a web bot or user's browser doesn't support JavaScript, you do not want to deny the user the ability to browse your website.
Another issue that comes into play is processing power and page loading. Unlike computers, mobile devices do not have the processing power needed to render large JavaScript files effectively resulting in slow page loading time. By cutting down what JavaScript dependencies are required by a mobile device, you are cutting down page loading times and allowing the user to browse your website more efficiently.
-
Mobile First
A responsive design should be structured to a accommodate mobile devices first. What this means is that CSS specifics for smaller devices should be omitted from all media queries. This helps break down the processing power for a mobile device and allows backward compatibility or a safe fallback for older browsers that do not support media queries, such as Internet Explorer 8 and below.
-
Box Model
In the current W3C box model, the relationship between width and padding can be a nightmare for responsive layouts. In the standard box model, an element's actual width is equal to the defined width plus the padding. For instance, if an element has a defined width of 100em and has a padding of 5em, the actual width of the element is equal to 110em.
Fortunately, there is a fix for this. Using the CSS3 Box-Sizing property, you can change the box model of an element to include its padding inside of its defined width. For example. if an element has a defined width of 100em and a padding of 5em, the usable content area of the element is equal to 90em.
This is done by setting the box-sizing property to border-box. Its recommended that the box-sizing be declared in a global rule so it is applied to every element. Below is an example how to properly set the rule with vendor prefix support to support earlier browser versions.
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }All major computer and mobile browsers such as Google Chrome, Apple Safari, Mozilla Firefox, Opera Browser, and Internet Explorer 8+ support this method.
-
Fluid & Scaled Measurements
Mobile devices and computers alike are being introduced with higher DPI (dots per inch) resolution. These high density, or retina displays are now becoming the standard, which is an exceptional gain, however it creates fuzzyness and demotes the usability of websites that do not make use of new techniques.
When ever possible, it is a good idea to use fluid units of measurements such as percentages, rems, and ems and avoid pixels at all cost.. This allows your content to adapt to the resolution of the viewing device.
When setting a font size, it is best practice to use rems or ems instead of pixels or pts. A responsive design isn't just about if the content fits into the device, but also how it expands when a user zooms in and out. Since ems and rems are adaptive, the the size increases or decreases with the different zoom levels a user or browser may define.
When setting breakpoints, use ems, and remember that unlike an element, the scale is based of 16px / 1em and not the font size outline in the body.
-
Breakpoints
Since the introduction of CSS3 media queries, there has been much talk about how and where to create breakpoints. In today's world, there are thousands of different internet connected devices, each with a different screen resolution. The best strategy is not to create breakpoints based off of a specific measurement or resolution, but rather where content breaks naturally. This allows your web application to easily adapt to the width of all devices without your website looking choppy or broken.
Use min-width instead of max-width in CSS3 media queries. This helps alleviate redefining CSS rules to overwrite ones previously set and allows your rules to gradually increase by adding different rules to the element style as the resolution increases.
.split4 { width: 100%; } @media screen and (min-width: 42em ) { .split4 { width: 50%; } } @media screen and (min-width: 60em ) { .split4 { width: 25%; } } -
Don't Restrict the Viewport
The viewport meta tag is essential to any responsive design. The tag tells a browser what size and scale to render a webpage. With this tag, a developer can restrict user zooming. As a common courtesy, it is best to permit the user ability to zoom in. Below is an example of the view tag that we use here at VIXI Technology.
<meta content="width=device-width, initial-scale=1" name="viewport">This allows the user the ability to zoom in and elarge content without breaking your layout by restricting how far a user can zoom out. Our implementation restricts the max zoom out level to the intial page scale.
-
Avoid Pre-Built Grid Systems
When creating a responsive layout, it is always best to use custom breakpoints and avoid pre-built grid systems.
Different grid systems such as Twitter's Bootstrap have given web developers the ability to create and implement responsive designs easily. With a responsive design, less is more. With this theory in mind, these cover-all frameworks tend to be ineffective because they contain much unwanted overhead which demotes the idea behind a responsive design.
-
Avoid JavaScript Layout Dependencies
-
Absolute Elements
Absolute elements can be a pain, especially with the canvas on a canvas approach that mobile browsers use. Because of this approach, absolute elements have some flaws when being rendered.
One flaw is that elements tend to exceed the width of the document at times. To fix this, make sure that your absolute elements use a fluid width such as a percentage and are properly positioned inside of a relative element.
Another problem you may encounter in Webkit mobile browsers such as Apple Safari and Google Chrome is disappearing elements on scroll. To fix this, we must trick the device by enabling hardware acceleration on that particular element. We do this by setting a transform with an empty value.
#element { -webkit-transform: translate3d(0, 0, 0); } -
Disable Flash & Media
This one should be a no-brainer, but you will be surprised to find out how many people forget. Currently, not all devices have out-of-the-box flash support. This may result in a website that is rendered inoperable.
Be sure to implement a detection solution to hide all flash and media elements on devices that do not furnish support. Modernizr is a great jQuery feature detection library to help you with browser detections.
If you are in need of a custom responsive design, contact us today to find out how we can help implement a solution to meet your needs.