Ecommerce responsive design
Responsive design can be extremely important in reaching your customers at home and on the go, here are a few things to consider before you start.
Modal Windows
Modal or Popup windows are possible in responsive design. However, not all browsers or devices are capable of this functionality or it tends to be clunky and awkward depending on the content you wish to show.
When creating concepts try to bear in mind how the customer will interact with your site using a device. The most common gestures are scroll, swipe, tap and pinch.
With that in mind, why not think out of the box and consider an alternative solution. For example accordions, windows which swipe down or they can just tap to open a new window. Ask yourself, is a popup window essential to the users experience because if not it will comprise a successful responsive solution.
However, to achieve these solutions we tend to use a lot of javascript, which can seriously slow down your site. Try only loading javascript on pages where its needed. Would it be possible with CSS3 or if your using Magento, does prototype already do this.
Desktop Pixel Perfect
Back in the day (about 5 years ago) when I created my first website I was obsessed with the grid and achieving pixel perfection from photoshop to desktop. Spending hours testing in older browsers (which shall not be named) and making sure the design and fonts aligned perfectly.
Nowadays, I’m ‚Äòslowly’ learning to accept desktop perfection cannot be achieved and it shouldn’t be a priority. Browser and devices, especially IE just don’t tend to play nicely. Not all the devices and browser default values are the same such as margins, padding, text size, font face. And with so many screen sizes which grid do you work to?
I’m happy as long as the user experience isn’t effected and they can still navigate successfully around the website and add a product to basket. I work to best endeavours, and I’m ok if IE is missing a rounded corner or firefox line height isn’t quite right.
Is it not more important to achieve a high performing and speedy site by utilising best practices and the latest technology? The more I can achieve with CSS3 & HTML5 the better I say!
No No to Big Images!
Be careful not to include lots of high resolution images. Only try to use relevant images and make sure to save them for web. Applications like Image Optim and Smush.it will optimise your images for you to reduce page load.
Also, why not load different images for the browser and devices. This way you reduce load time and also get to design mobile specific images.
Icomoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts. You can also import your own svg to make custom font icons. Vector icons are scalable and reduce page load, removing the use of lots of sprites as a variable. Remember to use icons that your customer will recognise!
Category List SEO Description
Past eCommerce design lends to overlapping your category list SEO description above category images.
To achieve this it requires absolute positioning, which requires a specific height to be set. Applying a specific height though in responsive design is not best practice and especially if not all categories require an image.
Responsive design should be clean and uncomplicated without the need for lots of jQuery or hacks to fix issues like dynamic height. Is it crucial that our SEO description is above our products? Isn’t it best practice for our products to be seen without the customer needing to scroll through lots of text and images?
A nice looking category page is achievable without a prominent flashy image or text. Remove unnecessary variables and let your product images stand. Possibly, the solution is to utilise a custom category landing page instead to promo.
Simple Navigation
Not all site maps have been created with responsive design in mind. Keep your menu structure well organised and compliment it with a clean looking design.
Your most popular and sought-after categories should be in the top level with possible sub categories as a drop down. Try not to over face the customer. Instead, allow the customer to navigate easily through your shop.
The hamburger is not yet fully understood, so depending on your demographic, don’t fully rely on it for mobile design.
Try to use navigation solutions which are consistent with other top sites your customer might visit. These will be familiar and you can assure yourself that they are well tested.
Conclusion
Responsive design is still very new and you can guarantee a new technology or idea will be out next month or next year.
To fully understand what works best for you and your customer make sure to do your research, work with the right people and maybe try a little A/B testing. I recommend trying optimizely.com.
If you have any questions, a disagreement, tips or tricks please share in the comments below.
I recently saw a great presentation on #RWD by @Bobbyshaw, check it out here.
