This article will walk you through a couple of things to consider when designing your site so that it looks great even on mobile devices.
If you're using the newest designer, great news: all themes are built to be responsive by default. We've handcrafted these themes to look great on all devices and shouldn't need any extra work by you.
Size Classifications
The majority of our themes make use of the Bootstrap framework which makes it easy to develop mobile-friendly websites and store fronts. The Bootstrap creators have defined device-size specifications that can help your site behave correctly on different screen sizes. The specifications are as follows:
Extra Small Devices (phones): all screens less-than 768 pixels
Small Devices (tablets): all screens greater than 768 pixels (but less than 992 pixels)
Medium Devices (desktops): all devices greater than 992 pixels (but less than 1200)
Large Devices (desktops): all devices with a screen size greater than 1200 pixels
Responsive Utility Classes
These classifications combined with some of Bootstrap's utility CSS let's us customize how sites look on mobile:
For example, we can use the `.visible-xs-block` class to show certain things to just those users on extra small devices
In this example, the "Welcome, mobile user!" div will only be displayed to users who are on extra small devices. And it doesn't just stop with `.visible-xs-block`! There are many other great utility classes like this, thanks to Boostrap. You can read more here: http://getbootstrap.com/css/#responsive-utilities
Grid System
Bootstrap also gives us a helpful and responsive grid system for pages. This system gives you twelve columns for you to display your site's content. You can choose how you want to layout your content. For example, you might want to have a sidebar that spans over 4 columns which will give you 8 columns left for your main content. Or, you might want two pieces of content side-by-side both spanning 6 columns a piece.
However, if someone is on a mobile device, your two pieces of content side-by-side might not look so great anymore and you decide you want this content to stack on top of each other instead. Bootstrap make this easy to do with their grid system.
For example, you might have something that looks like this:
<div class="col-md-6">Left Side</div>
<div class="col-md-6">Right Side</div>
This code block will keep those two columns displayed in a horizontal fashion until a user on a tablet (small device) or phone (extra-small device) views it. In this case, the two divs will stack on top of each other. For more information on the Bootstrap grid system, check out: http://getbootstrap.com/css/#grid
Responsive Images
Making your images size responsively is actually fairly easily and can be achieved in CSS. Simply declare a rule on your image that looks something like:
#my-responsive-image {
max-width: 100%;
height: auto;
}
This will size the image to it's parent container automatically. Of course, Bootstrap also provides a helper class which can do this for you: http://getbootstrap.com/css/#images
Testing
Firefox, Google Chrome, and Safari all provide ways to test your site out on mobile devices.
Google Chrome
On Google Chrome, navigate to your site and open Developer tools (On Mac, press the Command+Option+i keys at the same time. On Windows, press Control+Shift+I).
In developer tools, select the "Device" icon from the top-left of the window.
This puts your site into Device Emulation mode and let's you view your site the same way a user on another device would view your site.
You can choose from different devices by selecting from the dropdown (Note: you might have to refresh the page after choosing a different device)
Firefox
On Firefox, navigate to your site and open the Toolbox (On Mac, press the Command+Option+i keys at the same time. On Windows, press Control+Shift+I).
From here, select the "Responsive Design Mode" icon.
From here, you can change the screen size to see how your site responds.
Further Reading
There are lots of articles on the web about making sure your website is responsive. Here are a few that we recommend: