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 phones).  

  

  

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 "responsive":

  

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, make sure:

 

·       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 inches. 

  

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 be:

 

• 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. 

  

Testing Your 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 users.

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!