Live your Unitarian Universalist values out loud. Make your year-end gift today!

Search Our Site

Page Navigation

Section Banner

Preparing Your Website for Mobile Browsers

Arguably the most important design and usability consideration these days is to be mobile-ready.

Make sure all web controls work on touchscreens (you can test this on a desktop by using your keyboard and not your mouse)—and remember that your site’s functionality can’t rely on “hover” effects (an event that only happens when you put a mouse cursor over something without clicking).

Offer all the same content to all devices—don’t assume that just because someone isn’t at a desk, that they don’t want full access. Offer people your entire site no matter where they are.

Themes

There are responsive themes available for popular content management systems.

  • Filter WordPress themes to find others that feature both "accessibility-ready" and "responsive-layout." UU2014 is an accessible, responsive WordPress theme designed specifically for UU congregations.
  • The most popular Drupal themes are responsive.

There may also be plug-ins or extensions available to make a site on one of these platforms mobile-ready, though it's generally easier to just start with a responsive theme.

Hand-Coding for Mobile Readiness

Projects like Twitter’s Bootstrap offer free scripts and styles that you can plug in to your own designs.

If you want to adjust your existing code to be responsive, read the Beginner's Guide to Responsive Web Design.

You'll need to declare the viewport scale on your pages and modify your CSS for mobile devices (in a nutshell, set the width on everything to auto or 100% and remove all floats for small screen sizes).

Include a script to fix a scaling bug for the iOS and make iPads resize their display when they're rotated from landscape to portrait or vice versa.

Screen size-specific styles allow variations for larger/smaller screens. This handheld stylesheet has some examples of the "@media" syntax.

Here's the code the UUA used, after the call to the regular stylesheet:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"/>

<link rel="stylesheet" type="text/css" href="/stylesheets/handheld.css" media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 770px)"/>

<!--[if IEMobile]>
<link rel="stylesheet" type="text/css" href="/stylesheets/handheld.css" media="screen" />
<![endif]-->

<script type="text/javascript">
// Patch for Mobile Safari's orientation change bug
// Based on www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
</script>

For more information contact web @ uua.org.

This work is made possible by the generosity of individual donors and congregations. Please consider making a donation today.

Last updated on Tuesday, July 1, 2014.

Sidebar Content, Page Navigation

 

Updated and Popular

Recently Updated

For Newcomers

Learn more about the Beliefs & Principles of Unitarian Universalism, or read our online magazine, UU World, for features on today's Unitarian Universalists. Visit an online UU church, or find a congregation near you.

Page Navigation