cookandkaye

scientific and technical website design projects news

Articles on website design

Mobility Nationwide affiliate Scheme

This is a test page for the Mobility Nationwide affiliates scheme, which is designed to improve the service companies provide to disabled people and their helpers in the UK.

Click on the link or image below to see how it works:

Mobility Nationwide affiliate scheme

Mobility Nationwide – leading the industry!

Our association with Mobility Nationwide goes back to 2008, when we took on the site after the tragic death of their first web designer. Since that time Mobility Nationwide have achieved and held a position as a leading supplier of high quality used wheelchair accessible vehicles in the UK.

This is an industry that has a diffuse customer base that is not very mobile, so reliant on online sales. A strong website is essential to success…

Over the years we have worked to keep their site fresh and accessible, to differentiate our offering, whilst building a strong brand presence by retaining the colour flow, logos and other design elements. An important function of the site is to demonstrate ‘firm’ – as much as is possible in the shifting online sands. This is achieved by demonstrating the fact that Mobility Nationwide is an industry leader, with solid market presence and good historic form. At the same time the site advertises the fact that the business is family owned and managed, and they will go the extra mile to ensure that the vehicle you receive ticks all your boxes.

Recently we completed the latest upgrade of the website – you can read a post on the last major upgrade here. The latest change moves the site to the new HTML5 ‘standard’, that is more compatible with mobile browsers, and adds a range of new features.

These new features are, however, a natural development from the original custom database managed site that we inherited in 2008. As a designer this provides the same feeling of continuity that we are trying to convey to Mobility Nationwide’s customers, we feel our own historic links through the code. Each iteration has added features and new capabilities whilst retaining an administration system that provides familiarity for the client, and puts all of the sales-relevant website data immediately to hand. Whilst many companies can work with an ‘off the peg’ content management system, Mobility Nationwide’s success helps to show that a bespoke service can pay dividends, and their attention to detail is to be commended in any enterprise.

Screenshot of the new Mobility Nationwide website home page.

Above: The new home page for Mobility Nationwide, showing one of the new active effects, where a vehicle description is revealed on mouse over, the panel moves upwards so nothing is lost below the visitor’s current view.

The changes that HTML5 offer web design includes greatly improved reliability for Javascript, coupled with much more powerful styling in CSS3 (the HTML isn’t actually much changed!). As a consequence the new site can offer improved page displays, using Javascript and CSS3 to bring more content ‘above the fold’, so it is easy for a visitor to get all of the specifications for a vehicle in one place – without scrolling…

With the expansion in our client’s business, the new site can now advertises vehicles by manufacturer, as the stock levels justify this fine-grained approach. To handle this requirement we have added display pages where the general specifications of different wheelchair adapted vehicles can be discussed and compared. In this way the customer gets more background information that can help them make the best choice for their circumstances.

In the end, building a good business is all about ensuring that your customer gets the right product for their circumstances…

You can visit the new Mobility Nationwide website through the link below:

Wheelchair accessible vehicles from Mobility Nationwide

We regret that due to the bespoke nature of our work for Mobility Nationwide, we are unable to offer competing web services within the industry.

INSIGNEO’s new mobile friendly website

INSIGNEO website screenshot showing mobile and full width versions
INSIGNEO website design, showing mobile (left) and full width versions

INSIGNEO’s website features an annotated slideshow, to permit them to bring all of their strands of activity ‘above the fold’ on the home page – whether you are viewing it on a mobile phone, or wide-screen device! The slideshow is fully editable within WordPress, so it can be kept fresh by adding photos for news items alongside their on-going strands (such as their very successful launch in May 2013).

The site also has a custom diary, again fully editable within WordPress, that allows INSIGNEO to post seminar details of interest to its internal academic audience.

MESH mobile friendly website

MESH website, showing phone screen (left) and wide screen (right) MESH website, showing phone screen (left) and wide screen (right)

Following on from our last post (Websites for smart phones take centre stage) we’ve used a very slightly modified standard WordPress template to create a holding page for MESH – the ME Self Help website. This project will start in earnest later in 2013, and is intended to allow ME sufferers to record any changes in their symptoms in response to whatever treatment they are receiving.

The template follows the ‘mobile first’ philosophy, so smart phones users can see an interact with all of the site content.

Websites for smart phones take centre stage

Your website might not work well on smaller displays.

Since the start of the world wide web there has been a problem that the devices your visitor uses to view your website can be very different in their basic capacity for displaying your site. Over the last ten years this problem reduced, as visitors adopted a fairly standard ‘web-enabled-device’ configuration consisting of a desktop computer, with a ‘modern’ browser, and a screen of about 1200x800px in dimensions.

Over the last five years, however, this situation has started to change again with the growing popularity of mobile devices, such as tablets and smart phones:

Global internet usage through mobile devices, not including tablets*, has almost doubled to 8.5% in January 2012 from 4.3% last year according to free web analytics company StatCounter.

While the stats above indicate that we need to start paying attention to these small-screen devices, the actual numbers of mobile browsers out in the wild is probably greater than that of our traditional desktop driving visitor – but browsing the web on a phone is, lets face it, painful.

