Web design

My thoughts on web design and development

Transparent/broken HTML form validation warnings in Webkit and FirefoxApril 29th, 2011

In the latest versions of Chrome and Firefox, if you use the new bits of HTML forms such as validation (the ‘required’ attribute) and the ‘email’ type, there’s now some validation

If you was to enter something that wasn’t a valid email address, or left the field empty if it was required, you’d get a nice looking tooltip notification as such:
HTML form validation error tooltip

But sadly, if you use some popular CSS resets such as the lovely one made by Meyer, you’ll get something that looks like this:

HTML form validation error tooltip, not as nice looking

The fix is to look for code similar to this in the reset:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

And replace the div selector with body div

Posted in Code, Web design | No Comments »
Permalink

The state of video on the webJanuary 16th, 2011

The backstory

In case you didn’t know, if you want to add video to a website you can do it in one of two ways: using a plugin such as Adobe’s Flash or natively playing it in the browser by using a new feature of the HTML web language, aptly called <video>. The latter technique works a bit like how including images on a webpage works. Remember this; it’s important

But video does have its problems. Just as with images (where you see JPEG, GIF and PNG) there’s several different file formats for video. You see, videos generally need to be compressed (both the pictures and the sound), and there’s different ways of compressing them. That’s what these file formats are. The big three formats are Ogg, h.264 and the latest kid on the block, WebM

Native video support (that is, not needing to use a plugin) is relatively new — it’s not official standard yet — so the different browsers have yet to agree on which format to use:

Microsoft’s upcoming Internet Explorer 9 and Apple’s Safari only understand h.264
Firefox understands Ogg and WebM
And until recently Google’s Chrome supported all three

So, why the disagreement? Simple — h.264 uses patented technology (interestingly Apple and Microsoft are holders of one or more of these patents), while Ogg and (possibly) WebM are patent-free. Firefox have always refused to use h.264 for this very reason, whereas Apple has always said that Ogg and WebM are of lesser quality

Things were ticking along nicely, with the majority of browsers supporting h.264 and yours truly hoping that Firefox will see sense and include it too. But in the last week Chrome have decided to drop support for said format

I mentioned that it was important you remembered that images work in a vaguely similar way, and this is why: until recently, GIF was also patented — and the big difference is unlike GIF, nobody will have to pay to use h.264 on the web. People still used GIF files (the only reason we don’t nowadays is because there are better formats)

The problem

This all means that video on the web is at a worse state than it’s ever been. Sure, we can use a plugin such as Adobe Flash, but Flash just isn’t very good

I have to wonder why Google made this decision. The official line is similar to that of Firefox’s: that h.264 isn’t open, whereas Ogg and WebM is. That’s true enough, but remember that Chrome supports Flash, which also isn’t an open format. And Google Street View and YouTube (owned by Google) use Flash, as I’ve just mentioned isn’t an open format. Why the contradiction?

Is it a coincidence that Google created WebM? Is it coincidence that the most vocal proponent of h.264 also vocally attack Google and Adobe?

Of course, Adobe are happy about this, they will be. But it doesn’t add up. Neither h.264 or Flash are open, but at least h.264 is good. If we’re going to be dropping support for something because it’s closed, it really ought to be the one that’s full of problems

The state of video on the web

As a web development community we need to go one of two ways: we need to either decide on a single format once and for all (my vote, of course, goes to h.264) or we need to go the way of images: it doesn’t matter what format you use, it should just work

Last year when it was announced that nobody would be charged to use h.264 on the web, we went a step forwards. We all hoped that Firefox would use it — but so far they haven’t. Instead we took a step back, with browsers being split in half between those who support h.264 and those who support Ogg and WebM

The web shouldn’t matter what browser you use, what computer you use. You should be able to visit it on your PC, your Mac, your iPhone or your 5 year old Nokia. We should be past the stage of “Best viewed using” messages. There isn’t a desktop web and a mobile web. And there shouldn’t be a h.264 web and an Ogg/WebM web. I shouldn’t need to have to include one video for Internet Explorer and another video for Firefox when making a website

The web is for everybody to see, not just those with Flash plugins installed or the correct browser. This isn’t 1997 when the two major browsers conflicted, fought, and generally didn’t work together. It’s 2011, we should be learning from our past mistakes maturing as an industry, we should be working together to make the web the best it can be, not bickering over patents and openness and not using a certain technology because your rival helped make it

As a web developer and active(ish) member of the web community, I’m angry and upset that we’re not using our energy on more important things. The losers here are the people who have to make the sites and create two different versions of every video, and the visitor who will only get to see half a web if they don’t

