scientific and technical website design projects news

We’ll start with a real webdesign conundrum: How do you build a site that is interesting, but does not overload my server, your data-connection, or your device’s processing capability. I guess you might also appreciate my not using up all of this months data allowance too!

Here I have built a large-ish graphic using the block printing concept; a concept I first encountered on the mugs my mother owned in the 60’s. The design is generated by repeating three simple graphical elements. When you click the ‘Grow, damn you!’ link these are assembled in a step-wise fashion to generate a pseudo random pattern. I believe there are 274 million different final designs possible (see wikihow.com); most permutations look OK, though some are more visually interesting than others.

Does it work? Well, if you have read this far, then yes! Putting this into numbers for comparison; the code required to generate the block-print comes in at under 4kB. The photograph shown below comes in at 44kB…

I think both images are quite pleasing; clearly they would serve very different roles in a website, and would be used in different circumstances. When a technique like this is appropriate, however, you can enhance your visitor’s experience, at minimal cost to yourself OR to your visitor (what is not to like?)*

If you like the design you have generated you can get it printed on a mug at the T shirt Studio (link below), but you will need to zoom in on the graphic (it is SVG, so you can zoom the page as much as you need without it pixelating – this will not work for the photograph;-), and grab a screenshot first – as the design will (almost certainly) be different the next time you visit!

tshirtstudio (other online printers are available).

* Custom art is ALWAYS expensive to create; the saving is in ensuring your server gets pages to more (up to 10× more) potential visitors (customers?) for the same infrastructure cost!

Part of our remit for designing the Spine repair training website (SPINNER) was to develop a new logo and icon for them. Their initial ideas had focussed on a web spinner in medical greens – which was quite attractive, and reflected the name of the programme, but not its role…

We therefore looked at introducing a more’spinal’ quality to the logo design: Our initial design sheet investigated using ‘s’ shaped spine as the initial ‘S’ in spinner, printing the spinner name with each letter on a separate vertebra, and placing the initial ‘S’ on a single vertebra.

Through discussion with the client, and many itterations, we came to the final design, in which the spine is used as the body of the ‘i’, with the dot at the head.

Above: the final version of the SPINNER logo.

The logo was built as a vector format (SVG) image, and is used on all pages of the site. The logo is also used in the site icon, and the apple-touch-icon. The best format for the latter is a subject of some debate amongst web professionals (see Apple touch icon: The Good, the Bad and the Ugly from Favicon’s blog), we create a 120x120px square icon as a standard for our website clients.

The vector format allows us to scale the image without distortion, permitting us to easily create versions for high resolution print work.

With the expected demise of Flash as a vector graphics and animation platform for the web we have been looking at a few alternatives for some of our ‘fun’ projects. One of these was a simple 3D animator for Protein Data Base (.pdb) files. This widely used format provides XYZ coordinate data for molecules, and in our early Flash based models we translated these coordinates into something that sensibly fitted onto your display, and applied 3D transform matrices to allow you to manipulate the ‘molecule’, with each atom rendered as a simple disc.

Given the simplicity of the system, it seemed obvious to translate the code into Javascript. Indeed, we had the added advantage that we could render each ‘atom’ as a HTML primitive with CSS3 gradient shading to give it the appearance of 3 dimensions. As a result, there is no need for vector graphics or little .gif or .png images for each atom.

As you can see above, in our model of Buckminsterfullerene or C60, the process can be quite effective – simply roll your mouse across the model (or swipe your finger if you are on a mobile device) to rotate it. It has to be stated that this process is less effective for larger molecules. We could effectively animate and control molecules with up to 250 ‘atoms’ in Flash, the number is rather lower in HTML/Javascript, perhaps 100 atoms or points being a sensible practical limit, beyond which the model becomes unresponsive.

Older posts in this category have been removed, as the technology they relied on is no-longer available.

Above – three from a set of twenty icons indicating types of dive site for Lochaline Dive Centre. The image shows the initial sketches, used to check concept art with the client, and the final icon. The final icons reflect the site colour scheme, and the the wreck dive icon is based closely upon the Dive Centre logo to reinforce brand image.

New dive site pages being prepared to extend the current single page description of sites in the Sound of Mull (linked below) – which will become the diving home page with map and links to all sites. The plan is that visitors will be able to click icons to visit all sites of that type, simplifying the job of planning a sequence of dives.

