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