Resize Magic

Coming from a programming rather than design background, I always like seeing technical solutions for design related problems. Often automating is not as good as doing things manually – optimising JPEGs to minimise the size while not noticeably reducing quality is never perfect when you do batch conversions – but solutions like the one shown in this video are pretty cool.

Via TechCrunch and The Guardian

Firefox on the rise

Usage statsIn one of my occasional trawls through our usage statistics I noticed that Firefox usage has been rising quite slowly over the last six months but shot up in the last month or so. Firefox usage is now over 10% compared with 8.3% just a month ago. Safari usage has also crept up and is now over 2%.

These figures are for the main website and it’s interesting to see how it’s different for specific sites. The Hi Applicant Community has over 20% Firefox usage (although this has dropped a little over the last month – at one point it was 28%) showing that adoption of alternative browsers amongst college students is higher. The Edge Hill Job Vacancies site is lower than the rest of the corporate site.

For Internet Explorer, Microsoft can be glad that adoption of IE 7 has increased 5% in the last month which goes a little way to compensate for the fact Firefox and Safari are eating away at their lead. Usage of IE 7 should overtake IE6 in the next month.

What does all this mean? Well, not a huge amount really. Only a tiny proportion of users aren’t using A-grade browsers and even then, our sites are designed to degrade gracefully. More interesting is the general trend that more people are prepared to look for alternatives to the default installed IE and hopefully in doing so will speed up the adoption of things like RSS feeds and Microformats, when they get built into the browsers.

Picture This

As a Web Designer I’ve been considering how we can improve the images used on the Edge Hill website as part of the ‘Big Brief’ project soon to be undertaken (which will look at a holistic approach to our communications). We currently have a wide selection of strong, professional photography. However they have mainly been commissioned for print based media, and we often
have to do a lot of work to make the images ‘work’ on the website.

When you transfer high resolution images to low resolution web-ready images, you can lose a lot of detail from the picture. Ideally I’d like for us to be able to compose pictures differently for the web as individual portraits or pictures of small student groups against an uncluttered backdrop work great online.

Reportage Style Images

Currently the majority of our images are in a “Reportage” style, by this I mean images of Students going about the business of being Students, without acknowledging the presence of the photographer. The images are natural, but they are posed, it is unethical to have a photographer hiding in the bushes!

These kinds of images are great for general purpose use, and they give a good impression of everyday life on the campus. The trouble when it comes to working with them in electronic format they are often inflexible.

Another thing that is noticeable is how quickly an image can date, furry body-warmers and Ugg Boots are very last year, and students notice these things.

As a result we really need to be constantly commissioning fresh imagery.

Portraits

Moving forward I’d like to see us having more posed portraits of students on the website, especially for areas where we are promoting Edge Hill to prospective students, and not simply providing campus information.

I am impressed by the Northumbria University site, which has a series of large group shots of students in rotation on the homepage. I think that the images have an aura of ambition and coolness, and reflect the atmosphere of Newcastle.

I don’t necessarily think this style would suit Edge Hill though, the Indie band style poses could be intimidating for some potential applicants but we could maybe consider something a little more upbeat and friendly?!

Adaptable Portraits

Like a lot of designers I tend to use Stock Imagery, this is mainly for speed and convenience. A lot of Stock Photos come on white backgrounds so that they can be quickly pasted on other coloured backgrounds or into a pictorial setting. They can also be used along side typography.

Of course a lot of stock portraits are awfully cheesy and blatantly American, so I’m sure we’d want to create our own adaptable portraits.

One of the main problems I have with tracing the images that we currently have is that they are often cropped in annoying places, an elbow is missing or the top of someone’s head is cut off, unless I create an airbrushed hairstyle in Photoshop, the portrait however attractive, is unusable.

Ideally I’d like to see us commission some images specifically composed to be used against various backdrops.

Subject Specific Imagery

We have some excellent subject specific portraits in some of our printed publications, but none that can be adapted well for the web. We have some fantastic pictures from the Department of Performing Arts, but we have hardly any for The Faculty of Health, this causes inconsistencies, and means that very important courses are visually underrepresented on the site.

So to conclude I’d like for us to consider:

    • Fresher reportage images of new students
    • General posed individual and group portraits of students on location
    • Subject specific portraits on location
    • Adaptable studio portraits on a white background that can be used with type

I’d Like to Teach the World to Sing (In Perfect Harmony)

Andy Clarke’s presentation at @media 2007 was concerned with international styles in web design, some interesting questions arose.

