How to Make Mobile-Friendly Web Pages
using the OK.gov CMS Editor Design Mode

OK.gov mobileFriendly examples

Here are the different ways that you can make the body of an OK.gov web page mobile-friendly.  Note that if you use tables to format your content, as will be seen in refresher notes below regards static websites, your content might be truncated. 

Just display the link and resize your browser from right to left, thereby shrinking the size of the viewport.  This will let you test how your pages will look in desktop and iPad-landscape, iPad-portrait, iPhone-landscape and iPhone-portrait.

• liquid - the page contains all text
   as a web page is resized, the text will flow.  therefore, by definition, all-text pages are inherently mobile-friendly!
   
• liquid - the page contains one (1) or more images and block(s) of text
  be sure to test at smaller viewport sizes to see how they look.  note that the image(s) dynamically resize as the viewport gets smaller.
   
• enable right-side bar
  this is done by entering content in relevant fields in the "Right Content" tab of the editor.  The CMS will then handle the stacking of the right-side bar underneath the body of the page at the appropriate viewport size.  It is the clients responsibility to manage the display of content in the rest of the body of the page.
   
• adaptive - using the Stacking Content Block classes
  these classes provide the ability to control the formatting of content in a table-like manner, but the blocks of content will dynamically stack as the viewport is resized.  these classes were developed in order to make the Wagoner County website mobile-friendly as it was desired to have the ability to control the format of content and the vendor did not provide any tools that would do this - so we wrote our own.

Quick Refresher on Different Types of Web Sites

Now a quick refresher on the differences between the various types of web sites.  eg- static, liquid (or fluid), adaptive and responsive.

The quickest way to demonstrate these differences is to let you display each of the (4) types in the liquidapsive website and then resize your web browser from right to left, thereby shrinking the size of the viewport, observing the changes and noting how each type behaves differently.  Following are some of the behaviours that you will see.  [Note that the initial screen displayed is "Responsive" - use the drop-down list to pick the other three (3) types.]

Once you are comfortable changing the website type and resizing the browser from right to left to shrink the viewport, here is something else for you to try...  Matt Kersley's Responsive Web Design Testing Tool   Enter "www.liquidapsive.com" in the URL field and hit 'enter'.  You can even change the type of website in the drop-down field.  Nice, yes? - lets you see five (5) different viewport widths at once!  (240 - 320 - 480 - 768 - 1024)

Here are some things to look for with each type...

• static - traditional way of building websites when formatting of the content is needed.  Formatting is usually achieved using tables from CMS or with coding using the "display: block" property.  Note how the content is truncated when the browser is resized from right to left.
   
• liquid (or fluid) - text will flow and images will resize to fit the viewport.  Note that the content areas get smaller and smaller all squeezed together in the viewport.  Also that it is not possible to format your content with fluid.  not a problem if you don't need formatting and the result after flowing to fit smaller viewports is ok with you.
   
• adaptive - note that as you move the right side of the browser to the left, the screen will "jump", then scroll smoothly for a while, then "jump" again, scroll smoothly, etc.  Observe how after each "jump" the screen looks differently, even that the blocks of content start stacking on each other.  Note that the block-stacking only happens when the screen "jumps".  Technical note - this is achieved by the use of media-query (@media) break-points that are coded in the CSS stylesheet.
   
  Regards the OK.gov CMS, the header, menu bar and footer are adaptive as of the GEN4 upgrade (prior to this upgrade they were Static) and present nicely in all four (4) types of common devices - iPhone portrait, iPhone landscape, iPad portrait, iPad landscape and desktop.   Note that the body of the web page is the responsibility of the client.
   
• responsive - main feature of responsive is that text continuously flows, images continuously scale and content blocks dynamically stack as the right browser margin is moved to the left.  Technical note - the dynamic block-stacking is achieved by the use of media-query (@media) break-points that are coded in the CSS stylesheet.