Category: design

Posted on by — 3 Comments

Mobile Support for WordPress

There are over 500 million Facebook users. Of these, 200 million regularly and actively access Facebook from a mobile device. If you are providing a mobile version of your website, you are screwing up a huge opportunity. Fortunately, if you use WordPress for your website, there is good news. There are several great ways to add basic mobile support to a WordPress-powered website with very little effort.

Assuming you care about the huge number of people who might want to visit your site from their mobile device, there are two important issues that warrant some thought.

Keep it Light

Back in the early days of the Internet, most people used dial-up access. The rule of thumb for websites was to keep the total size of  your page to less than 100 KB so that it could load reasonably quickly for dial-up users. Today, most computers connect via some form of broadband, and–according to Google–the average page size has ballooned to over 300 KB or more. While this works great for most fast broadband connections, mobile users may have data access speeds that are much slower. On top of that, many times they are paying by the drink. Some mobile providers charge based on how much data usage you slurp, so the greater your usage, the bigger bite they take out of your wallet. And don’t forget about data roaming!

Make it Useful

The mobile version of your website should not be a replica of the desktop experience. Just because your site can be displayed on an iPhone, doesn’t mean it’s mobile-ready. A mobile user has very different needs.

Domino’s Pizza provides a great illustration of this.  Visit the main Domino’s website on your computer and you can find a wealth of information. There are menus, online ordering, location information, nutritional info and even information about the corporation. Almost anything you want to know about Domino’s can be found on the site.

What are the primary objectives for the mobile visitor? How do they differ from the person sitting at a computer? For Domino’s, they want to make it easy for someone on a mobile device to place an order and find a store. You don’t get all the bells and whistles of the full website, just the key activities that Domino’s has found most mobile users want.

Taking Your WordPress-powered Site Mobile

It is said there are a thousand ways to skin a cat. There are probably even more ways to provide mobile support for your WordPress-powered website. I’m not even going to attempt to cover them all, but I will point out a few quick and relatively easy solutions. Essentially the options fall into one of three categories:

  1. Roll your own. You can create a mobile CSS file that scales down the design and content for mobile users. This really isn’t too hard, but it does require some technical knowledge of CSS. I won’t be covering this– instead I’m going to focus on the easier solutions.
  2. Mobile Plugins/Themes. There are WordPress themes or plugins designed specifically to provide mobile support.

Mobile-izing WordPress

One of the easiest ways to add a mobile version of your self-hosted WordPress site is with the WPtouch plugin. WPtouch is available in both free and commercial versions. It provides a much-improved mobile interface on iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch and BlackBerry Storm/Torch mobile devices.

I use WPtouch on several of my sites, including socalhiker.net and here at www.jeffhester.net.

The easiest way to try the free version is simply to add a new plugin via the WordPress admin console or download from here in  the WordPress.org plugin directory.

As you see in the screenshots above, the mobile version generated with WPtouch looks considerably different from the full site. The benefit to the mobile user is that it loads quickly, gives them something with an interface optimized for their device, and still gives them access to the content.

Of course, you can customize it further with your branding and colors. As time permits, I’ll do that as well. But without a lot of fuss or effort, you get something very usable on a mobile device.

There are many other good options including Mobify. VisionWidget has a more comprehensive overview if you’d like to see some alternatives.

Testing Mobile Support

Chances are, you already have a mobile phone or device to test on, but how do you test your mobile site on a variety of devices without buying them all? There isn’t a single option that works well for this, but CrossBrowserTesting will let you see what your site looks like on Android, iPhone and iPad devices. It’s a commercial service with a free trial.

For even more mobile options, check out PerfectoMobile. They focus exclusively on mobile devices, but include a much larger range.

Potential Problems

One obvious design difference between a typical site and a mobile version is that it won’t typically have a sidebar. If you rely on the sidebar for navigation or other functionality, you’ll need to provide another solution with your mobile version.

Another common issue will is Flash. Apple devices like the iPhone, iPod Touch and iPad don’t support Flash, and many video sites use Flash players. The mobile Safari browser on Apple devices will support HTML5 video, but you may need to tweak your embed technique to specify this.

Some of the mobile systems like WPtouch have issues with third-party comment systems like Disqus, Intense Debate or Echo. Usually this is not a showstopper, but if you use one of these systems, plan on doing some additional testing.

Summing it All Up

This isn’t meant to be an exhaustive list of options, but my own preference. Hopefully this whets your appetite for providing mobile support on your websites.