The client will be able to select the appropriate icons from the WordPress control panel, and add a map position for the dive site, making it very easy to add and update sites.

Diving the Sound of Mull / Lochaline Dive Centre

Recently we set up Twitter and Facebook accounts for the local Marine Conservation Society (Lancashire MCS), and as part of this process we wanted some graphics for page backgrounds. My immediate design idea was to create line art of rolling waves that would tile seamlessly across the page. The best line art waves that I am familiar with come from Japanese art – so a little web hunt was in order to get some background, and see how the masters had tackled the subject.

The image that I dimly remembered was by Hokusai, from a print called the ‘Great Wave off Kanagawa’ (see Hokusai’s Wikipedia entry for more background, and a reproduction of the original print). This is really quite a masterful depiction of a breaking wave, and just a little research will show that it has been reproduced and changed countless times by different people.

As the first stage of creating the tiling background I worked very closely with the original in Flash, my preferred vector art package, to create the image shown above. The form of the wave has been retained, with simplification of the foam, which I feel is only partially successful. The main changes are to the sky – using diagonal hatching to suggest rain. I also removed the reference to mount Fuji, and while a view of the Lake District hills might have been nice, it would have been an interesting tiling problem!

During the development, however, we switched direction with the art-work, and went for a simple underwater photograph – so the line-art became redundant. As the image is rather nice, however, I worked up the concept as the simple circular icon shown (click for larger version).

If you are interested the social network pages are:

facebook.com/MCSLancs

twitter.com/mcslancs

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…

From our post on ‘Monopoles in magnetic ice‘ you might have worked out that we are currently developing research features for Nanofolio. The current project is targeted drug release, a technique which uses a smart polymer to unlock the cell’s endosomes, releasing a drug into the cytoplasm which would otherwise be destroyed by the cell’s defense mechanisms.

This is a development sketch from the last animation in the feature – it is the first design to be finalised, however, as we will need to re-use graphics from this animation earlier in the feature (which will probably have 3 animations in total, the others detailing how the endosome and the smart polymer work).

At the top we have a motif for the polymer – drug complex, this has to be recognisable at small scale, and we’re looking at a simple ‘dragon and ball’ sketch for this purpose. The ball in this is the drug – in this case Apoptin, and at large scale we need to make it clear that it is a functional moiety. We’ll do this with a manga-esque decal. We looked at two options – a skull and a daemon head. The skull is kind of appropriate, as Apoptin is a cell killer; but it is quite specific to tumour cells, so we though the simple death’s head didn’t really get over the fact that the drug itself is quite smart! So, we’re looking at a daemon’s head for the final production – this is a Classical Greek helmet affair – and we’ll probably go with electric blue clouration, to emphasise that it is (potentially) ‘one of the good guys’.

The drug-polymer complex is taken into the cell in an endosome, and it is pH changes in this that trigger the smart polymer to shatter the endosome membrane. As pH is not visible, we need to represent this easily to visitors. One option is ‘Universal Indicator Paper’ style colour change, but this might not mean much to a lot of people, as well as being rather too crude – the smart polymer switches on at only just below serum pH levels. To get round this we’re going to display the pH on a little meter attached to the endosome. The meter is likely to get in the way of the apoptin release when that occurs, so we’ve also got a little transition, switching sides for the meter if necessary, so the action is clear…

Now all we have to do is make it all work!

You can see other (completed) research features in nanotechnology on the Nanofolio website:

Nanotechnology research features on Nanofolio

A single image from a modern camera (5+ mega-pixels) has a file-size equivalent to 50-100 text pages. Not unsurprisingly, therefore, the use of large images can slow your web-pages down to a crawl. Thankfully you don’t need large images to decorate a web page, your photos will be so much larger even than the largest modern displays, that putting them up full-size will normally just be a waste of time…

Right: ShrinkPic automatically reduces image sizes – the default setting has reduced the 3.6MB original to 85kB, which is easily handled by WordPress, where I’ve processed to a 150px square thumbnail. Click image for 800×600 full uploaded file-size.

The problem is then, how do you get the file size down? For a long time we have recommended IrfanView as a free (PC based) image processor, for cropping and re-sizing images for use online. While pretty straightforward, this package does need a little practice to use it effectively, so is not ideal for many people managing CMS systems, for whom the occasional image can be a bit of a nightmare…

