We’re excited to reveal the new face of Building Keystones. After intensive research, design and testing, this post officially launches our enhanced site.
Naturally, this week we’re talking about responsive design and how to design your website for mobile users. Feel free to adjust your browser size while you read this article to see some of the design principles we talk about in effect.
Mobile users are increasing and ecommerce professionals must adapt their websites for these visitors.
Responsive design may be a relatively new trend in web design, but it is being touted by technology giants like Google as the new industry standard. Because of the recent increase in the number of different screen sizes used to access the Internet, a website’s content and functionality may work fine on a full sized monitor but can be quite a burden when accessed from a mobile device. Companies are forced to choose between either responsive design or building separate mobile sites to handle this challenge.
What is responsive design?
Responsive design utilizes web design principles to create a single website whose content is served different ways to different screen sizes.
For example, given a smaller screen like one found on a smartphone or tablet, a responsive site will use media queries and defined percentages in the CSS to reorganize the site’s content and present it in a more streamlined fashion.
A media query measures the width of a browser window, aka the viewport. As the screen resizes, the browser reports a different width and height for the monitor. Depending on the width and height, the CSS applies different sets of styles to the page.
For example, if user’s browser is more than 1200 pixels, then the CSS applies X width to the site and Y positioning for all its elements and containers. As the browser size shrinks, a different set of styles are applied which overwrites the original style.
When the viewport hits media query 1 the site shrinks and content and containers begin to reorganize.
When the viewport hits media query 2 it shrinks even further and some containers (like sidebars and footers) are turned off. And when media query 3 is reached, the style sheet arranges to display content suitable to a mobile device like a phone.
One site or two? Responsive design vs mobile site / native app
One way to tackle the challenges posed to websites from mobile users is to build separate mobile sites or apps. However, the best practice among designers certainly seems to lean toward responsive design because it saves them from developing and maintaining two separate HTML files and style sheets. It also helps SEO along the way.
By offering one site for all devices, online businesses can save time and money when it comes to updating and making changes to their site’s content.
But is using the same markup for every screen size definitively the better way to build websites? There is a passionate debate surrounding that question.
Critics of responsive design point to potential hazards online businesses may encounter. While responsiveness certainly streamlines coding and displays only the most necessary content on smaller screens, all the content that is being hidden is actually still present and loading. This issue can potentially affect a site’s load time to the point where a user feels inconvenienced.
Mobile design and ecommerce
It’s best to keep the transition to your website and shopping cart as seamless as possible. Therefore, if your website features a separate mobile site, your checkout process should be created according to that same model. If your site is responsive, and your analytics indicate that mobile users are attempting to use your checkout process, make sure your carts are responsive as well.
For example, Walmart veers away from responsive design and instead presents mobile users with the option to download a native app or use a separate mobile site. Because they have a complex site with hundreds of millions of pages users may potentially access, Walmart chose to strip away a significant amount of content in favor of a leaner site that is easier to navigate and faster load for mobile users. For the mobile user, Walmart’s mobile site and mobile checkout process transition seamlessly.
Salesforce on the other hand is a good example of a company that utilizes responsive design without building a separate app or mobile site. Whether I access their site on my desktop or phone, I am looking at the same site served by the same HTML and CSS files although my experience is different depending on which device I use. As mentioned previously, this type of responsive site eases the challenges surrounding how the content and code of the site is maintained and updated.
In the end, it’s not a matter of responsive design being better than a separate mobile site; its really a question of what kind of site do you have and how are your visitors using that site.
Regardless of which strategy you choose to implement, you’ll have to sacrifice certain elements and hide them from displaying on the smaller screens typically associated with a mobile device.
Analytics and testing
Choosing a design strategy based on analytics makes sure your site meets the needs of all your visitors. It enhances the user experience of your site and is a good way of facilitating any kind of conversion.
Use your site analytics to inform your design strategy as well as which links and other elements to retain when a user shrinks their screen size.
Additionally, part of having a versatile or responsive site means having a site that can load correctly onto outdated browsers. Part of your analytics research should focus on which legacy browsers are found in your traffic streams and then making sure your content can be displayed on those as well.
Ultimately, people choose responsive design for the same reason people design for legacy browsers, which is to be thoroughly prepared for any and all types of visitors.
Keystone
Choosing a mobile site design strategy is not about being trendy or hip. It’s about designing your web content wisely and efficiently in a manner that best suits your audience.
James Mikrut and Kaitlin Krupp contributed to this blog post and site redesign.
Love the article, and really liked how you published it in conjunction with your updated responsive page. Keep up the great work Elan!
Thanks Justin,
It took a coordinated effort and we’re very happy to showcase our skills in this area.
Most importantly, we noticed a growing amount of readers coming in from mobile devices and are excited about supporting their experience in addition to our desktop audience.