Articles on website design

This post follows on from “Working with CSS3: the shape of the web to come“.

Whilst it is the final state of the postcard scatter, it is the first stage of realising the overall design. Here we aim for a static layout matching the our original design sketch. There is no animation leading to the final design, and the layout is static, though the images are set at a high enough resolution to allow us to scale to larger displays later.

This stage is the most important for the micro-site, as it is the one that gets our message over to visitors. To achieve these aims we used the following CSS3 markup:

transform: rotation(); This permits us to place our rectangular cards at different angles. This syntax used with prefixes (-webkit- -ms- -moz- etc.) worked reproducibly all current browsers

border-radius: ; Giving the postcards rounded corners – not strictly essential to the effect we were looking for, but throws up some interesting exceptions. The radius applied to a parent div is not automatically applied to children in all browsers – in this instance we have a .postcard, which defines the block where the postcard content lives, and has a drop shadow (box-shadow) applied to it. Within this is the actual photograph (img). In Firefox this also has the border radius applied, in Chrome you have to apply the border-radius again to the img, even though it is a child element.

box-shadow: ; This allows us to have elements drop a shadow behind them, all browsers work will even though a border radius is applied to the postcards. If the shadow is offset, so the shadow appears to the bottom right of the object casting it, to give the impression of a casting light above and to the left of the object, the shadow painted is a solid block of colour. As we have underlying postcard(s), this is quite unsightly. There is no option for making the shadow transparent in CSS3 (it does not appear to be possible to specify colour as ‘rgba ‘etc.). To get round this the shadows are given zero width, but 5px feathering – which is semi transparent, and gives us an acceptable appearance for the end-state of the images.

Interaction using the :hover and :active states

The interaction needs to be really intuitive – none of our text is visible to the visitor when they arrive, and we are reliant on the appearance to suggest that more is available: When you receive a postcard you expect a message on the back, but online you can’t physically flip the cards over…

To get a simple and immediate interaction we use the :hover and :active states that were originally designed for web-links (anchors) – when you hover your mouse over a web-link it (usually) changes colour or form to indicate that there is a link present (and not just some underlined or funny-coloured text). A similar ‘active’ state indicates that you have clicked the link, and the browser is trying to find the resource you’ve asked for (strictly the W3C standard for CSS2 states that the active state persists from the time that you click on an element to the time that you release the mouse button).

Whilst usually used for anchors, it has been possible to use :hover and :active states for all elements (not just links or anchors) for a number of years, but implementation is still a bit variable across browsers. Our first attempt, setting the hover states to bring postcards to the top of the pile by changin their z-index worked well in all browsers. Using the :active state to ‘reverse’ the card worked as expected only in Firefox, however – see the analysis below…

Font choice

While not strictly CSS3, recent developments have made a large number of fonts widely available for free use on the web. Here we’ve used the font ‘Bilbo’ by TypeSETit (available through google.com/webfonts/). This is a pretty good script font that does not look out-of-place on the back of a postcard – if you were to take time to make your postcard legible!

Fonts do make downloads a little slower, and you may spot a flicker in the font when you load the page, moving from your standard cursive font face to Bilbo, particularly if you are on a slow internet connection.

Micro-site analysis

Bear in mind that we are not doing anything to make this micro-site compatible with older browsers, you can see our initial site at lochalinediveboats.co.uk/bak01.html (this URL will be updated as improved versions of the micro-site are completed), and as a very much reduced scale screen-shot above right.

• The layout for our first attempt works fine in all current browsers.
• All browsers bring cards to the front when your mouse (or finger) hovers over them
• Only Firefox (v.13.0.1) displays the reverse side for the card using the simple anchor active: selector.
• The active state in Chrome (20.0.1132.57 m) shows the reverse side of the card the first time the active state is called, but not subsequently – unless you right click then left click…
• IE9, Safari (5.1.7), Opera (12) and Webkit browsers do not show the active state at all

The problem we have encountered here is with CSS2, not CSS3. My reading of the W3C guidelines indicate that the active state is being correctly implemented in Firefox, but not the other browsers. With touch screen browsers, however, it is not entirely clear how the active state would be initiated as there is no activating mouse button on your finger, so clearly this aspect of our design will need to be re-thought…