Shrink Pic is ideal for anyone who finds image management on the web a nightmare!

Over Christmas we became aware of Shrink Pic, a new system that shrinks photos automatically when you upload them (via LifeHacker). So, is this solution going to work for you?

• First up, the software only runs on PC’s. We are not aware at present of an equivalent program for Macs or Linux.
• The basic premise of the software is that it runs in the background, and automatically re-sizes and compresses any image you want to upload to a website (Flickr, your blog, CMS etc.) – or email – before it is sent.
• You can set your default image sizes or set the amount of compression to fit a file size range (as I did here).
• Your original image is not changed.

What the software does not do is edit your images. The most recent versions of WordPress will allow you to do a bit more fine tuning after the upload – cropping and creating thumbnails. If you need to process your pictures, then you should look at doing this BEFORE uploading, in which case you might as well resize ready for upload, so you may not need Shrink Pic.

If you are want large images on your website (larger than 1000px in any dimension), then you should look at more advanced processing packages to optimise them.

Conclusion: this software is really easy to use, and I was pleasantly surprised at how well it works with WordPress here!

Resource links:

OnTheGoSoft’s Shrink Pic

For free hands-on image processing:

IrfanView

Latest – image makes cover of Macromolecular Rapid Communications (Sept. 2011)

Above a still from the movie depicting the directed diffusion of polymer molecules across a surface energy gradient

The movie was prepared by CookandKaye website design, working directly from preprints of the authors’ scientific manuscript. The movie was released to coincide with the paper’s publication and extensive publicity by the Unviersity of Sheffield (see for example Step Forward For Nanotechnology: Controlled Movement Of Molecules in Science Daily)

The interactive movie uses a stylised polymer chain to depict the actual movement inferred by the research workers from a wide range of nanoscale analytical techniques. Visitors to the site can click through the stages showing adsorption of hte polymer to a hydrophobic surface, followed by directed diffusion towards the hydrophilic surface, and finally desorption back into aqueous solution. At each stage the polymer experiences a different degree of constraint upon its movement, which was reflected in the motion of the stylised chain in the movie. To investigate the final movie, please visit the link below to Dr Mark Geoghegan’s website:

Directed diffusion across a surface energy gradient

Reference: P. Burgos, Z. Zhang, R. Golestanian, G. J. Leggett, and M. Geoghegan “Directed single molecule diffusion triggered by surface energy gradients” ACS Nano 3 3235-43 (2009).

The new Polymer Centre research map has been built on an existing staff CMS that stores keywords and a précis of information about staff research interests. To create the map the keywords were first grouped into superordinate terms – for example the keywords ‘Rheology’ and ‘Optical properties’ falls under the generic class of ‘Polymer Analysis’ (or just Analysis).

To make the system as flexible as possible, the link between keywords and superordinate terms is done through a ‘plug board’ programming interface. In this, each keyword is assigned to a number of generic categories through selecting check boxes – easy!

The results are stored in a MySQL database, and this is used to power the research map itself. On first sight the map provides a coarse list of the superordinate terms – polymer analysis, characterisation and so on. On selecting one of these terms the list expands to show the relevant keywords. The keywords can in turn be expanded to display the names of research staff engaged in the work of interest.

The system therefore offers a simple visitor interface that can be quickly and intuitively navigated to find the information of interest. It offers a great advantage over an empty search box on one vital respect – it always offers the visitor a positive result! Not all sites have Google-like resources, and using a controlled language of keywords in this way allows us to guide a visitor to what we have, rather than their getting lots of failed searches.

While the research map offers visitors a neat tool for finding the information they want, it is also an engine to help ensure that search engines can tie our keywords to content on the Polymer Centre website. To do this, the meta content on each of the staff pages contains the same keywords they are associated with in the database.

In addition, however, the meta content of the research map itself is served dynamically. The page title, description and keywords are updated to reflect the level of the map that is being examined. Thus if you have opened a keyword, that keyword and the associated staff appear in the appropriate meta content sections of the research map page. As these sections are important to search engines in ascertaining the important content of a page, this design helps to ensure that the information the Polymer Centre carries about polymer research and near market activity is readily available on the world wide web.