Why Responsive Web Design?

Magento store owners should think about how important it is to have a responsive design as increasingly large numbers of visitors come from mobile devices.
In addition, there are a number of other reasons to have a responsive Magento store. We'll mention some of them:

1. Google prefers the responsive design because it is more efficient when the web site have one URL and the same HTML code regardless of device.
2. Mobile usage is on the rise. Many people shop from their mobile phones while travelling, commuting or sitting down watching TV. I will give a local example from one of our clients: bellow you have a small Google Analytics sample with traffic from tablets and smartphones in September 2014 and September 2015.

sample

3. If the Magento theme is created following best Magento practices and best CSS practices it will be easily to modify in order to follow the latest trends.
4.Responsive designs are adaptable to multiple devices sizes. There are plenty of devices of different sizes and in the future we expect even more. If you get a good responsive template, on most devices your site will look ok. It's recommended to check the theme on new devices from time to time for problems. 
5.It's better for SEO and Online Marketing. Content, email, search or social media marketing will bring you more success if it is applied to a responsive website.
img-articol

We build responsive design for many customers with Magento online shop. I'll briefly describe how I created a responsive design:

1. First I added a view port meta tag, this is the most important component to build multi-device design. This will allow you to see the recommended scale for every device. If you don't do this, you see the desktop version on your mobile device.
<meta name="viewport" content="width=device-width, initial-scale=1">
2. The second step was to download and install Bootstrap. Bootstrap is an open source framework for building responsive design and is built on responsive 12-column grids, layouts and components. You can download bootstrap from here: http://getbootstrap.com/
As an exemple, after you add the bootstrap, if you add the class "img-responsive" to images they will reduce or increase their size depending on the device width.
3. One important thing for responsive design are media queries. With these I can write CSS for devices that have special width. Media queries are composed of two parts:@ media screen and (min-width: 500px). Uses this syntax I write CSS code for devices with width more than 500px.
4. Using the above steps I have created the responsive theme for our Magento store (www.eadesign.ro) and many others (www.colorit.rowww.ateliertulip.ro).
5. The responsive menu is one of the important steps . First I hid the desktop menu and made another responsive menu with javascript. You can find the plugin for responsive mobile menu here:
https://github.com/ComputerWolf/SlickNav
Another step is to hide part of subcategories if there are too many. In order to accomplish this I added a special class.

Comments