A Mobile Friendly WordPress website has never been more important.
Responsive, Progressive Enhancement or Mobile plugin?
As mobile devices becomes less of a luxury and more of a necessity, the bottom line is becoming obvious: your static WordPress theme needs to be Responsive. Now’s the time to seriously consider converting your WordPress theme to be Mobile-Friendly.
Not too long ago, the primary way to adapt to a mobile audience was to create an extra theme. Developing a mobile version of your website has drawbacks. Constantly evolving mobile gadgets have added to continually changing screen resolutions.
Keep this in mind; that you are converting your WordPress theme NOT for any one individual device, but for different screen sizes.
There are a number of WordPress plugins available that automatically generate a mobile-friendly theme for a variety of devices. However [ in my opinion] they come at an unacceptable cost to your Web site’s graphics and user-experience design (UXD). We’ll focus on Responsive design. Responsive is a general term that identifies a liquid layout that conforms to the viewer’s screen size regardless of how large or small.
If you’re not ready to delve into code, find a SIMPLE well-written plugin. There are several plugins that will accomplish aspects of our Responsive conversion. For the sake of expediency, there are a few responsive (aka fluid) plugins available that will get your site part of the way to our goal.
It’s always better to code customizations into your [child ] theme’s templates instead of installing plugins.
Fluid, Static, Rubber, Flexible and Elastic
Fluid containers, image sizing, and CSS3 Media Queries are the basic ingredients for responsive web design.
Deconstructing Your WordPress Theme
To better understand the way things work, it’s sometimes best to take it apart. Let’s visually deconstruct your Web site by breaking down the basic components of the default (Twenty Ten) WordPress page structure. I’ll reference the basic HTML structure Twenty Ten for this tutorial.
As of March 12, 2012 the default themes bundled with WordPress is Twenty Ten and Twenty Eleven. The latter is a Responsive theme.
Scaling Images Efficiently for Screen Size
In the Fluid method the same large image used for all screen sizes which can adversely affect load times. For example; imagine a 1000 pixel image having to load on a Mobile phone, only to end up being scaled back down to 100 pixels. That’s wasting time and bandwidth, as well as very taxing on your device’s resources.