Ten years ago, no one had heard of any kind of web design beyond the then-current standard: static pages with some dynamic elements, all of them written mostly in HTML. Of course, the big players – corporate entities, tech-savvy entrepreneurs, businesses, and so forth – always tend to be on the cutting edge of things, and so their websites were usually better looking, more dynamic affairs than the average. It’s not that the Internet was a ghost town or anything. Far from it! It isn’t even that things were grossly unappealing to use or to look at. It’s just that in 2005 or thereabouts, technology just hadn’t caught up with the dreams, aspirations, and visions of the geniuses among us. Remember, once upon a time, cell phones weren’t tiny stand-ins for a PC – they were expensive, slow, and comparatively limited. Now, though, mini-PCs are exactly what the humble cell phone has become, and with that transformation, the need for mobile websites has exploded. Happily, when enough people want something, technology has a way of accommodating that need, which is why it’s easier than it’s ever been to make your own mobile website using WordPress. Keep reading to learn about all the different ways to make a WordPress based website that your phone can be proud of!
At its inception, WordPress was a blogging platform designed to make it easy and fun for people of all races, creeds, and languages to share whatever content they thought to be important, whether that meant breaking news, broken hearts, or Batman collectibles. At its heart, that’s still what WordPress is, which is where the host of WordPress plugins designed to make a mobile website as quickly and in as economical a fashion as possible enter the picture. If your website is of a traditional, desktop-bound make and heavy on the content, the following plugins can help make it a bit more mobile-friendly.
WPTouch is a great plugin if you favor the minimalist style. Used by average Joes and Janes as well as luminaries like Stephen Fry, this plugin basically strips away all the bells and whistles your website might contain and reintroduces the content and a few other core elements in a mobile-friendly format. The free version is adequate, but if you want a little more control and flexibility, consider springing for the paid / premium version.
THE WORDPRESS MOBILE PACK
For those folks stuck in the non-iOS / non-Android stone age, there’s the WordPress Mobile Pack. More a re-skinning device than anything, this plugin allows site owners to give their desktop website a totally different layout that’s customized for mobile users. It works well enough for what it is, but be warned: This plug-in is a dinosaur compared to WordPress’s dedicated iOS / Android plugins, and it looks and feels its age.
To bring things back to modern times, let’s talk about the BuddyPress plugin. Originally intended to help WordPress users turn their WP sites into a social network of sorts, it also makes for a great mobile optimization tool. Using BuddyPress, WordPress sites of all stripes can now be optimized for the mobile environment with just a few clicks.
Mobile WordPress Themes
Plugins will obviously work if you want to take your site into the world of mobile optimization, but they’re quick, no-frills affairs. Blunt instruments, if you will. They’ll shove your sites into mobile compliance whether they like it or not, and the results, while adequate, can sometimes be unpredictable. Choosing to make a mobile website with purpose-built WordPress themes, on the other hand, will give your website(s) a makeover like you wouldn’t believe. Let’s take a look at a few examples, shall we?
- WordPress Twenty Eleven is WP’s default theme, and is adequately responsive all by itself.
- The Carrington theme bundle requires some editing to make its themes responsive, but once that’s done, you’ll have multiple attractive, mobile-ready themes for your websites.
- Scherzo is a great theme for the minimalist crowd, and better yet, it was built specifically to cater to the unique needs of mobile and mobile optimized websites.
- Making a decent shopping – that’s “e-commerce” in techie parlance – website look and behave in a mobile friendly fashion can be a complex operation, but a theme-plugin combo that goes by the name of Jigoshop makes it all seem simple – just a few clicks and setting tweaks will have you up and running before you can say “Grand Opening”!
Using Separate Layouts
None but the most hidebound of site admins are doing things this way nowadays, but if it works for sites like NYT.com, (the online platform of the New York Times), it can’t be all bad! In a nutshell, this method of mobile optimization involves offering users two versions of the same website – a desktop version like the ones that have existed since the Internet’s early days, and a sleek, modern, mobile oriented one. WP Mobile Pack (see above) and WPTap Mobile Detector are the go-to utilities for this method of site creation.
The royal treatment for any website, hand-coding your website for mobile responsiveness is still work, but it isn’t nearly as much work as building a new site from scratch. To make a mobile website using this approach, you’ll need to dive into your WordPress theme’s CSS (Cascading Style Sheets) and begin to change things. To make it simple, CSS is most of what determines how your website looks on various platforms. You’re going to want to tweak the bits of code that define how these sites appear to mobile users when they visit on their phones, tablets, or other mobile device.
This being a “how to” guide, you can find a general overview of how to proceed below, followed by a link to more in-depth technical instructions at the end.
STEP ONE: DEFINE YOUR MEDIA QUERIES
The first thing you need to do is define the media queries that will tell your website how to behave, visually speaking, when presented on mobile devices. A lot of these are already done for you, but if there’s something mobile-specific about your theme, this is where you’ll define it. The most important aspect (no pun intended!) of this process is defining what screen sizes you want / need / are willing to optimize for; tablet and cell phone screens come in all different sizes and orientations these days, and you want your WordPress site to look great on all of them, right? Right.
STEP TWO: ADDING RESPONSIVENESS
This step involves using CSS to make the general layout of your website more mobile-friendly. Here’s what you’ll need to change, get rid of, or otherwise alter:
- Your website’s overall width
- The scale and/or useable content of any sidebars, footers, widgets, and other such fields and features
- Text and image size
STEP THREE: OPTIMIZING THE INTERFACE
Mobile users have a unique set of preferences, and they’re used to seeing and interacting with things in a certain, predictable way. As such, it’s your job to make sure any menus, navigational routines, and so forth as intuitive and un-cluttered as possible. You can use various programming languages to do this (CSS, PHP), or if you prefer, you can just install one of the myriad plugins designed to do the work for you, and go get a cup of matcha green tea!
Note: At the end of the day, when it comes to appearance and functionality, you want to stick to layouts that offer pleasant background images, plenty of drop-down menus & grids, and anything that minimizes the need for scrolls, taps, and gestures.
STEP FOUR: A VIEW TO A SITE
Don’t forget to write some code into the header.php file of your WordPress sites that tells your users’ mobile devices to make their individual screen sizes physical rather than virtual (using the viewport that almost all modern mobile devices have; it virtualizes a desktop screen on said device). Otherwise, your site will break, and after all this work, that would be a real shame!
Conclusion / Closing Thoughts
Making a mobile-friendly website can be daunting if you don’t have the right tools and information, but with this handy guide, it should be quick, painless, and even fun! Thanks for reading, and good luck!