Update 26th July 2012: Clearly we needed to change so that the card ‘reversed’ in the hover state, rather than the active state, and this, with a little tidying of the CSS now works in all current browsers (including on mobile devices), giving us our starting point for the rest of the development.

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. THIS ARTICLE 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. 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

The new features available in CSS3 are increasingly important to web designers. A number of our sites now offer flexible templates, that change the layout of a page for hand-held devices, improved background control properties to paste an image over the entire device screen; elsewhere on the web drop-shadows and embossed text are now very popular…

Our new micro-site for Lochaline Dive Centre, however, offers us the opportunity to be a bit more relaxed about the way we approach CSS3. A pure advertising site, this is aimed at casual visitors, rather than committed customers, to increase the profile of the dive charter boat service available from the Centre. If the site falls over for a few visitors, it is no big deal, we are looking to make an impression on people using up-to-date tech… So what eye-candy can we throw at them, and what lessons do we learn about CSS3 in the process of creating the site?

Planning our CSS3 test site

Design concept: A set of postcards, featuring the dive boat charter services offered by Lochaline Dive Centre, scattered onto the browser window.

Interaction: Visitors must be able to intuitively interact with each image – bringing any card to the front to view the image, and reverse the card to read the message on the reverse.

Universal media: The layout and scale of the cards should change to reflect the size of the browser ‘stage’ available to the web-page.

Animation: When the page loads the postcards should be off-screen. They should then float into the browser window, as though dealt one by one onto the screen.

The question is, how much of this can we do with the new CSS3 markup, and how much will we have to look to the programming layer (Javascript) to achieve the effect we want?

The project is being built in a number of iterations, so there is some interest in seeing how many of these targets we can hit just using CSS3, and how many compromises we are obliged to make in our original design concept…

Anecdote: The original design (above) is on paper, which I still find to be the fastest way of laying out an idea. In annotating it for this post, I made a mistake (looks like ‘ZP’) – my immediate reaction was to look for CTRL-Z to undo this. Our expectations from a digital world encroach on ‘the real’.

CSS3.1 – the next post with the layout of the post cards

If you are interested in diving some of the great wreck sites in the Sound of Mull, you can check out Lochaline Dive Centre’s main website at:

Lochaline Dive Centre – dive boat charters

Articles in this series:

1. THIS ARTICLE 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. 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

WordPress has just released a new version, the major changes (and there are a lot!) are to theme customization, and we will be building these into new themes for our clients from now on!

The update is quite significant, but does not appear to address any security issues, so it is not critical to operation. We have tested the update on two sites today (including this one), and it has run without problems. We will watch out for any security patches over the next few days, then update existing clients sites as a matter of course.

More details about the release are available directly through WordPress:

WordPress 3.4 “Green”

Our latest site is for UK Semiconductors 2012, an annual conference on all aspects of semiconductor research.

The brief for UK Semiconductors was for a site that would be flexible, but easy to manage. Both requirements are met by the WordPress Content Management System (CMS).

Ease of use: There are a lot of very powerful CMS systems available, but most have a steep learning curve. This is a serious problem for a conference site, where you are only actively editing the site for part of each year – you don’t want to spend a lot of time trying to remember how things work! WordPress’ simple visual editing system permits live WYSIWYG editing of existing pages, the excellent news management system is totally intuitive (simply stacking new news items on top of older ones!); finally, the simple visual menu builder (drag and drop new pages to where you want them in the menu) is child’s play…

Above right: UK Semiconductors website on a full width display, showing sponsors’ logos along the foot of the page (click for full size image).

Speed and flexibility: For an annual conference there is a need to be able to switch much of the furniture from one year to the next – adapting the 2011 templates permitted us to offer the flexibility to upload a new banner (or offer a random banner from a selection, your choice!). Whilst adapting a standard template offered less scope for innovative design, it also really speeds up the development process, enabling us to get from kick-off meeting to completed site in a week…

Device flexibility: It is valuable for a conference site to be flexible – you want delegates to be able to check out what is going on during the conference, be able to check the program on their smart phones during the event. UK Semiconductors re-organises its page structure to permit visitors to view the site without scaling or lateral scrolling on devices with displays that are only 400px wide.