HTML5 to the rescue?

The widespread adoption of HTML5 – which is not a recognised standard – is in part because it allows web-designers to adapt their designs for smaller screens, to smoothly simplify their sites, so that it works on a smart phone.

This approach is not without problems – the main smart-phone vendors are well aware that to be any use their browser must do a reasonable job of a ‘traditional’ website, allowing visitors using their smart phone full access to the web.

Often web designers actually make their sites worse by hacking out bits to simplify the site. This is particularly true if we try and adapt our sites for tablets – our philosophy (CookandKaye) is that these have large enough screens to manage all but the most bloated web layout, so generally we would leave well alone! (This is also cheaper for you!)

WordPress 2012 theme – the web on its head

We use WordPress themes very extensively* – with a small amount of customisation they offer a solid entry-level website for many of our clients. We therefore follow the latest theme developments with a great deal of interest. Over the last couple of years WordPress templates have attempted, with moderate success, to scale their layout to the smaller screen.

The latest template, however, changes everything by designing for the small screen, and then ‘going large’ for desktop and tablet displays.

Above: Movie showing the ‘smartphone first’ approach to web design. It focuses on what you need on your page first, and makes this available to a small-screen display. This may then be enhanced in an all-singing and dancing large screen version**.

This really is a daring piece of design, taking on board the probability that in a relatively small space of time a lot of people’s main browser will be on their phone. This may already be the case with the traditional WordPress market – instant news from the blogs you follow should be available instantly, wherever you are, and on whatever device you have to hand (usually your phone). Where the cutting edge leads, however, it is likely that the rest of the web will follow. This may be a couple of years down the road, but still an important decision for a new website design.

The advantages of the new WordPress design are obvious – in focussing on the mobile site first, you help ensure that a mobile user has everything they need from your website. There are, however, a number of downsides:

  1. Without enhancement the site looks a bit minimalist on a traditional display (and with a better processor). Thus we still have a two layer design, adding background images and multi-column layouts where these can be appreciated on a larger screen. The second layer is activated using HTML5.
  2. The bugbear is, however, Internet Explorer (as ever). Unfortunately a lot of people out there are still using older versions of IE, and these don’t understand HTML5. As a consequence we need a third layer – essentially an entirely independent set of styling instructions for these dinosaurs.

The advantage of this design philosophy is that you only have one website to manage, and the clever 2012 theme delivers the appropriate styling for the device. The problem is that there is quite a lot of extra work required to follow this design practice.

Conclusions – where to with your website?

The WordPress 2012 theme is a great, future (and past) proof, all-round theme for basic sites. As long as you like grey, which is apparently the new black, again. If you can use it ‘as is’ – go for it!

Adapting the design philosophy to create bespoke sites will, however, add to the price (but probably not as much as a second mobile site). In deciding whether or not this is a good move for your business, you need to take into account the type of service you are offering. For many businesses and academic institutions, we expect the conversion to mobile browsing to be a bit behind the curve, so for a website lifespan of three to five years, the added cost may not be justified.

If you have an existing site, you can check on the numbers of people using mobile devices on your site now (if you have these statistics), and work out where you are on the adoption curve. This may well indicate that a competent mobile site must be considered essential.

======
* We are not alone in recommending WordPress for a lot of our work. It accounts for over half of all CMS driven websites, and one in six of ALL websites (Feb 2013 w3techs.com) (BACK)
** Now with HTML5 movies – these are rather larger than the old Flash movies, but can play on mobile devices, though prone to jitters as the graphics processor on mobile devices is very under-powered compared to desktop machines. This may be one reason Apple chose not to support Flash, as Flash movies have to be re-generated on the fly – making for tiny downloads, but lots of graphic processor work… (BACK)

New dive site pages for Lochaline Dive Centre

Screenshot of the new dive page.

The new dive site pages for Lochaline Dive Centre are now online – we first mentioned the update a little while ago, with the design of new icons to help sort dive sites into sensible groups for planning a diving holiday.

Dive Site Icons

Along with the dive icons, we’ve replaced the old Flash based map with a Google map, showing all of the dive sites in (more or less) their correct positions. We’ve also added 21 dive site pages – plenty of choice for divers looking for somewhere to dive on their holidays!

The sites and maps are all managed from a custom plugin we built that runs within the WordPress administration section. This converts a simple descriptive page for a site, adding a map and integrating it with the main/master map of local sites.

Wreck and scenic dive sites in the Sound of Mull

A Boy Was Born – a celebration of the work of Benjamin Britten

TUOS Concerts icon - a singing note

Our work involved upgrading a set of templates developed a few years ago in Joomla 1.6, and changing the slideshow on the home page from being Flash driven to a Javascript feature that is compatible with most modern mobile browsers.

Our client added new banners and content, along with a number of Spotify links so visitors can listen in to snippets of Britten’s work as teasers for the series of concerts to be held in Sheffield in 2013.

Above right: Icon design for the new site – a ‘singing note’ in Sheffield blue on a white ground.

Sprucing up an old site – upgrading to HTML5/CSS3

