Est. Reading Time: 7 minutes
The first and foremost thing to remember when managing content for a responsive site is that the page will show up differently on mobile phones and tablet devices. Beacon has put together this document to shed some light on the nuances of managing a Responsive website.
Tables do not work well in a responsive environment. The reason is that there is not a good way to collapse the rows and columns and present data that’s understandable. The usual approach is that cells to the right will float beneath the cells to the left, so a table like this:
|Planet||Position||Length of Year (Earth Days)||Length of Day (Hours)||Number of Moons|
Ends up looking like this on a phone:
|Length of Year (Earth Days)|
|Length of Day (Hours)|
|Number of Moons|
Notice that the presentation of the data is confusing for mobile viewers. The best solution is to avoid the table and try to present the data in list form:
Mercury Position: 1 Length of Year (Earth Days): 87.96 Length of Day (Hours): 1,408.8 Number of Moons: 0
Venus Position: 2 Length of Year (Earth Days): 224.68 Length of Day (Hours): 5,832 Number of Moons: 0
Earth Position: 3 Length of Year (Earth Days): 365.26 Length of Day (Hours): 24 Number of Moons: 1 …
If your data must use a table, try to limit the columns to 3 or at most 4, and make sure the data presentation is easy to understand on a mobile device.
A Note on Tables as Images
Although you can convert a table to an image and it will resize, this practice is not recommended because text within the image will shrink on mobile screens, making them difficult to read without zooming.
The stylesheet for a responsive site codes images to resize according to certain resolution break points. Basically, images shrink with the screen size. When selecting images, bear in mind that images with a lot of text in them will not be legible on smaller screens. Avoid images with a lot of text or small text. Images with larger text can work, but be sure to test images on a mobile device.
Even if an image has no text, if the focal point of the image is small, the meaning and purpose of the image could be lost on a smaller screen size. Always test your images.
Images should be saved at the largest size available according to the desktop image requirements provided by Beacon. Preferred images for resizing are JPGs for photographs/general images or PNGs for images that have transparent backgrounds.
Do not define image sizes directly in the WYSIWYG editor (inline HTML editing). Setting a fixed pixel height and width in the editor will override the image’s ability to shrink to fit a smaller screen. Instead, crop/size the image to the exact height needed for desktop.
Retina images are double the size of the actual size on the page. For example an image raw size would be 80px by 40px, and the image attributes would be 40px by 20px. This displays correctly for Retina screens.
Optimizing for Retina is not big consideration for images uploaded to Cascade because most spot photos will have enough resolution when viewed on mobile and tablets to satisfy the high pixel-density screens. Optimization for Retina does apply to smaller graphics, such as icons and buttons, that don’t shrink to fit in a smaller screen.
All videos should use HTML5. If you are filming a video, be sure not to use too much small text if doing caption overlays. The text will shrink with the video on a mobile screen and may be difficult to read.
Flash is deprecated and inefficient. Beacon recommends that any Flash elements be converted to HTML5. Aside from relying on client-installed software, Flash does not work on mobile or tablet devices. Using Flash guarantees that fewer people will see the content as you intended.
When embedding third party code, such as a form, into the WYSIWYG editor, note that the code you are embedding may not be responsive. If that is the case, the form will appear cut-off on a mobile device and could be unusable because the submit buttons are hidden. Be sure that the form you are embedding can resize.
You should also make sure that your paragraph length is concise. Content on websites should be quick and simple to consume, so steer away from lengthy paragraphs. Try to break up content using headers, bullet points, lists, etc. Although this is best practice for any web site, poor content organization is more readily apparent when viewed on a phone.
Also, Beacon provides a set of pre-designed tags for your site. For example, page titles are generally H1 tags, which are given highest priority. Typically, H2, and H3 tags are also formatted according to the design. Avoid manually increasing the size of the font in the WYSIWYG. Instead, apply one of the pre-set classes to keep the website looking consistent.
Although iframes can be programmed to be responsive, that does not mean the elements in the iframe are responsive. You’ll need to test to make sure the iframe shows correctly on mobile and tablet devices.
Text typically wraps when viewed on a smaller screen, but if there are no spaces (breaks) in the word, then it cannot wrap and will run off the screen. So longer words, like antidisestablishmentarianism, may run off the screen on a mobile device. Most words will wrap fine. Some of the more common problems occur when writing out a link, for example: http://www.beacontechnologies.com/content-management might be too long to view on a phone. Consider embedding links into words instead.
When creating forms for your site, keep in mind the purpose. If you’re looking for a high conversion rate on mobile device, the form should ask for only what is required for you to follow up. A large form causes high anxiety for the user, especially a mobile user. That being said, here are a few additional tips for creating responsive-friendly forms on your site:
Labels In order to collapse to a mobile device, labels move above input fields so that the fields can extend the entire width of a phone screen.
Inputs Make sure that input fields, like text fields, drop-down menus, radio buttons, checkboxes, etc are large enough to be accessible by a “touch” action on a mobile device and tablet. Think: big, friendly buttons.
Errors If you are using on-screen validation, make sure error text takes its own line on a mobile device. This is often overlooked in testing, so make sure to test how on-screen errors appear. Do not use pop-ups to indicate validation errors.
Buttons Buttons shouldn’t resize for a mobile device. Side-by-side buttons usually stack vertically with the right-hand button moving below the left-hand button.