The 411: Responsive Design
Because of recent technological developments (iPad, mobile phones, etc) you’ve probably heard the techie term “responsive design” thrown around. Or perhaps it was a similar term such as “adaptive design”, “fluid layouts”, and “mobile design”. While these terms have slight differences, they all carry the same idea.
Responsive design is an approach to web development in which web sites are built in a “fluid” form allowing the site to provide an optimal viewing experience across a wide range of devices – such as mobile phones, tablets, laptops, and desktops. This is accomplished by converting from absolute “fixed layouts” based on pixels to relative “fluid layouts” based on percentages. To break it down a little more, all this means is that a web site is built in such a way so the site and elements within the site scale down/up and move around depending on the users device.
With the recent surge in tablet and mobile phone usage for web browsing, it is almost essential to have a responsive web site.
Remember how I said “fluid layouts”, “responsive design”, “adaptive design”, and “mobile design” were similar, but not exactly the same? Let me elaborate.
First, let me say that “fixed layouts” are what web designers and developers have been using in the past. Fixed layouts are static and do not scale up or down based on screen size. Fluid layouts, on the other hand, are the future of the web and what we are discussing here. Fluid layouts are percentage based and scale based on the users screen size.
Now we also have “Adapative Design“. Adaptive design is a fluid layout, however, it is designed and programmed for a specific device, say an iPhone 4. Adaptive design is developed to accommodate a specific devices screen size.
“Responsive Design” is most popular among developers because it uses fluid layouts that scale to accomodate a number of devices. Because adaptive design can be costly due to the infinite amount of devices available many sites are using the responsive technique.
If you’re interested in learning about how to create responsive sites I would highly recommend the following tools to get started.
Journey Into Mobile Series from CodeSchool.com
This series is very simple and informational. I particularly liked the fact that they have interactive lessons as you go through the levels. It’s only $25 for a monthly subscription.
Developed by Twitter, Bootstrap is a tool to jump start any responsive design. I encourage you to check it out. Personally, I love it.