The C60 model was first developed for the Nanotechnology Masters program in 2007. The course was run jointly by the Universities of Leeds and Sheffield, and is sadly no longer available. An updated model of C60 or Buckminsterfullerene, that is compatible with mobile browsers, is available in our post:

3D modelling of C60 in Javascript/HTML

Saddle and Spurs website

Saddle and Spurs line dancing club logo

This site is based on a simplified WordPress 2011 template, to make it as easy as possible to manage. The template options have been reduced to single posts and pages, a blog view and an all-important photo gallery. The gallery is one of the strong points of the WordPress CMS – allowing the user to simply drag and drop photographs from their desktop into the post, WordPress does all of the donkey work of creating thumbnails and laying them out in the page.

The site features reactive design – permitting the page to scale between 300px and 1000px in width, with layout changes for narrower browser windows (narrow windows are usual for mobile devices, but if you have a desktop browser you can simply drag the window to re-size it and see how the layout changes). This feature is pretty much straight out of the WordPress template, keeping development costs down to a minimum, but still giving a nice, clean site that works across a range of platforms. As a nice addition, we’ve added two background graphics – in portrait and landscape formats – so that narrower windows have a more appropriately sized background image.

CSS3.2 Improved display on wide screens and mobile devices

This post follows on from “CSS3.1: The final depiction of the cards“.

Screen shots on displays from 3600px to 300px in width for the lochaline Dive Charters site.

Here we have adapted the styling to give an effective display on devices with widths between 300px (equivalent to a small mobile platform) to 3600px – a massive HD movie screen…

In this we are really dealing with two problems simultaneously – the screen resolution, which puts a limit on how small text and images can go before they are degraded beyond use, and the range of aspect ratios, which dictate how we lay the page out to make best use of the available screen real estate.

In the first instance we are treating this traditionally as a resolution problem, to be treated by evaluating the width of the display window in pixels, and reordering our offering accordingly. In as much as there is one, this appears to be the standard approach in the web0-design industry at the moment, and in our third iteration here, we will stick to this. In reality, however, the aspect ratio is the real issue with determining layout, and we’ll look at this again at the end of this instalment.

With very wide screens there is a problem with ‘letter boxing’; designed to display movies, the height of the screen is very much smaller than the width. For this type of display we have laid the cards out next to each other (top right – note that in reality this is the LARGEST of the three displays), and permit them to scale up to their full size of 900x600px. We tested this with an extreme case – actually using a twin head monitor system with an effective resolution of 3600x1080px, or an approximate aspect ratio of 3.5:1.

With most desktop and tablet screens the aspect ratio of the screen is about 1.5:1 – we want some spread in both width and height of the card distribution to make effective use of the space.

For narrow mobile devices we need to keep the text on the reverse of the cards legible, so the cards cannot be too small. To maximise the size of the cards in a narrow page, therefore, we stack them, as shown bottom right at near actual size. The bottom screen shot has a mouse cursor over the last card, showing that the text on the ‘reverse’ is quite readable.

Where it works

Screenshots of the design at different browser window widths are shown above right, at the top is the layout for windows greater than 1200px in width, then browsers between 1200px and 600px, and finally at the bottom is that for browsers between 600px and 300px in width.

If you view this site on a desktop browser (link below), you can have a bit of fun re-sizing your browser window* to see how the design adapts to changes in width. What you should see is a smooth change in scale of the postcards as change the width of the window. Periodically the layout will change, switching to make best use of the guessed aspect ratio.

* – Remember we are making no concessions to older browsers in this micro-site. If you are unlucky enough to be using an older browsers the postcards will have right angled corners and sit square on the page, and you’ll be stuck with just one layout (for the widest screen size).

Where it doesn’t work

To build a properly future-proofed responsive design we’ll need to tackle the display aspect ratio, rather than just guessing at this based on the width of the display window. At the moment what we do is adequate, but it only works because displays are pretty predictable. Displays where 1.5:1 aspect ratio’s equates to 3000 by 1500px are pretty few and far between BUT on one of these we’d end up with an inadequate looking page with all of our cards in a line along the top with a lot of white space below them…

For the moment this is unlikely, but the new ‘retina displays’ and similar technologies with very high pixel densities may prove to be game changers. A very high pixel density could result in the site switching to a wide screen layout, resulting in tiny, illegible cards as a border along the top of the browser window, and that will not win friends.

The new CSS3 recommendation, however, is equipped to permit us to ask about aspect ratios, so we’ll take a look at that next, to see if we can avoid the problem, and how well current browsers do this…

Articles in this series:

  1. Working with CSS3: the shape of the web to come the dive boat charter micro-site concept and sketch layout
  2. CSS3.1: The final depiction of the cards showing the basic layout of the cards. The layout here copes with displays between 300px and 1200px wide. Wider displays leave the site stranded in the centre of the page see: CSS3.1 : Dive boat charters test site v1
  3. THIS ARTICLE CSS3.2 Improved display on wide screens and mobile devices working with very wide displays using industry standard techniques, and looking at how we might future proof the design