Monday, September 24, 2012

Stuck inside of Mobile...

I hate mobile phones. I hate all phones, but I particularly hate the wretched little pocket variety. I hate the demands they make on your wallet and the fact that, even though you never stop paying for them (The Gift That Keeps On Taking), they are virtually obsolete the minute they leave the box. I hate their piddly little keys. I hate the fact that my head gets microwaved every time I use one.

I don't need one in my life. I do have one, but it is an obsolete Nokia 2310, which does nothing except make phone calls and allow people to call me. It's nothing more than a glorified pager. That's what I expect my phone to do. I don't want to use my phone to take pictures, or play games, or surf the internet, or listen to music, or watch telly. I already have a perfectly good camera. I watch telly at home, not on the bus. I already have several MP3 players. I already have a near-state-of-the-art PC. I don't play games.

It's a generational thing, but I also don't text much. I hate the fact that these horrid objects have gone some way towards reducing the written English language to a sequence of monosyllabic grunts.

But, for my sins, I'm trying to design web pages and I need to move with the times (bah! humbug!). Having lived through the years when all computers were shackled to chunky great monitors which had a screen definition of 800 x 600 pixels (if you were lucky), it was liberating as a designer to be able to do MORE with a web site. Screen resolutions and connection speeds had reached the point where near-cinema quality pictures are now possible. Web browsers also became more and more sophisticated, with cross-platform standards (with the exception of M****soft's Internet Exploder, hahaha) that could never have been possible before. It has been a golden time to play with computers.

Except that now, the Sinister Marketing Forces have decided that the future of the internet is mobile devices. I'm having to rethink everything I held to be true because, for reasons I cannot fathom, public demand is that the internet should now be squinted at through smaller and smaller screens.


This website, built for a friend of mine who is something of a big cheese in the world of digital and 3D broadcasting, is several years old now. I recently bought the latest version (X6) of Serif's WebPlus software, so this seemed like as good a time as any to drag the site screaming by the scruff of its stylesheets and bring it up to date a little.

Looking at the site on my chum's enormous high-definition widescreen, I was struck by how small it all looked nowadays. I therefore rejigged the master pages and tweaked the whole of the website to suit today's larger monitors, at the same time not making it too big, so that those without the benefit of big screens won't have to resort to horizontal scrolling (another pet hate of mine!).

Among the spiffy new features introduced by Serif for this version is the ability to add 'social network' buttons. We'll have some of those, says I! You can now tell all your friends on Twitface and Booker about the site, at the click of a 'share' button. You can bookmark the site on Google and 'Plus One' it on GooglePlus. I've also updated some of the content (overdue), as some of the links went to websites that have moved or don't exist any more!

Another heavily-touted new WebPlus feature is the facility to create a version of your website to fit on these new-fangled mobile doobries. This seemed like an ideal opportunity to do just that with the HDDC site. It is perfectly possible to view an existing 'desktop' website on a mobile device, but really, when laying out pages, one needs to think "portrait" rather than "landscape". My existing website is very much in the "landscape" camp, with that navigation menu running down the side and some of the pages having more than one column. I'd have thought that cramming all that into something mere inches across would ruin eyesights the world over. Serif will allow you the option of integrating 'mobile' versions of the pages into your existing site or creating two completely separate versions of a website. You then include a "redirect" script which determines what browser you are using to look at the website, and then switch to the page size to suit you. I decided that creating a separate parallel mobile site, rather than mixing all the pages together in one project, would make it easier (for me) to navigate.

