The availability of fonts that can be used has grown massively over the last couple of years, with services such as Typekit and Fontdeck taking the hassle out of serving fonts to the world. Services such as sIFR and Cufon are now largely out-dated unless in certain circumstances (corporate fonts for example may need some protection from publishing the font file on the server). One of the most common ways to embed custom fonts on a webpage is through the @font-face declaration, and there is a new syntax which should be used now which handles Android devices and IE9 a lot better, and also is a lot cleaner and easier to maintain.
It’s an age old argument and one that still rumbles on, but with the expansion of devices, emergence of HTML5 and CSS3 and the continual decline of Internet Explorer and older browsers, it brings it into even sharper focus. It is impossible to make a website look exactly the same on an iPad as it does in IE6 as it does on a BlackBerry as it does in Opera Mini, so why do we waste countless hours and lots of our clients money trying to make the websites we create the same in every browser?
IE is still the most popular browser, although with it’s usage now below or around the 50% mark, then we’re almost at the point where the IE argument is becoming null and void. Why should the 50% of users with the most modern browsers be punished and served an experience way below their browsers capabilities in order to please the other 50%? Is it not better to spend a bit more time and care taking full advantage of these emerging technologies in order to serve an experience and design which is appropriate to the device and makes full use of it’s potential? Yes, the older and less capable browsers won’t be as slick and polished but when designed effectively then the message is still communicated in a clear manner and nothing is lost as the user is still able to access the content, still able to purchase the items they want to buy and do everything else they came to do on the website.
The way fonts are rendered across the range of devices and operating systems immediately rules out any possibility of sites looking exactly the same everywhere and with the new CSS3 properties allowing us to create shadows, borders and rounded corners with only a few lines of CSS, as well as transitions, transforms and animations then we have even greater power at our fingertips. These emerging techniques mean we now have the ability to tailor the designs and experiences we create to the browsers and their capabilities, so users get the best possible experience for the browser that they’re using. If we start at the bottom and take the opinion that websites must always look the same, then we give ourselves an artificial ceiling meaning that we rule a lot of these new techniques, and short change both ourselves and the website owner. New techniques are ruled out because “it won’t work in IE” and our markup becomes littered with empty divs and spans all so we can absolutely position a drop shadow, or even worse include even more hefty JS to a page so that corners can be rounded.
We should be taking the opposite approach and starting with the most up to date techniques and technologies and providing alternatives to other browsers so that it’s the best it possibly can be within that environment. Plan to use 3d transforms and transitions in designs, and carefully craft alternatives for the less capable browsers. We do this when creating font-stacks, we pick our optimum font, possibly with @font-face or services such as Typekit or Fontdeck and we load it up and away we go. We start with the best and then declare fallbacks, so why don’t we do this with everything else as well? And if a drop shadow or rounded corner is an essential design element that must be seen cross browser, why are we so often using JS to render these? Javascript is an enhancement which adds to the design and shouldn’t be used for critical elements.
We have a wealth of techniques at our disposal from media queries to keyframe animations to canvas elements all the way down to the humble rounded corner and drop shadows which can and should be used right now to enhance our designs. When used properly, they add a level of polish and finish off a design to a great level. Currently, a lot of people would take these “added extras” and use a combination of JavaScript/proprietary filters/presentational markup in order to achieve this in every browser, when a more sensible approach would be to use the modern standards that have been developed and serve each browser an experience which is appropriate to their capabilites. Loading up older browsers with extra files and scripts slows it down and lessens the experience for those users, all in order to maintain the archaic notion that every website should look the same in every browser. It may look the same but the fact that it’s now so heavy in order to serve these effects mean the experience is vastly altered in a negative way, and we all know that as well as not looking the same then they don’t have to be experienced the same either. Is it really worth slowing down and adding weight to pages purely so that box can have a 3px border?
Take the time and alter the layout when switching from landscape to portrait mode on the iPhone/iPad, use media queries to target smartphone browsers, check against more basic mobile browsers as well as testing on the desktop browsers and all the usual stuff like without JS, smaller resolutions and not just check to see if they’re ok but optimise them as best you can for these conditions. The web is not a static medium and we have no control over how a user will access a site, but by optimising for the most common scenarios then we will cover the vast majority of use cases, and cover them to the best level we can.
I think we’ve truly reached the point where we should be binning this idea of everything looking the same everywhere, by taking the time to craft these different experiences then we are able to create better websites which are easier to maintain, often able to develop quicker and deliver a more cost effective solution for our clients and better experiences for our users.
As it’s been a while since I’ve written a blog post, I thought the traditional end of year post would be a good place to round up.
This year has been quite eventful, as I started the year as a full-time student working part-time from home and ended it out of education and working full time with a different employer. As I’ve written before, I wasn’t entirely happy with university and my original plan was to finish the academic year and consider my options over the summer, deciding whether to carry on or seek full-time employment. As it turned out, I was lucky enough to be offered a position with a company here in Dundee and I can honestly say I do not regret leaving uni one bit. I’ve learnt far more in 6 months of work than I did in 2 years of university, and am thoroughly enjoying it.
For 2011 I have a few goals, with the main one to become much more fluent in JavaScript and jquery. I feel my HTML/CSS skills are at a good level but my js needs some serious work. I’m not horrendous at it and can implement basic things such as slideshows, hide/show etc no problem but I’d really like to become a lot more fluent and knowledgable about it in order to write custom functions and better scripts.
Something else I’d like to improve greatly is my actual design skills, and spend a lot more time crafting in Photoshop and then implementing in the browser. Or design in the browser but either way I’d like to become much better at designing interfaces from scratch. One way to do this would be to create a psd on a regular basis and to brush up on design theory etc so that I know what I’m doing, and able to improve.
As well as improving on my skills as a designer/front end developer, I’ve a couple of personal projects that I’d like to work on throughout the year, nothing big or extravagant but something where I can flex my muscles a bit and put into practice some stuff in a real live project. I’d like to have something up in the first quarter of the year but we’ll see how I get on.
I’m looking forward to 2011 and hopefully it’s as good as last year.
