(last updated on 4/22/2016)
Best Practices for Responsive Design
There are some simple changes that can be made to your item listings responsive. These changes will make your listing render well at any size, whether the buyer is looking at your listing on their desktop computer or on their smartphone.
- Do not use large fixed width elements. Instead use relative widths for tables, images and divs.
- Simplify Layouts: Content should not rely on a particular width to render well. One column layouts work best for mobile displays.
- Want a head start? Browse our Responsive Item Listing Templates which use these responsive design principals.
Overview:
| For
| Instead of This
| Replace with This
|
| Tables<table> |
width="800" |
width="100%" |
| Images <img> |
width="300" |
width="30%" |
| width="300" |
style="max-width: 300px;" |
| Divs<div> |
style="width: 100%" |
style="width: 100%" |
Units: Relative instead of Absolute Measurement:
Do not use absolute measurements (ie fixed width) for your images, tables or containers. (Doing so will cause the content to be too wide for the viewport on a narrower device, requiring the buyer to pinch the screen to reduce it to fit the screen.)
Instead, use percentages or max-width css properties. The content will scale to that width, improving text readability and help the content stay within the viewport, (provided that nothing inside the container has an absolute measurement specified.)
Tables:
Check your table tags: <table>, <td> and/or <th> to see if a width is specified. For items taking the full width, use
width="100%". The example below specifies a width of an html table using the HTML width attribute:
Instead of this:
< table width="800" ... >
Do this:
< table width="100%" ... >
Images:
This example shows how to use percentage for a full-width image <img> :
Instead of this:
<img src="http:www.somefile.JPG" width="800"... >
Use this:
<img src="http:www.somefile.JPG" width="100%"... >
You can also specify an image by a smaller percentage:
Instead of this:
<img src="http:www.somefile.JPG" width="300"... >
Use this:
<img src="http:www.somefile.JPG" width="30%"... >
Alternately, using inline CSS, you can set a max-width property to an image. The image will load at its original size, will scale down if it has to, but never scale up to be larger than its original size, (providing no other width-based style overrides this rule.)
Example:
<img src="http:www.somefile.JPG" style="max-width: 400px;" >
Be careful there is not another width based style that overrides the max-width property, such as the attribute shown in red below.
Watch out for overrides:
<img src="http:www.somefile.JPG" width="400" style="max-width: 400px;" >
Note a height may also override the max-width:
<img src="http:www.somefile.JPG" height="100" style="max-width: 400px;" >
Divs:
Check your <div> containers to see if a width is specified. For items taking the full width, use
width="100%", do not use pixels (px).
Instead of this:
< div style="width: 800px;" ... >
Do this:
< div style="width: 100%;" ... >
Overall layout:
One column layouts are better for large blocks of text. Stay away from two column designs, as two column layouts do not stack well on mobile devices. Go to one column layouts: either using a one column < div > or < table >.
Responsive Design Resources:
Responsive Images
Max-Width Property
Responsive Design
HTML Code Editor:
A good, free program that will help you see code vs. text better is Notepad++ (for Windows.) Unlike Notepad or WordPad, the code is in color (which you can ignore) and the text you will replace is in black. Mac Users can use TextEdit as a plain text editor. See below on how to configure TextEdit to edit html files.
Anytime you want to see what the file will look like, save the file, then select Run, Launch in your favorite browser. Do this often to make sure everything is in place as you want it.
GunBroker.com offers responsive listing templates you can use to get started. Try one of those and follow the instructions for placing your information.
How to Set Up TextEdit as an HTML or Plain Text Editor
TextEdit for MacOSX renders HTML in rich text by default. You may change its preferences to act as a plain text editor for use in editing HTML files.
1. Open TextEdit.
2. Choose Preferences from the TextEdit application menu.
3. Under the New Document tab, Click the Plain Text radio button for Format.
4. Under Open and Save tab, click the checkbox to "Display HTML files as HTML code instead of formatted text"
5. Deselect "add .txt extension" to plain text files.
6. Checkbox for "Preserve White Space" is selected.