2013 will keep the tendencies of 2012 and undoubtedly will become a year of responsive design. You will ask why? Google claims that 90% of Internet users browse web with different devices including mobile phones, lap tops, tablets, etc. As a result nearly 67% of all online shoppers who visit your store use various screen sizes. That is why if you won’t adapt shop design to work correctly with different devices your customers will experience inconveniences and troubles while browsing and buying. Responsive design is a solution that will help you to avoid this problem. That’s why we advise ‘Make Your Store Design Responsive’.
So, what is responsive design? What are the key benefits? And what are the must know tips? In order to answer these questions we will provide you with experts opinion. To start from take a look at great info graphics (click to see full image, it will open in a new window):
From theory to practice. Check our responsive design “to do” list:
Start with a template. Sure, you can start coding from scratch, but there’s a lot of interesting free templates that will make you save a lot of time.
Working with fluid grid based layouts. Fluid layouts are an important part of a good responsive layout. In order to have a website that can adapt to many different screen resolutions, you have to use a fluid layout with widths defined in percents instead of pixels.
To get the size in percents from a size in pixels, you have to take the element’s width and divide it by the full grid size. For example: 200 px (element size) / 960 px (grid size) = 0.2083. Multiply this by 100, and you’ll get 20,83%.
This is why it is interesting to work with a 1000px grid. 1000 is a round number, and it is easy to calculate that 24% of this size will be equal to 240 pixels.
Responsive images. Making the height and the width of the images to auto is best for responsive webpages(% should be used).
Also make sure always using a compressed image. Because images of 5 mb or above are produced when captured from digicams. It will take time to load in mobile Internet. Hence make sure you compress the image before you use it in the website.
jQuery is your friend. jQuery is definitely a super useful tool when it comes to web development. Lots of jQuery plugins can help you to create better responsive websites.
Ensure touch friendliness. If you are using an awesome jQuery slider within your responsive design, it may be a good idea to double check that it is touch friendly. After all, having to mash around for little nav points on a slideshow is never fun. Engage your customers by integrating touch friendly elements.
Don’t forget Apple’s viewport. The tag was introduced by Apple for their mobile devices (iPhones, iPads and iPods Touch). This tag allow you to specify the default size of a page when viewed with an iPhone or iPad.
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>
The code above will ensure that upon opening, your layout will be displayed properly at 1:1 scale. No zooming will be applied.
Get testing. Does your site look great on the desktop, and pretty rad on your iPhone? Congratulations! However, take a look at the other screen sizes just in case. Not only can new electronics be cool, but they are also useful for testing!
P.S.: Even though a responsive design will definitely improve your store visitors shopping experience and conversion it is not a nostrum. You also need to consider a lot of other factors (product and inventory management, SEO and marketing, shipping and payment options, etc.). Especially important thing is a shopping cart software that you will choose to power a store. Cart2Cart automated migration service supports more than 45 platforms and allows you to switch from one cart to another easily and securely. So, you may be sure that your business is powered by the most suitable solution.
Contact Us for Magento Design, Development or Maintenance
Source –http://www.shopping-cart-migration.com/blog/61-must-know-tips/6360-make-your-store-design-responsive
Cart2Cart is an online shopping cart migration service designed for straightforward and secure data migration from your current shopping cart to a desirable one. It allows to move store data automatically in only a few hours.
Contact Cart2Cart for eCommerce Data Migration