I was interested in why designers felt that they needed to conform to an international design style rather than adapting regional traditions in design to the web.

For example would an Italian designer look to adapt Giovanni Pintori’s classic typography for Olivetti to the web, or would they regard themselves as a world citizen designing in a universal medium where local traditions and innovations were insignificant?

Is there really an international style?

One thing I noticed when I started looking at CSS Gallery websites was that there appeared to be a specific look and feel to a design that wanted to say:

“I am a Standards Compliant CSS Website”

I feel that a lot of European designers began using American design styles because the first wave of Standards Compliant CSS Websites were American, and this trend has stuck.

The main difference would be in Typography, Europe gave us Sans Serif fonts like Helvetica and Eurostile. Whereas Americans’ prefer serif fonts like Georgia and Palatino. Serif fonts are now much more common in Europe.

Another striking thing about American design is a sense of history, a lot of contemporary design has a retro look, a certain early 60’s American Graffiti influence. The continuing vogue for logos with a flowing hand written feel like Coca Cola is evidence of this. Coca Cola incidentally have gone retro, and their new cans have simple flat colour and clean traditional type, rather than the recent fad for gradients and drop shadows, an interesting diversion.

Coca Cola Redesign

Americans also like to use a lot of texture and bring organic elements into web design, whereas European designers were always quite evangelical about white space. Nowadays Europeans’ have gone crazy about colour gradients.

One of the biggest American influences has been Apple Computers. Appletastic black and grey gradient backdrops are ubiquitous, as is typography with a faded reflection or shadow. It’s neat and tasteful, but it’s becoming homogenised. Websites don’t need look like an Apple product in order to appear more Web 2.0.

So I think there has been a move towards a universal style in web design. This could subconsciously reflect a medium without old rules and boundaries, but where is the variety?

@media2007: Hannah Donovan: For Example… (Part one)

Hannah Donovan is Head Creative at London based Last.fm, the online music recommendation site. Last.fm has been in the headlines following its acquisition by CBS.

I thought Hannah was the most refreshing and to-the-point speaker at the event. The audience quickly warmed to her when she used a rude word to describe MySpace.

The presentation emphasised the need to act quickly if you have a good idea, to be the first, even if your site is a little rough around the edges. Hannah used the phrase “Put perfection behind you”, as a designer I know exactly what she means, designers generally need to get over themselves. She emphasised that you should use “Broad Brushstrokes” and work big.

She asserted that “Form follows function”, that features, forms, and functionality needed to be user tested before any style is applied, to do the hard stuff first. I was interested in her opinion that you should not “re-skin” a website, that the design should be intrinsically linked with the functionality and that a re-design should only be undertaken if new functionality is introduced.

She recommended that we read Victor Papanek’s book Design for the real world, I have a copy with a nice Any Warhol soup can on the cover but I haven’t read it.

There was a short Q & A session after the presentation. A question that stood out referred to Accessibility on Web 2.0 sites that use AJAX, the women who asked the question used the phrase “Disabled people get to hear when the bins are put out, but miss out on all the sexy stuff” which was my favourite quote of the conference.

@Media 2007: Jason Santa-Maria – Diabolical Design: The Devil is in the details

Jason is a well known and influential designer working for Happy Cog, the studio run by Jeffrey Zeldman.

Zeldman is the author of Designing with Web Standards, a book that has been pivotal in the conversion of many designers from structuring pages with tables, to using standards compliant CSS layouts.

Jason’s design has had a stylistic impact on the look and feel of Web 2.0 sites; his use of organic and illustrative background images, combined with uncluttered typography with characteristic Serif font headings is universally replicated.

In this presentation he began by covering a few basic pre-style workflow steps. I currently use wireframe layouts, Jason suggested using a 12 column grid system as a starting point. Important Text and images can span columns but always fit within the lines of the grid. This is something I find difficult, at Edge Hill we often use movable type and a fluid layout; therefore column widths are measured with percentages and expand according to the size of the users monitor.

Additionally he uses Monochrome Wireframes that grade important elements of the page with darker shades. Blocks of strong colour create a connection with the user and help communicate the page’s function.

I found his tips on colour theory interesting, especially creating a colour palette from photographs using the eye dropper in Photoshop. Also choosing an image with a dominant colour and working it into the rest of the design was interesting. I think it is important to have an idea of which colours you are going to use before you progress from a wireframe, however I also know from experience that a scientific approach doesn’t lead to a perfect design, often an element of chance can push the design in a better direction.

