Search Our Site

Page Navigation

Section Banner

Preparing Your Website for Mobile Browsers

WordPress, Drupal, and Joomla

Some content management systems have plug-ins available to make a site on their platform mobile-ready. Here are some popular suggestions.

Hand-Coding for Mobile Readiness

Start with this basic step-by-step advice, which includes important tips about defining the viewport scale and modifying your CSS for mobile devices (in a nutshell, set the width on everything to auto or 100% and remove all floats).

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. The Unitarian Universalist Association (UUA) handheld stylesheet has some examples of the "@media" syntax.

Here's the code the UUA is using, 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 Wednesday, March 14, 2012.

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