Tags: Chrome, Flash, H.264
Posted in Rambling, Web design | No Comments »
Permalink

Predictions for 2011January 9th, 2011

Just the one prediction this year

I don’t think that 3D TV will take off in 2011. 3D requires you buy a new TV set, and with the economy as it is I don’t think people can justify this extra cost. I mean, people have only just bought their HD TV

I think 3D cinema will grow though. It won’t be massive but there will be a few blockbusters that are practically 3D only, a bit like with Tron

Bonus prediction: Responsive web design will be the buzzword of the year

As always I’ll see how I did in about a year’s time!

Tags: 3D, Responsive Web Design
Posted in Technology and gadgets, Web design | No Comments »
Permalink

Problems with attributes not working in IE and Opera?August 30th, 2010

So, what did I do with my bank holiday weekend? I was intrigued by some odd Opera and IE behaviour — that’s what

I was presented with a site whose styling wasn’t working for certain tags. It was an odd one. I thought it might be an absolute positioning bug, but testing was bringing up nothing – why on earth would simple CSS styling, nothing special, fail completely in Opera?

Then I took a closer look at the source — and something caught my eye. There was some malformed HTML:
<h1 title="test""style="background-color: #ccc">Test</h1>

Gotcha! Removing that innocent looking multiple quote fixed the problem. But I still wasn’t happy. Browsers should recognise and fix badly formed HTML, no? It’s not like a closing tag was completely missing. So I made a basic HTML template with little more than the h1 tag you see above, and just enough HTML5 to make it validate.

Then I played around with it. What happens if I add a space?
<h1 title="test"" style="background-color: #ccc">Test</h1>

That fixed it. Hm. Why on earth would the lack of space break things? Lacking a space is completely fine in both HTML and XHTML. Let’s remove the space again, and test some more. What if I replace the rogue ” with another character – say $?
<h1 title="test"$style="background-color: #ccc">Test</h1>

Wait — that’s a turnout for the books — it now breaks in Chrome. Then it dawned on me. If I replace that dollar sign with a normal alphanumeric character — the character ‘a’:
<h1 title="test"astyle="background-color: #ccc">Test</h1>

That’s it! Without the space between attributes, Opera and Internet Explorer are treating “style as the attribute, with Webkit and Gecko being smart and removing the extra quote. Add the space, and Webkit does the same. Obvious when you think about it, isn’t it?

So that’s what I did with my bank holiday weekend. What did you do?

Tags: HTML, Internet Explorer, Opera
Posted in Code, Web design | No Comments »
Permalink

When choice goes wrongMarch 5th, 2010

Due to European ruling, Windows is starting to show a screen to users which gives them a choice of browsers to install, the intent being to let them know about the wide choice of web browsers out there.

But they’ve made a mistake. The majority of people use one of five browsers, yet there’s a choice of twelve options in the browser choice screen. Having a wide range of web browsers is great, but not when they’re presented like this. All that will happen is users will get choice paralysis and hit the red cross at the top right of the window.

Tags: Browsers, Windows
Posted in Web design | No Comments »
Permalink

3 alternatives to GeocitiesDecember 11th, 2009

Anyone who has ever used Geocities can’t have helped but have noticed that Yahoo closed down the service a couple of months ago, to the dismay of many web developers. It’s been a starting block for many developers and designers and continued to fulfill this role until its last weeks.

Many beginners and people who were after a free site relied on the service, and they are now at a loss for what to use. Of course it pays to have a website created by a professional developer, but there’s several solutions out there for those who don’t want to pay for this for whatever reason.

Here I outlined just three potential solutions. I’ve deliberately stayed away from just listing sites that do similar things to Geocities, as there is always a different way of doing things.

Google Sites

Google’s website creation offering is perhaps the most accessible choice, being completely web based that requires only a Google account, and very easy for a beginner to use.

You can choose from dozens of templates, ranging from a site for a classroom to a restaurant site containing pages for reviews, menus, and advertising events. The templates aren’t ugly either, they’re very well written and are of a professional quality. The only problem you might find with using the templates is that they’re far from unique, and the chances that another business uses the same design is quite high. But for free, you really can’t complain. They also make it really easy to add Google elements, such as Google Maps, AdSense and Google Documents.

The biggest downside to Google Sites is their branding is on every page which can’t be removed, and you can’t attach the root of a domain to your site, which means you need to use at least www.example.com rather than example.com.