Got a better solution? Share your knowledge! Leave a comment  below.

Posted on by — 9 Comments

Hacking an IKEA Pull-Out Keyboard Shelf for BESTA

The finished results

Space. The final frontier. Those famous words from the beginning of Star Trek still echo in my head after years of watching Kirk battle cheesy-looking aliens. And for my little beach shack, space really is the final frontier–and that space is at a premium!

I moved into the Big Blue Beach Bungalow nearly 1-1/2 years ago, and at long last (and with thanks to IKEA), I’m nearly finished furnishing the place. My main living area is a long, narrow room that serves a dual purpose. It’s my primary lounging about area, with all my media, the flat-screen, blu-ray player, Xbox, etc.  But it’s also a workspace, with my computer and all the accoutraments.

For a long time, I put up with a cheap $19 ready-to-assemble desk from Walmart. This humble little desk wasn’t much to look at, but sufficed as a short term solution while I completed my vision for the room.

My vision? 12 linear feet of IKEA BESTA storage in black-brown finish. Three units side-by-side, with each unit progressively taller. When I originally moved in, I already had one of the three units (my flatscreen sat atop it). And this month, the collection was completed.

The Problem

There was, however, one small problem. My original vision called for replacing the cheap desk and putting my Mac Mini in the BESTA unit, and my keyboard and mouse (both wireless) on an INREDA pull-out frame with the shelf insert option. The INREDA pull-out frame could be fitted with one of three available options: a compartmentalized tray; a hanging file system; or a shelf insert. The shelf insert works perfectly for a laptop or small keyboard and mouse.

Unfortunately, IKEA discontinued the shelf insert in 2010.

Bummer.

I tried a couple stores for stock to no avail. I checked Craigslist, again with no luck. I even tried the IKEAfans Forum, again with no success. “Screw it,” I thought. I’m fairly handy. I’ll build my own.

My Solution: The Do-It-Yourself INREDA Shelf Insert

The vinyl remnant was just a little long. I only needed trim one side.

The first step was assembling and installing the INREDA pull-out frame. This is easy enough for anyone with a screwdriver and the ability to follow directions.

Next, I carefully measured the opening for the insert. As it turns out, 1/2″ thick plywood is the perfect height for the insert, with dimensions of 19-3/8″ x 13-7/8″. First stop, Lowe’s. I found a 2′ x 2′ x 1/2″ sheet of sanded pine plywood, which the staff at Lowe’s were happy to cut to size for me.

Now all I needed to do was cover it. The original IKEA part was available in either white or black faux leather, and I wanted to do something similar in either black or very dark brown. The friendly people at the neighborhood Denault’s Hardware sent me down the road to Foam n’ Fabrics, where the owner gave me–for free–a remnant of black vinyl that fit perfectly.

I borrowed my neighbor’s staple gun, wrapped the vinyl around the plywood and stapled it to the underside.

I just eyeballed the staples, taking care to keep the vinyl stretched taut.
The corners were folded “gift wrap” style

It fits snugly in the pull-out frame opening, and looks perfect. Total cost? About $6 bucks (and a little bit of elbow grease).

Posted on by — Leave a comment

Typekit: Real Fonts on Your Website

For years, designers have struggled with integrating interesting, expressive fonts into web pages. Until now, the general rule has been to stick to the commonly available font families — the default stuff installed on every Mac or Windows PC — and use images for anything out of the ordinary. This works ok, but (alt tags aside) search engines will not read your text-as-an-image. Not to mention the fact that it introduces yet another file to download, and increases the total weight of the page. 

A new project from Small Batch Inc. looks to change all that. Typekit promises to give you the ability to embed fonts on any web page with full fidelity and typographic control. 

typekit

Typekit is not yet available, but you can sign-up here to be notified as soon as it is.

Posted on by — 4 Comments

The Extreme Google Brain

Joe Clark writes on the culture of antidesign predominate at Google:

Companies committed to a culture of antidesign (also consultants like Jakob Nielsen) may occasionally succeed in the marketplace, but they do so in spite of their antidesign, not because of it. Of course we can’t prove that; we can’t run a controlled experiment, let alone 41 of them with distinct shades of blue. It is merely one of those things a visually literate person knows. The fact that you don’t know it, or you deny it’s important, or deny it even can be known goes to show you really are better suited to programming a computer all day than dealing with actual human beings.