This section of our
Help site is for clients with responsive website design (RWD) and offers tips
on how to make your editable WebFrame pages on your RWD website more responsive.
Responsive web pages
provide easy reading and navigation of
your website with a minimum of resizing, panning, and scrolling across a wide
range of devices (from desktop computer monitors, to tablets and mobile
Choosing the Best Page
Type for a Responsive Layout
Several of the WebFrame page types already
work well in a responsive layout, while others have been upgraded to automatically
be responsive for you.
A few page types, such as Edit HTML and Word Document, have been left as-is
continuing to give you the full control over the layout of your page that
you're used to. For these 2 page types, you will find the suggestions below
helpful and you learn to think in a new way to layout your web pages to be
K-I-S-S (Keep it
Super Simple) - In general, a simple
Word Document containing only text will work very well as a responsive web
page. The more features and formatting you add to your Word Document can
quickly make it less responsive.
Use of Tables - Tables should
generally be avoided, but could work in some instances. If you do use them,
· The overall
table width is set to 100% so it can be fluid - filling the screen from a wide
display on desktop, then narrowing for displays on tablets and smartphones.
· If you set
widths of individual columns, be sure to use percentage values instead of set
You will lose some control of precision for exact placement of content
with tables in Word (that you may have been used to when desktop was the only
device used to view websites), but you will gain the flexibility to make your
page more readable to a wider range of devices and visitors.
Use of Images - Images should
- Inserted either be above or below
text blocks on their own line, or set as "inline" with text so it can flow
with the text as your paragraphs wrap from wide (on desktop) to narrow
displays (on smarthphones).
- .GIF, .JPG, or .PNG - with the later
2 producing the best on-screen results in a Word doc.
- Resized to 72ppi at 100% of the size
you plan to display it as on the page. (Avoid placing a large image in
your Word doc, then resizing smaller as this increases the time it takes
to load the page, and increases the likelihood of losing your visitor due
to lack of patience.)
Paragraph Formatting - Some tips to
make text easier to scan and read on smaller screens:
Headlines & Subheadlines - Put line breaks between headlines/subheadlines
and paragraphs, giving clear formatting distinction between the two (larger,
bolder and/or colored text for headlines/subheadlines
that fits with the styling consistency of your site).
Text Length - Break up long pages of
text into as many smaller paragraphs as possible. A good general rule is to use
enough overall content to effectively communicate your message in as short a
space as possible. If a large amount of content is needed to convey your
message, consider breaking it up onto multiple subpages using the main page
before it like a menu, or summary of the content to follow on its subpages.
Bullet Points - Use double line spacing
(or line breaks) between bullet points if text is more than 1-3 words per
bullet. (Like the way this bulleted lists on this web page formatted.)
Hyperlinks - Give ample space before and after hyperlinks,
setting them apart from other regular text for easier clicking with fingers on Smartphones. If the hyperlink is in-line with other text
(as in the middle of a sentence), make sure you have ample line spacing to make
it as easy as possible to click on with your finger if you view it on a smartphone screen.
Pages - The best advice is to put yourself in your visitor's shoes (or
hands!). One way to test the readability and ease of use of the content you've
created, is to view your web page on different devices. Look at your web page
on a desktop computer, then view your page on your tablet or phone, and make
adjustments with the goal of providing the best experience for all types of
Tip: If you don't have a tablet or smartphone, you can narrow your browser window to emulate a
tablet or smartphone.
Need help? - If you continue to
have trouble getting a page to layout like you want it to, please contact us and we'll help!