The next section of the presentation was concerned with white space, or negative space, that is so important in defining typography. Jason cited the influence of Saul Bass whose typography and collages are seen in the opening credits of Psycho, The Man with the Golden Arm and Walk on the Wild Side. I have been a fan of Saul Bass for a long time and was pleased to hear that he continues to influence people working in a modern medium.

He finished with tips on typography, and the use of appropriate and contextually meaningful fonts.

I took a lot of inspiration and reassurance from the presentation. I feel that many of the approaches and theories that I learnt at Art College are still important in web design, and Jason confirmed this.

And then there were four

Safari LogoApple made the surprise announcement yesterday that they’re releasing Safari for Windows. First impressions are that it’s fast, with some neat features – check out the article length slider when you view an RSS feed and search as you type – but it’s got the iTunes grey interface which I don’t particularly like.

The browser wars are really hotting up again. It will be interesting to see how much market share they can get from IE, Firefox and Opera, and I suspect that as soon as it comes out of beta they’ll be pushing it out along side QuickTime and iTunes.

As web developers, the major benefit will be if rendering is the same as Safari for Mac OS X which would allow us to more easily test compatibility. If it’s another slight variation then it’ll just be a pain!

Apple Video Solutions: Training For the Media Industry

On May 31st I attended a briefing session in Manchester from Apple Computer entitled Apple Video Solutions Training for the Media Industry.

First we were given an overview of current trends and Apple’s strategies to exploit new markets. New trends included: quick adoption to digital technologies and HD television within media industry and by the general consumer; the changing face of media distribution, for example iPod, DVD, SDTV, HDTV, and 3G technologies; and diminishing costs of technology in relation to the cost of people who work in the new media industry.

Some interesting phrases were introduced such as Creative Cross Pollination, this doesn’t involve Bees or the wind, but refers to the multiple technical skills which creative individuals need to get ahead in the new media industries.

The remainder of the day was split into two sessions:

The first session was an overview of the revamped video editing package Final Cut Studio 2 and Final Cut Server: Apple’s media asset management and workflow automation software.

The session second related to Apple Authorised Training Centres and the Apple Pro Certification for students training for careers in Video Editing and Music Production.

Continue reading “Apple Video Solutions: Training For the Media Industry”

Typography on the Web

I thought it was about time I posted on the Web Services blog. Michael has suggested that I write something about typography on the web so here goes.

First a few comments about typography as part of the Edge Hill University brand. The new logo uses FF DIN Medium in lowercase, an extremely smart and popular contemporary font. Linotype’s ITC Conduit font is used for uppercase headings in brochures and in the prospectus. Both of these fonts are lovely but unfortunately ubiquitous, this could mean that their longevity is limited and that we may end up with a dated logo quicker than we think.

These fonts can only be used as graphics on our website; we cannot use them for HTML text as this is reliant on the user having them installed on their PC, which isn’t likely. So we have a limited selection of common and unloved fonts to use, they are Arial, Georgia, Times, Verdana and Trebuchet.

Luckily with CSS we can imitate some of the typesetting techniques used in print design, for example Tracking is called Letter-Spacing and Leading is called Line-Height, not particularly inspiring names I know. Unfortunately we cannot structure lines of type in tidy pyramids that flow neatly down the page, the line ends when it ends, so the text rarely flows.

Internet Explorer 7 now uses anti-aliased text which means that letters are no longer pixelated and have smooth rounded edges. Unfortunately this means that Verdana, which looks neat and tidy on old browsers, now reveals its true form.

Anti-aliased text is here to stay on the web and luckily Microsoft have a new font package called The Microsoft ClearType Collection which is designed to look good on screen as well as in print.

Cleartype fonts

The new fonts all begin with C, which is helpful for designers like me who have too many fonts installed on their computer. Their names are Calibri, Cambria, Candara, Consolas, Constantia, and Corbel, which sound like models of Vauxhall cars from the eighties. My favourite is Constantia, a very nice serif font that could replace Georgia in the affections of American web designers, Americans love their serifs. Calibri is a nice sans-serif and will probably be favoured in Europe. The weakest is Candara which looks a little like Trebuchet.

Unfortunately these new typefaces are free with Windows Vista so will not be universally installed until that operating system takes off, or is forced on the public. In the meantime you can download the fonts to XP as part of the Microsoft Office Compatibility Pack for Word, Excel, and PowerPoint 2007 File Formats.

>