Overall, a nice service with a large choice of good looking templates. It’s easy to use for an absolute beginner, and it’s all completely free. You don’t even need to buy a domain name, as the service provides a google.com/sites address.

iWeb

iWeb is Apple’s website editor and publisher, where you can create a site and upload it to either Apple’s web servers or your own.

The major difference between iWeb and Google Sites is not only that iWeb is a real application rather than a web based service, but it also has the major advantage of not being tied to a particular hosting service.

It’s extremely easy to use, with inline editing (as with Google Sites) and drag and drop widgets. These widgets aren’t as comprehensive as Google Sites, but there’s certainly enough to make a basic website with video, Google Maps and photos. There’s also a choice of templates to get you started; again the choice isn’t as wide as Google Sites, but they’re much easier to edit.

The biggest disadvantage with iWeb stems from it being an application: you need to run Mac OS. It also isn’t free and is part of iLife which costs £69, but if you buy a Mac it’s bundled with Mac OS for free.

Use social networks

Sometimes you don’t even need a website, the tools out there on the Internet can quite easily be good enough for your needs. Of course you need a website if you’re running a large business, but if you’re an unsigned band or running a club night you might want to consider using social networks. It might just be your target audience are using the networks anyway.

If you are a band, then you almost certainly need to be on MySpace. For no cost at all you have a potential audience of millions of music fans, a blogging platform, and a way to upload your latest release. OK, it’s not perfect when it comes to customising your page and it contains adverts, but the site is still very much active and many popular artists use the site including Mika, Fake Blood and Little Boots.

Facebook allows you to have a fanpage where you can communicate with your fans, fans can communicate with you, and fans can communicate with each other. Facebook also lets you organise events and invite fans, which is a big plus when it comes to advertising your next club night to an audience who have already shown interest in your brand. It’s very basic and shouldn’t be used on its own, but it’s an addition that costs nothing at all.

And to top it all off, you should get yourself a Google Profile to link them all together. Google Profiles is a quick and easy way to make a page containing a biography, contact details, location details, and links to all your social network accounts.

Tags: Facebook, Google Sites, iWeb, MySpace
Posted in Web design | No Comments »
Permalink

Touch accessibilityOctober 9th, 2009

Ever since Apple released the iPhone, it seems that everything has suddenly gone touchscreen, with copycat mobile phones all including touchscreen interfaces. These better quality devices mean you can get the “real web” on your mobile (unlike the time of WAP and a numeric keyboard to navigate around the page). It’s worth pointing out that this brings us a new usability consideration for the web that we’ve never had before.

Some sites have content and features which appear only after you hover over them. This isn’t a new technique, many years ago web designers would make use of the fact that Internet Explorer would show an image’s alt attribute in a tooltip when you hover over it to show more content, and this feature is still here if you use the title attribute of links. Javascript gives you even more choice; some drop down menu solutions work by hovering over menu items, and yours truly has been guilty of using jquery to display tooltips containing extra bits of information.

Don’t get me wrong, I think that this is a great thing. It allows the designer to keep the page clutter free and in some cases is a very helpful interface interaction. But we need to remember that you can’t hover on a touch screen interface.

By including content that can only be displayed on a mouse hover, we are ignoring a growing market of users that browse the web on mobile devices while out and about. But is this information important? Can they get to it by other means?

Am I saying to not make use of hover techniques? Far from it, hover is a useful gesture whose uses are limitless. But we need to be mindful of touch screen devices, and consider making an alternative stylesheet or using other javascript methods for these users if the information is important and isn’t available elsewhere.

Tags: Touch
Posted in Tech Usability, Web design | No Comments »
Permalink

DIY web designApril 24th, 2009

With the likes of Twitter, Facebook, Livejournal and Google Sites, it’s never been easier to publish content on the Internet. And this is a great thing, it’s a new and growing media that lets anybody have their own little soapbox and gives those who wouldn’t otherwise have the chance to be creative to create stuff cheaply and easily.

But if you run a business, should you save money and make your own website? Well, I reckon it all depends.

I like to compare websites to leaflets and posters. On one hand you get the professionally printed coloured leaflets on glossy paper, and on the other hand you get the home-printed, black-and-white, inkjet-printed and library-photocopied leaflets that get shoved through your door advertising local fairs or plumbing services.

If you’re a plumber then people don’t expect professional leaflets, and it would only be a waste of money. But if you’re a business with its own premises you want to give a top impression to your customer, and what better way than with a professionally made and created site?