Right: UK Semiconductors website on a 400px wide display. The banner has re-sized to fit the new width, and the calendar and news items now appear below the main article, so all elements of the page can be read easily without scrolling (or squinting!)

Additional functionality: To complete the site, we also added a couple of custom plugins. These allow the conference organiser to add a gallery of sponsor’s logos below each page of the site, and to add a simple calendar of events, so delegates have a quick reminder of what is coming up on each page of the site. (WordPress is easy to build for, if what you need is not available from a massive public library of free and commercial plugins, so there is no need to compromise!).

Visit: UK Semiconductors 2012 for more details about the conference, or to see the site in action.

SMARTdiving conducted a feasibility study into sinking a decommissioned Royal Navy Frigate in the Sound of Mull. This was a really exciting project, partially because it raised a lot of issues, wqith a range of different stake-holders, which were covered on the project website.

The site itself was a variation on the current WordPress standard template – ‘twentyeleven’, which features a lot of really nice tricks straight out of the box. It was chosen to allow the client to use all of the features of WordPress to take on board comments and post progress reports. This will be an important part of the project as keeping divers and the local community informed and on side is vital to the project’s success.

Above right: We designed the icon (shown above right) and the banner for SMARTdiving site.

One of the interesting challenges has been to keep the twentyeleven flexible templates working through the design changes. The new templates are all HTML5, and make use of this to offer offer is mobile support, so the site automatically ‘appifies’ to display on iPods, Androids and RIM machines (other devices are available – the system relies on the device screen width, rather than being specific to any operating system). Being an old hand it is easy to forget and insert template images with fixed widths (previously best practice), w/o catching them in percentages in the stylesheet, that will allow them to shrink in proportion to the rest of the site when it is displayed on a small screen…

Anyway, the hope and expectation is that the new artificial reef will contribute an interesting and exciting new site for divers, and so bring additional employment to this part of the West Coast of Scotland. Having previously studied some of the existing sites in the Sound, I was particularly interested in how the site would have been colonised by marine life, and how this process influences the deterioration of the structure.

If successful, the project would have increased tourism to the area, as well as providing  a fascinating modern comparison to the existing wreck sites in the Sound.

The Chemistry Map of Scotland was built for the Royal Society of Chemistry as part of their International Year of Chemistry celebration (2011). It was presented at the Science and the Parliament meeting in Edinburgh on Wednesday 9 November 2011 (our previous blog post).

The purpose of the site is to encourage school children to explore the chemistry by looking at how it impacts their local area. I had thought it would be mostly a historic project, but the children’s submissions show that it is anything but – they see chemistry as very much a part of a living and working landscape; the local galvanising works, offshore wind-farms and whiskey distilleries are at least as important as the work of Joseph Black (1728 – 1799)!

The site design is very simple, you won’t get lost anywhere here! We are particularly proud of the logo – even if it does conflate a couple of stereotypes – the thistle (for Scotland) and the benzene ring (for chemistry). The logo was designed to inject a bit of fun and movement into the site, along with the defiantly off-square page corners! In discussion with the client we selected the ‘Short Stack’ font by James Grieshaber, one of the free Google Web Fonts. The font is quirky, friendly without being MS Comic Sans, which has been rather over-exposed.

At the start of the project it was evident that Google were bringing in new charging policies for the use of mapping, so we chose to look at the Open Source alternative. The mapping program we used is OpenLayers, while the base mapping is provided by OpenStreetMap. OpenLayers can use any base mapping (for example Google, Bing or the Ordnance Survey) or satellite/aerial photography layers (Google and Bing are the most commonly seen examples on the web). This choice provides a great deal of flexibility to the project, as mapping sources can be changed as need or expediency dictate.

The public site provides an interactive map with clickable icons leading to students essays (stored in PDF format, to simplify administration). It also has a smart search facility, automatically checking date ranges for articles if a number is input (again my preconception that most of the content would be historic – but it is nice to see what chemistry was going on in Scotland in the year 1850). When search results are displayed they automatically update the thumbnail map, so it centres on the relevant place as your cursor hovers over each result.

