Make Your Website Shine!

Sprucing up your website for the new year? Now’s a good time to consider how it looks and works on mobile devices.

According to my stats for 2016, a quarter of my followers now arrive on mobile devices. I work hard for their patronage, and I want to ensure their experience is as pleasant as possible, but there are a huge variety of devices, resolutions, and user settings to contend with–and it all takes time away from writing. What to do?

Fortunately, the days of testing software out on every possible client configuration are long gone, and for the casual brochure site(1) developer, most of the heavy lifting has already been done. I use a paid Weebly account for my brochure site and a free WordPress site for my blog. Both offer automatic support for mobile devices.

Now, that can be a blessing and a curse. Both sites will automatically render pages to fit the client device, and both give a mobile device preview–but a single preview resolution really doesn’t cut it, and neither does a one-design-fits-all layout design.

One of the reasons I use Weebly is that its roots are in website development, not blogging, so from the very beginning, it offered more control over the screen design, but without forcing you to code your own Html pages. Instead, it gives you the option of adding html just where you need it, while managing most of the page layout through stock container objects (Word Press and other blogging sites are now offering similar functionality in an attempt to broaden their appeal).

One type of Weebly container is the plug-in, and there are plug-ins that let you turn off whole sections of other containers depending on the resolution of the client device requesting a page. This makes support for mobile devices vastly easier without adding much to the workload.

For my website refresh, I opted for a super lean landing page that zeroes in on what’s most important, my awards, reader & reviewer testimonials, and a call to action. To make each of these dynamic and responsive–but still super lightweight and quick-loading, I implemented these three features in html and Javascript (though that’s not material to what I’m showing you here).

Just a little Googling and cussing and fuming, and it all works to plan–except even the simple built-in Weebly mobile view tells me the small screen just don’t have room to display all three well. So I put the testimonial rotator in a plug-in that hides it from mobile devices. Then I find I need to make some minor alterations to my other two controls so they appear centered on small screens, but in more favorable locations on larger screens. No problem. I just create two sets of controls–one with all three controls properly oriented for big screens, and one with just the two for small screens. In the Weebly designer, they look like this:

Okay, but how do I tell what they’ll look like on a smartphone–and not just my smartphone, but all the different models out there?

Let me introduce you to a free tool called called Screenfly that lets you see how your site looks at all different resolutions and orientations. Super handy.

Here are two screenshots of Screenfly showing my site as it should appear on a late model Iphone and on a large tablet:

Screenfly isn’t perfect, of course. I don’t know how faithfully it models limitations in browser and Javascript support on different devices, and it doesn’t always make it  easy to simulate small device navigation, but it does a great job with layout, and the solution to other issues is keeping things simple in the first place.

So definitely check out Screenfly, and while you’re at it, check out my new cStuartHardwick.com and leave a comment to tell me what you think.

(1) A brochure site is a website that mostly gives information, usually arranged in a small number of pages, like an old-fashioned paper brochure.