I’m never one for making the web industry a snobbish and exclusive one, and so think that home-made sites do have their place. As do sites created by amatuers — these sites are often cheaper (or free), lets the designer enjoy his hobby, and allows him to learn more about creating websites.

It’s certainly cheaper to create it yourself if you don’t have the budget, but you get what you pay for. Going professional is worth every penny, and the designer will know the very latest techniques and will create you a site that will get you out there (with knowledge in SEO), will make you money, and will show you in the best light possible.

But if you do choose to make your own, please don’t use free hosting sites like Geocities and Tripod. You won’t get your own domain name, you won’t have complete control, and they’ll shoehorn adverts onto your site.

Posted in Rambling, Web design | No Comments »
Permalink

Tech Usability #5: PopupsMarch 27th, 2009

One of an ongoing series of articles discussing usability and accessibility issues in technology and the web; with tips, tricks and standards to improve the user’s overall experience.

Ask anybody who uses the internet what irritates them the most about the web and the answer you get back will probably be popups that take over the screen.

They might not even be open up in a new window and it might not even be for an advert (For example opening new windows for a login box, or opening a link in a new window), but either way you are taking the content away from the user. It’s the digital equivalent of a printer putting a post-it note over a magazine article with an advert or a reminder to email the editor if you have feedback printed on it. (And if you work in the advertising industry, please don’t start doing that. I’ll never forgive myself).

Personally I find the worst offender to be snap.com. This is a service which, when the mouse moves over a link, will show a screenshot of the site being linked to. Not only is it incredibly unhelpful to have a three inch wide screenshot, it also slows down your experience because your browser has to load the javascript, load the site linked to in order to grab a screenshot, and then display it. Talk about slowing you down!

Yes, there are legitimate uses for using popups, and I’m honestly not complaining about this. There are many good javascript modal box solutions out there such as Lightbox and Facebox which shows an image or webpage when you click on a link or picture (click on the screenshot in this article to see what I mean). These have truly useful applications from image galleries to the media upload box in WordPress, don’t take over your browser so you can move to another tab, and are lightweight and simple enough to not be irritating… but only if the application is right.

So, if your design calls for a modal box popup, then use a javascript solution rather than opening in a new window. And if you need to show a message such as the “could you possibly spend two minutes to fill in a survey to tell us how to improve our site?” variety, then don’t use popups! Instead, show a banner along the top of the screen which will grab the user’s attention, but won’t take over their screen nor ruin their browsing experience.

Tags: Javascript, Modal Box, Popups
Posted in Tech Usability, Web design | No Comments »
Permalink

The Accessible Web #4: Text and typographyMarch 13th, 2009

An ongoing series of articles about web accessibility issues, tips, tricks, and standards.

It’s amazing that something as simple as how the body text looks on the page or screen can help or hinder with reading. Font selection, spacing, line length and the alignment of the text can all make a massive difference.

Font selection

Sadly there isn’t much choice in font selection on the web just now, since with most browsers the font needs to be on the user’s computer. This pretty much limits you to a small list of fonts including Verdana, Times New Roman, Arial/Helvetica, Gill Sans and Lucida Sans.

Font selection should still be taken with care; fonts have their own character and very often Verdana and Times New Roman are overused (and should only be used as fallback).

Contrary to typography rules for paper, you will likely be better off choosing a sans-serif font for your body text. This is because the relatively low resolution of a computer monitor will make those fonts with serifs a little harder to read than those without them. Having a serif font for the header will however often make a nice contrast.

Leading and kerning

Leading (pronounced to rhyme with heading) is the amount of space between two lines of type: the name comes from the thin block of lead originally used to increase the space. Kerning is the space between two letters.

Both leading and kerning can affect how quickly and easily the copy can be read: too big a leading and the reader will struggle to read down to the next line. Too small a leading or kerning and the letters and words might be hard to distinguish. If you’re unsure, you ought to leave these to the defaults.

Line length

Again, speed and ease of reading is affected by line length. If the line is too long then the muscles in the eye and neck need to be used, which is tiring for the reader. It also affects how easily you can find the next line: the eye has to travel a relatively great distance to go back to the start of the line.

Alignment

In Latin languages, body text should be left aligned; any other alignment will be confusing for the reader. Right and centre aligned text is fine in some cases, such as the tag and category information that is displayed at the bottom of this post.

Justified text should never be used: using this alignment means that gaps appear between words and so ‘rivers’ of space will form. This can be disconcerting for those with dyslexia and so they will find it hard to read the copy.

Tags: Dyslexia, Typography
Posted in Tech Usability, Web design | 4 Comments »
Permalink