We re-visit the Cookies debate with this site. Cookies enable us to create bookmarks to previously viewed pages for you, making it easy to jump between different essays on the same subject (or whatever you like!). Here we looked at an explicit permission system, as required by European Law – you have to click before we can create a cookie. This is the most satisfactory (and legally correct) way of dealing with this problem, which we have previously addressed. Mixed messages are coming from government though, so despite the fact that there is a lot of good in this law for the e-proles, it seems increasingly unlikely that the UK will ever enforce it.

Finally, the site is driven by a custom administration interface, permitting the RSC to add and edit points on the map. Hopefully this will ensure that the site can be kept going and expanding for a long time to come…

Visit the Chemistry Map of Scotland

We’re currently working on a website for the Sound of Mull Artificial Reef Trust – a new project to establish an artificial reef in the Sound of Mull. The aim of this multi-million pound project is to sink a decommissioned Royal Naval destroyer in the Sound to act as a tourist attraction for the whole region.

As well as providing an economic boost to an area, artificial reefs have a pretty good environmental record, so we’re pleased to be involved! The main site is being held back whilst negotiations proceed, but you can register your interest in the project now through the link below:

SMARTdiving, the Sound of Mull Artificial Reef Project

Social media are the in thing – within a certain sector of the population. In planning your social media campaign it is important to work out what your market is using, as this might be quite different from the social-networking tools that you employ. For example, we run a twitter feed for one of our academic clients, that has a high take up amongst both existing and (more importantly) potential students, but no significant penetration in the staff cadre. It is potentially very useful, but not too easy to sell (see Nanofolio‘s twitter feed).

A big question for commercial sites is does having an active social media presence boost your site presence on the search engines? – The jury is still out on this. It certainly does not offer incremental improvement, but Google at least is aware of social media activity associated with your site, and does count links from Tweets to your pages – whether or not it gives them much credence is another matter! The latest upgrade to Twitter, however, allows you to add a photo to your Tweet, and makes this an attractive shop window for products in its own right (see Mobility Nationwide‘s Twitter feed)…

A big use of Twitter for many years has been the conference circuit; creating a Twitter #tag for your conference allows delegates to provide feedback in real time, and contributes to both academic debate and networking amongst delegates. At least it should, as Chad Orzel comments on his blog (the post that spurred me into writing this!):

Social Media Are Not Evenly Distributed

We’ve just started work on a multi-lingual site, where the entire site is duplicated in English and French (rather than just a summary in the ‘non-target’ language). This has a basic requirement to offer pages in either language with a seemless transition if required, and one of the simplest ways for doing this is to ask the visitor what language they want to read the site in, and then remember their answer. It is the remembering part where we run into trouble; because the visitor is only identified by their IP address, which can change, we ask to save a token on the visitor’s machine called a cookie. When they ask for a page from our site they also present this cookie, which we can use this to make a connection between them and and data we have stored about them – in this case what language they want their page in!

Informer : c’est obligatoire ! [CNIL]

In May we posted The cookie crumbles, so we thought it worth while re-visiting the question in advance of our new contract to see what has changed. Most of Europe has yet to implement the directive, but the French CNIL has moved to post clear requirements for website owners (OK they look to be clear with my understanding of French and the use of Google Translate!). In contrast the UK’s position is quite muddy; in attempting to protect the online advertising industry the government seems to have left ICO in a cleft stick, with the requirement to implement without changing anything.

ICO have had a bit of a go on their own website, as you can see from the banner image below (captured from their site August 25 2011):

The ICO’s website informs you that they’ve already stored one cookie on your browser, and they’d like to store more. This is done in a text message over the banner of their site. Once you’ve said that you will accept cookies from them they use this information to hide the message from you on other pages on their site (until you delete the cookie).

This process is rather clumsy for a commercial website. Lets face it, I want to let you read the site in your language, so slapping a legal notice accross the head of the site is massive case of over-kill. In essence the legal warning informs you that I’m out to steal all of your private information and sell your soul to the devil. For the moment, where we are obliged to use cookies, our procedure will remain unchanged, with a notice at the point of language selection (in this instance) – possibly with a link to extended description of what we use the cookie for and how to set your browser so that you cannot read the site in the language of your choice (as per CNIL).

References

A useful roundup of current positions across Europe is provided by Norton Rose, which links to the CNIL guidance:

Norton Rose.

CNIL website at selection point for type of organisation requiring legal advice.

Information Commissioner’s Office website.

