posted by Development
As new devices become available and old devices get updated, screen sizes are going to change. It used to be the case (a couple of years ago) that there were just a few sizes (1024x768px, 1280x1024px, 1366x768px). Nowadays, there are hundreds of combinations! Obviously we can't make a different website to fit on every screen size, so what to do?
Responsive design offers a great solution. It allows us to create one website that adjusts to fit perfectly on any size screen – the font size is always readable, everything lays out in a well-organized and easily navigable manner, images always fit perfectly. It doesn't matter if you are using an Android smartphone, an Amazon Kindle Fire or a MacBook Air.
Through the use of fluid grids and adaptive layouts and with the aid of progressive enhancement and a great content strategy, responsive design creates a single website that responds to the user's screen size and device capabilities to make the site look as perfect as possible.
Before We Get Started
Take a look at this simple example of responsive design we created:
responsive.thundertech.com. Resize the window and see what happens (or if you’re on a mobile device, rotate it).
Fluid Grids
A really handy technique to get Web pages to adjust themselves based on screen size is through the use of fluid grids. This allows us to have a page element (such as a column of text) that always maintains a width that is proportional to the width of the browser window.
Say we want a column of text to be 80 percent of the screen width. As the screen gets smaller, the paragraphs will adjust themselves and the words to the right side of a line will jump to the next line. You can do the same thing with images and block elements. In our
responsive.thundertech.com example, you see this happen on a desktop browser when you resize your window. If you are on a mobile device, you’ll notice that the text breaks in different places when you rotate your device but always takes up the full column width.
Adaptive Layouts
So imagine you have two columns of content… if you are using fluid grids, as your window gets smaller, both columns are going to get really skinny. Too skinny. That’s where adaptive layouts come into play. Adaptive layouts allow us to set breakpoints (i.e. if the browser window is fewer than 600 pixels wide, switch to a one-column layout) using CSS media queries. This can dramatically change the layout of the site based on screen size, ensuring that no matter what device the viewer is using, it will always look great!
Note: Some desktop browsers ignore adaptive layouts – specifically Internet Explorer 8 and below, so if you are using IE 7 or 8, you are going to have to take our word for this… just know it is supported in browsers and on devices that need to rely on adaptive layouts for responsive design to work.
If you jump back over to
responsive.thundertech.com, you can see adaptive layouts in action by resizing your browser (again, unless you are using a really old browser). If you make your window really skinny, you will see that the orange boxes in the right column jump below the main column. If you are on a mobile device, you will notice that those boxes are already there. Typically a two-column layout works really well on larger screens, but most users prefer a one-column grid on smaller screens such as smartphones.
Progressive Enhancement
Paired with fluid grids and adaptive layouts are a few other techniques that help round out responsive design. Progressive enhancement, for example, adds efficiency in that it lets more advanced browsers (Chrome, Firefox) use features that aren't available in every browser (ahem, Internet Explorer) to enhance the site (think rounded corners or shadows on text), while still maintaining an enjoyable experience across all browsers.
Of course, there are hacks to get some of these features working in all browsers, but they tend to increase load times and often create bugs for all users.
Content
We tend to think of the mobile user as being en-route, walking down the sidewalk. The notion of "one eye and one thumb" has gone to the wayside. While many users are on the go, there is also a
growing number of users who are making their mobile device their primary internet connection.
The decision to leave out content on mobile isolates this growing population. An effective sitemap and well-organized content can grant users access to important information quickly, while providing all the details to users who want to dig deeper.
Experience
Responsive design is all about the user experience. We can create quick, elegant sites that work really well for all users, regardless of their device, situation, etc. Furthermore, as new devices come to market, with new and unique screen sizes, a responsive site will be prepared to look perfect with little or no updating. The best examples of responsive design are the ones that users don't notice as being responsive.
Future Friendly
Using responsive design techniques, we can create sites that are as future friendly as possible, meaning we can be pretty certain that they’ll play nicely with devices that don't currently exist. This allows you to spend less time worrying about how your website looks on the latest technology and lets you create a more engaging experience for a wider audience.
About the author::
Justin Smith is a
Web and
multimedia developer at thunder::tech. He is also a founding member of the t::t bike club and the proud parent of a basset hound.
TAGS:
Data, responsive design, web, design, responsive, mobile, website, fluid grids, adaptive layouts, progressive enhancement, thundertech, Development
Related Posts
0 Comment(s)
|
There are no comments. Be the first!
|
|