The first prototype of the mobile version of the site doesn't look that different to the desktop one. All the content is same, but I've now laid out each page in one single scrolling column. I based the dimensions on the screen size for the original iPhone, a visible width of 320 pixels. I believe Blackberries and Androids and Symbians are all about the same width, so that seemed like a size to plump for (Serif's own manual pages about designing for mobile were most unforthcoming on such specifics).

The main headscratcher with this project was this - How do I include a navigation menu on every page? The site has ten or more pages, some of which have sub-pages of their own. A text-based list in a reasonably legible font fills the entire screen! The obvious solution would appear to be a dropdown navigation menu, normally hidden away but which appears under the page's 'home' button when you point at it. I designed one using Serif's own tools...

Now remember, I don't have a smartphone of my own on which to test this ruddy thing, so I rely on feedback from those that do! Having made the first prototype go 'live', I discovered that the Serif script which directs phone users to the mobile version of the site... didn't! I had to type a much simpler javascript fragment of my own and paste it into the homepage's 'head', which apparently did work. The Serif one was a lot more complicated; it has an 'include' list of all the various flavours of mobile phone, with the option of specifying screen sizes. It might be customizable to get it to work, but why bother? Mine (gleaned from the net and then tweaked to suit) was a lot easier - All I ask is that screens bigger than 700 pixels wide (that would include tablets 'n' pads) use the desktop version, and anything smaller than 699 pixels (the majority of existing mobiles) redirect to the mobile site.
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "";
Now having done all that and got the connections working... it was reported that the dropdown navigation menu doesn't work on my chum's Samsung. What a palaver! Me being an ignorant newbie, I don't know whether this is just a 'thing' with touchscreens, or whether his browser in particular has an objection to javascript-based menus in general (it's a mystery to me how you can adjust the software settings on these things. Perhaps they don't expect you to?). When he points at the home button, instead of a nice dropdown menu (tested by me on every flavour of desktop browser) he sees an orange error box. At this point (well, shortly after I'd finished with the head-banging-on-wall routine), I mentioned all this in a MySpace update, hoping that I might get some feedback from a few other chums...

...otherwise, it's time for a rethink. A Serif-generated menu, while it works jez dandy on a PC, won't necessarily be compatible with all them other devices. I needed a non-java solution, just using good old HTML and CSS. Now those I understand! Prototype number two looked like this:-

The 'rainbow' of coloured bars running down the side of the screen does away with the need for any sort of obtrusive real-estate-hogging text... but it quickly became obvious to me that a purely 'graphic' approach might not be clear in its purpose for the user. I added a 'title' attribute to each of the bitmap buttons so that there would be pop-out text 'tooltips' telling the user where the buttons link to. But the browsers' own tooltips aren't particularly pretty and they appear rather slowly and relative to the pointer, rather than alongside the buttons themselves. I also wearied of the rainbow theme, which doesn't fit the 'corporate identity' of the site.

As a standalone HTML project, I've built a set of menu buttons that look like this (above), with a little window that is fixed in one place, displaying the tooltips for each button. But I haven't had any success incorporating it into the 'real' site yet - I fear it might clash with the site's own existing CSS and that a few overriding !important;s may be needed for everything to work properly... yep! you guessed it! It's a "WORK IN PROGRESS"!

The current "working"(?) version of the site looks like this (at least temporarily), with plain buttons more in keeping with the sites own colours. It still relies on the browsers' own tooltips though, so I'm waiting for the 'field testers' to let me know if it is actually practical as a navigation solution.*

STOP PRESS - * No, it isn't. The tooltips don't show up at all on the mobile browsers we've tried. We've now plumped for a homepage-sized text-based navigation instead. Ho hum. So the ultimate answer to the question "How do I include a navigation menu on every page?" is... I don't! (By the way, the arty homepage picture of Peter, which I had to remove in order to make room for the 'menu', has now been moved to the "Principal" biog page...)


Far too many websites today look to me like kitchen appliances. Many 'designers' seem to go for a standard, clinical shiny-white-with-grey-buttons scheme.

Why don't they try to inject a much needed splash of colour? My own attempts at trying to do just that, especially with certain social media sites, are well reported within these very pages.

It takes a lot of effort to 'design' a website from scratch. As I've found, it takes even more effort to adapt an existing website for mobile viewing. Nowadays, because you have to make it look 'good' on any device, not just your favourite desktop internet browser, it means building more than one version of the website... or going for the lazy option and keeping it really simple, making everything look as generic as possible. Boring.

Not content with destroying the written language, I believe that mobile phones have now turned graphic design back several decades as well.

No comments:

Post a Comment