Flash is probably the most maligned bit of software on the web, most recently being excluded from Apple’s mobile platforms (iPod/iPhone and iPad), as a security risk (though as it also competes directly with ‘apps’, Apple gains a commercial advantage in banning it from the platform). As it is no-longer able to reach all browsers, we have been forced to review our own association with Flash, an association that goes back to version 3 in 1999…

First, it is important to understand why we got involved with developing Flash applications in the first place. Back in ’99 it was just becoming popular to have a phone modem: Capable of transfer rates of up to 56kB/s, these devices restricted the desirable size of a web page to a total of 20kB – and that included your images! If you could get under this magic number you could more-or-less guarantee that your visitor would get the home page of your site within a second of making the request. This placed a premium on tiny, grainy graphics with the life compressed out of them.

Anything that allowed you to fill the screen with colour and movement was simply a killer app., and that killer app. was Macromedia’s Flash. Working in a vector graphic format to keep the download file size small, simple tweening algorithms allowed you to move graphics about within the Flash player window, and respond to mouse commands. As a quick comparison, a recent site banner we’ve designed has a total file size of 4.57kB in Flash, compared to 24.9kB as a compressed bitmap graphic. We can beat the 1999 total web-page download size rule with ease! In addition to a fast download, however, Flash offered the opportunity to stream your download – this means that you could put something simple up quickly, and download bigger files in the background – and so the loading screen was born…

From 1999 to the present Flash has been a stable platform for images, animation and interactives – very much more so than the HTML standard (or lack of it) offered by different browser incarnations! This is important as the development of interactive media is undoubtedly one of the most expensive parts of your website, as long as a browser offered Flash we could get content out to it and expect it to behave in a reproducible manner. It is only with ‘Web 2’ that Javascript has offered the same level of dependability and some of the interactive capability. Prior to 2006, adding any significant amount of Javascript to a website to allow core functionality simply increased the cost of developing it, as it had to be tested in every browser that your visitor might use. Commonly Javascript development multiplied the cost of a ‘simple’ site by a factor of 2 or 3; Flash was cheap by comparison!

As a killer app. Flash is used everywhere on the web, and familiarity has bred contempt: Far from being a sign of something exciting to come, the loading screen is the kiss of death for many websites whose designers have not realised that the rotating whirly wotsit and the message ‘please wait…’ is not what most visitors want to see! Plus the banner (and skyscraper and pop-up) advertisement. They pay for the content you are looking at, but you don’t want to see them, we browse with NoScript turned on to stop these things downloading stuff we don’t want onto our computer.

But has Flash evolved over this time? – Is it still just a way of making clean graphics with tiny download sizes? Behind the scenes Flash has evolved, slowly. Its scripting engine has undergone three significant overhauls, each of which has imposed significant learning barriers to existing developers. At the end of this process, however, it does not have anything better than the most primitive 3D support. It has lost its capability as a document reader (FlashPaper). Due to its long term stability as a platform, solid set of video compression codecs and progressive download capability, however, it has taken centre stage as the app of choice for launching video.

How much of a future does Flash have as a web platform? HTML5 offers many of the abilities that were Flash’s killer apps: Vector graphics and progressive video download, at the moment these are supplementary to the Flash object, but are likely to compete more aggressively as HTML5 becomes an accepted standard (it is worth noting that there is no HTML5 standard yet, though there is agreement on what a lot of this standard should look like when it is completed!).

A lot will depend on Adobe’s commitment to keeping Flash going. Here the commercial analysis is pretty straight-forward: The Flash player that works in people’s browsers is paid for by Flash developers buying the application that creates Flash content, so if developers start looking at alternatives in significant numbers, then the writing is on the wall… Is Adobe doing enough to keep us on side, is Flash still the killer app?

There is some good news: A recent hook-up between Google and Adobe carried out very extensive security tests on Flash as it is deployed in the field. This has resulted in some important security updates for Flash Player over the last week or two (so if you get the notice to upgrade your version of Flash player – do so!). Will this be as secure as the HTML5 enabled browser? – A visible commitment to testing for vulnerabilities is a good sign for the moment, but might the Flash development application make a move to authoring HTML5 directly? – That would be a very interesting development, and one that looks to be under consideration, judging by Adobe’s Wallaby and Google’s Swiffy projects…