Responsive design sites are becoming more and more popular, and it is trend that looks like it will be here to stay. The major benefit to responsive design is that your website will look good and will be easy to navigate on any size screen, meaning that as the new sizes for desktops, tablets and mobile devices come out, your site will stay looking great and will fit nicely in your customer's view.
So how do I implement responsive design? Well, you have to look at it this way, instead of creating a single page layout; you are now going to be creating at least 3 different page layouts all in one. As you are setting up the main desktop layout, imagine where the content will go as the page width gets narrower. Some content you may want to remove completely as the width is decreased; some content you will want to layout vertically rather than horizontally.
I will discuss some basics you will want to add, some things you will want to begin using, and some features that you will need for a responsive design website. This is just a quick overview for basic responsive design. Have fun with responsive design. Come up with unique ways of displaying the same content in a small screen environment as would be available in a large screen environment.
If you view a website that is not responsive on your mobile device or tablet, the website will view at its full size; you will have to zoom in to read text or see the navigation links. To make it so that on smaller screens the website is viewed at its regular, read-able size, you will need to add a meta tag to the <head> section. Copy the meta tag below and add it to all your store pages or build it into your custom template.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
When you know the width of a website, you can say exactly how many pixels something will take up. In responsive design, the width of the website changes with every device, so nearly all aspects of the website need to be coded in percentages rather than pixels. You can use max-widths and min-widths so that your layout doesn't get too large or too small. For example, I typically set my container to:
div.container {width: 96%; max-width: 1100px; margin: 0px auto; padding: 0px;}
This also applies to images. DO NOT add pixel dimensions to images. Instead, in your CSS file, add the following
img {max-width: 100%;}
If you are setting up a responsive design custom template for your ShopSite store, for the product images, you can't just use the regular product tags, [-- PRODUCT.Graphic --] and [-- PRODUCT.MoreInformationGraphic --] because those tags include the pixel dimensions for the image. Instead, you will want to add parameters into your product graphic tags so that only the image src and alt text is displayed; no dimensions will be included in the image tag.
[-- PRODUCT.Graphic ONLY_ALT_TAG --] [-- PRODUCT.MoreInformationGraphic ONLY_ALT_TAG --]
Coding in percentages should be carried out through most elements. For example, you will want your margins to be in percentages and any floating elements should be percentages.
Media queries are how you can have your page change shape as the browser width decreases. You can setup many media queries, but the main two that I emphasize in my CSS files are widths with a max of 751px and widths with a max of 500px. Media queries can be included directly into your CSS files, typically at the end of your CSS files. Below is an example of the two media queries I mentioned:
@media screen and (max-width: 751px) {
// your CSS for browsers less than 751 pixels wide goes here
}
@media screen and (max-width: 500px) {
// your CSS for browsers less than 500 pixels wide goes here
}
Having hover elements in your website design is very common. You may have some flyout menus in your top navigation, buttons change color or text when you hover over them, you may even have product thumbnail rollovers that change a larger product graphic. Tablets and mobile devices don't have the 'hover' or 'rollover' capability. One way of dealing with this is to add JavaScript that changes 'hover' features to 'click' features when the screen width is smaller than a set amount, such as smaller than 750px wide. Another way of dealing with this is just leaving the hover features out, knowing the customer can't use them, but make other features compensate for that. If you have flyouts in your top navigation, you may not necessarily need the flyout menus in a mobile device, as long as the customer can click on the main link to go to a category page.
Tables are inherently responsive; if you have an element that is too big for a cell, the cell (and the entire table) will stretch bigger to accommodate that element. But this is the very reason why tables don't work in responsive design. Tables only stretch bigger; you can't force a table to go smaller. This means any images or elements inside a table will stay their full size, even if their full size is too big for the screen. DO NOT use tables in responsive design websites.