We’ve been experiencing an exponential growth of technology within the last five years. All new devices that come into play need to be Internet ready; bringing along a lot of different screen resolutions. In the field of web design and development, we’re unable to keep up with that pace. Everything suggets the in 2015 the most common platform used for eCommerce will be Mobile. If we’re not ready we could risk losing visitors to our sites.
One way to solve this could be to develop specific applications for each device. We could just hire companies to develop specific applications for today’s most used platforms (iOS and Android). But what about tomorrow? What about Windows’ mobile users? I know that some people may think Blackberry is out of the equation, but how about their high management company users? Consider this: is your site fully viewable on a iPad? What happens when the user changes from landscape to portrait mode? and what if you go to a Samsung Galaxy phone?
Working on the web, is a constant change. Our work is often refined or replaced within a year or two. We need to adapt to survive!
Smashing Magazine: “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.”
Wikipedia:“Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels) , to adapt the layout to the viewing environment, and probably also use flexible images”
With the mix of flexible grids and layouts, flexible images and a strong knowledge of CSS media queries, your site could adapt to viewport modifications. That’s Responsive.
Being a huge fan of grid system, I don’t hesitate to adopt a fluid grid system to achieve the responsive look. They all use variations on their CSS definition to achieve the look. Some use percentages others use pixels. Get to know them and choose wisely.
Once you have adopted your grid system it’s time to get it working on Magento. This will be a quick introductory on how to do it. Let’s assume that we’re using Magento Enterprise and that we are working with skeleton grid system.
Upload your grid system to the /skin/frontend/enterprise/[template] folder
Include your new CSS file on the /app//design/frontend/[template]/layout/local.xml
If you’re interested in responsive web design, adaptive web design or progressive enhancement (or if you’ve not heard of them), a good way to start will be to read about it. Here’s a quick list of reading material for you:
I think that the constant changes in the Internet is meant to keep us web designers and developers entertained. We need to keep ourselves up to date with new technologies. In the end it’s all about making the best recommendation to our clients based on their requirements. Every client is an unique case. Keep yourself informed on the latest and future trends. When it comes to decisions such as building an application or moving forward to responsive, make the best suggestion based on your client’s expectation and budget.
Hector Rodriguez is a Web Designer & Developer at Demac Media who has a passion for sports, specially Triathlons. You can find out more about him on Twitter!