Responsive Design: Crafting an Experience for Everyone

The phrase “responsive web design” is still somewhat of a buzzword when it comes to building web sites. However, responsive web design is not a feature that you add on to your web site to make it mobile-friendly. Responsive design is just how you build web sites in a multi-device world. The question of “should we go responsive” shouldn’t even be a question because the answer is always “yes,” and that’s why the new MVC version of the Multifront ecommerce platform includes an example storefront that was built from beginning to end using responsive techniques.

Responsive design is not a feature.

The obvious advantage to responsive web design its ability to display well on devices of varying size, from phones to tablet to desktops. Of course, there are thousands of different devices out there in the wild – even in your office – and it’s impossible to account for them all…and you’re not supposed to.

The big difference with responsive design over how sites have been designed in the past is that you cannot worry about tiny details. The term “pixel perfect” is no longer valid when it comes to web design. You’re shooting for “usable” when it comes to a responsively designed web site, but that doesn’t have to mean boring or generic. It just means that you can’t worry about the positioning of an element between two different Android phones. It’s not going to look the same and it’s not intended to. Ultimately the design needs to be usable and communicate clearly, so the extra whitespace that appears on the big phone and not the small phone is not a concern, bug or problem.

Separating your concerns

Depending on where you sit in the development chain, the fact that responsive design relies on a single code base could be a good thing or a bad. I favor the former because managing two separate code bases for the same product is just more trouble than it’s worth. Before too long you’ll find one version is way out of sync with the other, giving your customers a very inconsistent experience between devices. You may also find yourself with two different products going in opposite directions, and that’s not going to help anyone.

Using the same code base for every experience doesn’t mean you can’t selectively load data, it just means you handle it all up front rather than having the server sniff a browser and do a bunch of domain switching and project loading. And when we’re talking about an online store, there’s probably little reason to have different markup for different devices. When going responsive you design and build once, but that means you have to consider every part while you work.

A tailored experience

The one aspect of responsive design that makes a huge impact on the user experience is that it requires you to think about the design and usability of your site on many devices. But since you’re considering device sizes from the beginning, you can be confident that the content on your site will be treated properly regardless of screen size. You’ll find yourself with a much better web site in the end when you build this way, but there are some trade-offs.

The need to consider different sizes does require more design effort from your staff but it’s to the tune of weeks, not months or years. There is little-to-no extra overhead when building a responsive site compared to a non-responsive or separate code base sites. Plus, the work flow for responsive design is going to get better and more efficient as we all adopt it as the correct way to build a web site. Don’t avoid design discussions and decisions. Embrace them for what they are – a chance to make your web site and your product better for everyone.

Designing for performance

Last but not least, the one thing you can’t skimp on when talking about building responsively is site performance. It’s no secret that a web site needs to be as fast a possible, and responsive doesn’t change that. But going responsive does mean you have to consider the performance for every page, every view and every interaction because you don’t know if the customer is on their phone standing in line at the grocery store, or if they’re on their couch watching television.

Performance needs to be part of the design process, not an afterthought or optimization routine applied when you’re all done. Think about the size of files, images and consider every plug-in and add-on you’re thinking about using. The question should always be asking is, can we do without this?

If anything, building and designing responsively is about whittling away the things you don’t need until you get to the true needs of your customers. Once you get there you’ll find you have a great experience for everyone regardless what type of device they’re using.


How to Best Design an Ecommerce Website for Your Business

Recently, hibu – our parent company – put together some great information on how to effectively setup and build your ecommerce solution. What’s often overlooked during the creation process of an ecommerce website is the sales process. It’s important to take into account all stages of the sales cycle when building and designing your ecommerce solution.

Below are seven suggestions hibu touched on to help make the process easy your customers in the process and improve your businesses chances of success:

  • Storefront: Build a storefront that best displays what products you have on offer to your target market. Ready-made storefronts are available online (as are complete eCommerce packages).
  • Shopping cart: The shopping cart must make it straightforward and easy for customers to pay, with clear information on taxes, packing and transport costs. It should offer a printable receipt option, and send automatic confirmation to the buyer.
  • Online payments: Your customers are likely to want to pay with a debit or credit card. There are a number of ways to arrange this ñ the most popular being opening a merchant account with your bank/credit card company, or using an online payment processor such as Paypal.
  • Fulfilment: For physical goods, you will need to organise delivery packaging and transport yourself, or use a company that provides these services for you. If your business sells products which are downloadable over the internet, secure software and password protection may be necessary.
  • Inventory management: Make sure you never overstock, or run out of a product leaving your company unable to fulfil orders. Inventory software can help you keep on top of your stock levels.
  • After-sales support: Make sure you continue to serve your customers after they have made a purchase by providing ongoing product support. This will enhance your reputation as a company and encourage repeat business.
  • Promotion and marketing: Get the word out. You can use search engine optimisation, pay-per-click advertising, email newsletters and promotions, social media marketing and other means to help customers find your eCommerce store. 

To learn more about setting up an ecommerce solution for your online business view our Multifront Overview section.