Tag Archive for 'Web Standards'

Combining image zoom with effective use of screen real estate

BHS.co.uk (URL valid 28/12/2011) are utilising a great product image zoom feature, making superb use of screen real estate. The logic is if you’re viewing a photo in detail you can’t read at the same time, so why show text? – a progressive disclosure feature of interface design I’m a fan of since it compliments simplicity well.

http://www.bhs.co.uk/mall/productpage.cfm/bhsstore/3770523 (URL valid 28/12/2011)

HTML5 Priority of Constituencies

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In other words costs or difficulties to the user should be given more weight than costs to authors; which in turn should be given more weight than costs to implementors; which should be given more weight than costs to authors of the spec itself, which should be given more weight than those proposing changes for theoretical reasons alone. Of course, it is preferred to make things better for multiple constituencies at once.

W3C

(Translated: “It’s all about the user baby!”)

Taming Adobe colour settings for your web browser

*Some artwork I'm working on*

*Some artwork I'm working on*

Disclaimer

If you – like me – are having problems reproducing identical colours between Photoshop and your web browser this post provides a solution.

This post does not concern itself with best practices for printing techniques and managing CMYK colour palettes. I’m primarily a web designer, so settings for print don’t concern me. That said, if you are a print designer you’d still benefit from reading this article, especially if you haven’t come across the term sRGB before.

Web app personality is essential

Software is media today, particularly consumer software. When people use it [your software] they approach it in the same way they would approach media. When I say media I’m talking about a magazine, or a newspaper, or a TV show.

When you think about The New York Times vs. The Wall Street Journal, Vanity Fair vs. Vogue, or Fox News vs. CNN: each of these media properties have a voice; they have an attitude; they have a style, and it’s unique, and it’s different.

Mozilla Drumbeat festival: ‘Learning is learning, and learning is good.’

Drumbeat – Mozilla’s flagship festival focusing on net-neutrality, openness, and freedom of learning and expression – begins today in Barcelona, Spain. After spending an evening scoping out the scheduled events, workshops, and folks involved, here are some of my MASSIVELY cool highlights and things to watch out for in 2011:

Universal Subtitles

I was impressed to hear Robin Christopherson, Head of Accessibility Services at AbilityNet, sing the praises of YouTube’s auto-captioning tool at FOWD 2010 earlier this year. Mozilla‘s new open source tool – Universal Subtitles – aims to help translate even more videos into a format capable of being easily consumed by deaf and hard of hearing users, as well as ensuring that popular search engines – like Google – can access and archive important video content for years to come. View a video introduction to the new Universal Subtitles tool in all its HTML5 glory.

Google’s SEO starter guide

Best .mp3 to .ogg audio file converters

If you, like me, have been dabbling in HTML audio embedding recently, then there’s a likelihood you’ll have found out there’s little cross-browser consensus for embedding HTML5 audio. There’s a high chance, if you’ve been using tools like jPlayer, that you will need two types of duplicate audio files:

  1. .mp3 and;
  2. .ogg

Here are two useful – free -conversion tools I’ve found over the past few weeks:

Enjoy!

Responsive Web Design

http://www.alistapart.com/articles/responsive-web-design/

Form input labels with (HTML5) placeholder attributes

Update 16/12/2010

I used this jQuery placeholder plugin to do the job today and it worked nicely.

The new HTML5 specification introduces the form input placeholder attribute, which allows us to define a hint to help users fill out input fields. If you’re using a WebKit-based browser right now you should find working examples of the new input placeholder in use on this page.

Working with form elements, especially labels, can present a dilemma for many…

IE6-8 CSS3 border-radius support with CSS3 PIE

I received a wonderful tip-off from one of my colleagues this week via Slashdot. My dreams had come true and along with it sanctimonious giggles for all the people I’ve known in the past who’ve worshiped Internet Explorer enough to waste time and money on supporting the browser’s lack of CSS support, rather than engaging with – let’s face it – more useful and engaging tasks; tasks we should all justify and convince to our clients before a project begins.