Adaptive Web Development with WordPress
In this short article, I wanna show you how I built an adaptive website with WordPress.
Responsive web design isn’t always the best solution.
I normally use the responsive approach by Etan Marcotte. But following I’ll show you, that RWD is not always the best solution.
The client had a detailed guideline. It described two different web designs, a desktop and a mobile version. Both versions hadn’t many similarities. So I had to build two different versions, exactly how the style manual guided me.
I started with the desktop version first and after I finished this I started with the mobile one. Just step by step.
The website is based on WordPress, so I have some features and use a plugin to keep my work easier.
Until now not very special. But now, the interesting part and the reason why I write this article.
My primary concerns before developing the two sites were the following:
- Don’t create two dedicated websites
- Keep the codebase small and clean
- Improve performance for mobile devices
In my view, this project wasn’t perfect for a normal responsive approach. I’d have to move much of the markup with javascript, which definitely sucks. It’d make more sense to create a server-side solution for this, in my case in PHP.
Sometimes it makes more sense to create a server-side solution.
We aren’t in the era, where we create two dedicated versions to offer a mobile solution. Firstly, my codebase will grow and it will be more tedious to maintain in the future. The client also has to manage two sites.
To solve this problem, I receive the data from the same content management system and use whenever possible the same source code for both sites.
We aren’t in the era, where we create two dedicated websites to offer a mobile solution.
To increase the performance for smartphones, I serve smaller images to the site and also remove unimportant features, like a full-width image slideshow.
The Solution
After I completed the theme for the desktop version, I started with the mobile site. WordPress offers an opportunity to create child themes and I use this feature to create two separate sites with the least work possible.
The functions of both sites are similar, I just had to rearrange the content and override the parent theme. I provide different image sizes for smartphones by easily let WordPress do the trick and change the image source in the shipped PHP-files. The most work was needed in the stylesheet, where I had to write and tweak the most code. But after working on these different parts the second page was finished with a decent amount of work.
Adaptive web development — serve the right website version to the right device.
To deliver the right site to the right devices, I used a plugin (WP-Mobilizer) which gets the user agent of the requested client and then serves the right theme. For all smartphones, I pass the mobile version and for tablet and desktop, I send the desktop version. The larger design is based on a 960px grid, which also looks good on tablets.
If a tablet rotates to portrait mode, then the width is mostly a little less than 960 pixels. I emulated this width by setting the viewport fix to 960 pixels. Not that nice I know, but sadly the guideline didn’t consider tablets. Optimization for a tablet in portrait mode is anyway second choice for me because there are much fewer people using it in this way.
Adaptive web design faces no problem with the Google Search Engine.
A word to Google’s mobile-friendly update rolled out on April 21, 2015. There’s no problem for the Googlebot to get the right version.
If I check the site through the simple solution Google offers us (Mobile-Friendly Test), I got the following message:
—
Marc Wieland
WordPress. Front-End Development. UX. Cinematography. Landscape Photography. Time-Lapse Video.
