CSS3 Media Queries
I was at the first event run by the amiable Keir and Glenn under the banner of Workshops for Web People in Leicester last week, featuring Andy Clarke‘s follow-on presentation for his Transcending CSS book. A well done to both the lads and Andy for putting on a great day and keeping everyone entertained and full of food and drink.
Andy spent some time looking at CSS3 and where certain aspects of it can be used right now. One feature is that of media queries. These are a series of features such as width, height, aspect-ratio and resolution with min- or max- prefixes, which enable the serving of css tailored to specific devices. Andy showed and example where a media query could be used to serve up a separate layout for mobile devices - specifically his iPhone.
Inspired by this demo I decided to reproduce that on this site. My aim was for anyone viewing on a supporting browser to be served up an additional set of styles if their browser-window’s size would normally have given them scrollbars. In practice this meant adding the following code to my main css file where I import my other files:
@import "/assets/reset.css";
@import "/assets/screen.css";
@media all and (max-width: 800px){
...additional styles…
}
This translates as “when the device supports media all and is no wider than 800px, use these rules”. You can try this with Safari (I’ve tested on Safari 3) and Opera (tested on 9.24) , though not Firefox, by resizing you browser to under 800px and hitting refresh. The refresh is required to activate the stylesheets, so it is not as robust a solution as one of the javascript options for this particular use, but it does provide an insight into how powerful CSS3 could be if we could get it out of the gate. The obvious applications are for mobile devices - especially those which don’t identify themselves as handheld, so by-pass the normal for-mobile styles.
Note that trying to add this rule in a <link.. /> tag doesn’t seem to work as it gets applied by Firefox even when not matching the rules, it seems in that state the browser ignores the bit of the rule it doesn’t understand, proceeding to implement the bits it does.
Posted: Sun 18 Nov 2007 ~ filed under Standards ;Talks ;
Mobile Web Design
I’ve just finished reading Cameron Moll‘s latest book, Mobile Web Design, which is available as a 100-page PDF download for a mere $19. This is my first download of a purchased book and I’m pleasantly surprised by the format.
The general thrust of the book is that the content should probably not be just your standard site (one of 4 possible options Cameron outlines), but rather a separate section or domain with content tailored to the user on the move (mobile referring to the user rather than the device). Contextualising what content people will want from your website via their phone is probably the most challenging part of mobile web design. It is quite possible that it is something which is not present on your primary domain, but this book gives you some good examples to help you get thinking in the right direction and using the phones unique abilities to full effect.
This is not a technical reference, instead focusing on the greater picture, but Cameron gives plenty of links for additional reading, something which is important in what will possibly be many people’s first look at designing for mobile users. In all it was a great read, which I managed within a day, and anyone familiar with Cameron’s writing on his blog will feel right at home. Still not sure? The book site has a sample. Go download.
Posted: Thu 30 Aug 2007 ~ filed under Standards ;
The Death of Institutionalised Education?
By far the most interesting aspect of the recent Future of Web Design conference was the last thing to be said. The final panel was opened up to the floor and a question was put forward regarding the future of education in web design in face of the amazing pace of new developments in the field. Andy Clarke‘s reply was that if educational institutions cannot keep pace with developments then “perhaps we should see the death of institutionalised education” in web design.
The spontaneous applause which this got from the floor indicates the understanding of how far behind schools, colleges and even some universities are when compared to best industry practice. I can’t help but agree, but I know it will never happen.
As long as there are people wanting to learn web design there will be educators trying to deliver it, especially with changes to funding models in the UK making every place on a course important. The problem I can see is one of hard-pressed teachers trying to fit a technical and pretty abstract subject into a small slot in the timetable. Of course the easiest thing is to go for the easy win and get the kids using a tool like Dreamweaver or FrontPage to knock something up quickly with no thought of the code behind the scenes. At least that way they have something to stick in a portfolio at the end of the day. And lets not forget that most web design courses come under the auspices of the IT department, when to get the results we aspire to it should be a joint venture between IT, Art and even Humanities.
Teachers who commonly get landed with delivering a web design course typically are ill-equipped to do so at a level which will give their students an insight into the real work going on in the industry. Maybe this is where the industry should step in to help. We could produce lesson plans with accompanying teacher notes suitable for different lengths of course, just as they are available for other subjects. These could be updated with new technologies and changes to standards as unlike most subjects our industry is a fast-paced one which even full-time professionals sometimes have a hard time keeping up with, let alone hard-pressed teaching staff. We could produce some outstanding sample sites which could be broken down into their component parts complete with notes for use as teaching aids. We could even come up with a network of web design firms who would be open to have student placements or come into class for a guest speaker session. I’m sure that with a little effort the firms which put a bit of effort in could end up with an endless supply of new talent from these sources.
Of course it can’t be all one-way. We need the teachers to let us in. Just as we recognise their abilities when it comes to communicating an idea to young minds, they need to see that accepting help from us is not a threat to their teaching skills. It needs to be a partnership else we risk continuing on our current insane course where teachers are delivering outmoded classes to students who won’t know any different until they’re in the industry - if they ever make it that far.
Posted: Mon 23 Apr 2007 ~ filed under Standards ;Talks ;
WebCards
WebCards is the latest browser extension which takes advantage of microformats. Built by the chaps from whymicroformats, it exposes microformats embedded in pages - events, contact details that sort of thing. It is still in Alpha/Beta at the moment, but you can sign up for notification when it launches (initially for Firefox) - though I wish they’d get rid of the annoying pop-up about a license requirement just for viewing an information page.
With Firefox looking to embed microformat support in version 3 and Microsoft also taking notice, it looks like this small but powerful tool is about to get a lot more attention.
Posted: Thu 25 Jan 2007 ~ filed under Standards ;
Outlook 2007 parties like it’s 1999
If you ever have to create HTML emails for clients, the upcoming Outlook 2007 holds a nasty surprise. Microsoft have decided to remove the IE rendering engine and replace it with Word’s rather more poor one. In doing so they are pushing HTML emails back to the days of HTML 4.01 and CSS1 - those specs were last updated over 8 years ago. You’ve got to admit their timing sucks, just as IE finally gets a whole lot better, they decide to rip it out.
Take a look at the supported items and you’ll see there are no background images or css floats and positioning. How does this affect us? Well, it’s kinda like the browser position in the bad old days, if you are trying to push forward with CSS-based emails, you will be in for some headaches as they have made it pretty much impossible to do this. As Joe Hardy notes, even though align is supported, glitches make it useless - and the problems don’t stop there, check out his article for all the nasties. As Outlook is the primary company email client and comes with every Windows PC, it remains the most important email client out there for better or worse. The Campaign Monitor crew have a screenshot comparison of their CSS email newsletter in the Outlook 2000 and 2007 to show the difference the change of rendering engine really means.
Yes we could argue about whether HTML belongs in email, but many people expect it to be there - both clients and customers - that the view of developers is really not an issue. You cannot ignore that a graphical email has a lot more impact than a text-only one (assuming that the email client does not block the images by default, or the customer has the awareness to unblock them). Personally I think the decision to use HTML or text should be ruled by the content. HTML emails are particularly suited to e-commerce where the product is what the customer wants to see - Apple’s emails are a good example of these. Text-only emails are similarly effective where pure information is key - job board updates, blog newsletters and such. Like it or not HTML emails will continue to be requested and Microsoft have now made it more difficult to do this in a way that moves us forward.
They had a great opportunity to use the IE7 engine in Outlook, but instead have forced us to roll back our designs back to either fully table-based or text-based instead of the graceful degradation that CSS support could give us.
Posted: Fri 12 Jan 2007 ~ filed under Standards ;
Microsoft Homepage
Microsoft have recently updated their homepage (they’re moving the whole site to Sharepoint as part of the change). It is now a fully css-based page, albeit with an HTML 4.0 Transitional doctype.
Additionally some of the code is a little disappointing, for example instead of using h tags they have employed classes:
<div class="heading">Popular Downloads</div>
Now, I’m guessing the Sharepoint might have something to do with this, in which case it isn’t a great advert for it.
On the plus side, I do like the design as it seems more task-oriented such as the New PC section in the Home User area, though this is let down by the slow response of the navigation, it just doesn’t feel right.
Posted: Wed 20 Dec 2006 ~ filed under Standards ;
Joe Clark’s Micropatronage
Joe Clark is one of the most enthusiastic people I’ve heard talk about accessiblity. When WCAG 2 came out he was the first to point out issues with the documentation, and must still be among the few who have read all WCAG 2 documents. His commitment is especially evident when it comes to multimedia accessibillity (I still remember him gathering a posse to go and see captioned films after @media 2005).
Now Joe is starting a research project to establish a set of standards for captioning, audio description, subtitling, and dubbing. It will also develop training and certification and even create specialist fonts to use. Now all this costs money and Joe is looking for funding to enable him to go out and get the $7 million Canadian the project will need over the life of the project. He’s after $7,777 to enable him to devote all his time to fundraising for 4 months - so this is subsidence living - and is asking for help from the development community to help achieve this target. When you consider the size of the community and the sum needed I’m sure he’ll have no problem getting there, and having seen Joe’s enthusiasm I’m sure he’ll manage to get the project funding too.
Head over to the Open & Closed Project to find out more and donate.
Posted: Fri 10 Nov 2006 ~ filed under General Web ;Standards ;
Microsoft Releases Internet Explorer 7
The day has finally dawned and IE7 is now in the public arena. Well, sort of. Microsoft has included it as a high-priority update, so you will be prompted to install it. However there is an opt-out for those who cannot move to the new version for whatever reason and they have even released a blocker to prevent it being downloaded for companies who need to remain where they are. Read more about the release over at the IE Blog.
Posted: Thu 19 Oct 2006 ~ filed under General Web ;Standards ;
webcameron
Blogs made more in-roads into the political dictionary this week with the (Beta, of course) launch of webcameron, David Cameron’s new site. It’s only been up a couple of days so posts are still a little thin on the ground and I’m sure he’s still getting used to the idea. Design firm Head London have made a pretty good job of it all, and it fairly sings web 2.0. Everything is there - count them - Tag Cloud, Flickr feed, YouTube-style videos, guest blogs, widgets, PodCasts. Unfortunately there are a couple of non-Web2.0 code issues - a double doctype, inline styles and javascript in the hrefs, but it is light years ahead of what we would normally expect from a politician’s site.
The design is nice and clean, keeping away from the oh-so-obvious party-blue, and giving us a site it is actually pleasurable to be on. There is even a video clip of a conversation between (I assume) a guy from Head London and Mr Cameron regarding the sections of the site which haven’t launched and how they were going to deal with the high volume of comments. Now I would have thought that they would have given this a bit of thought beforehand, making sure that the early adopters weren’t left hanging waiting for replies. I’m sure there are several people employed full-time just moderating the comments, which all have to be approved before publication.
I hope that this site continues to be updated and isn’t left to be another fashion-following fad. Whether this is a good movement for politics itself I’m not sure - is it heading too far towards personality-led politics - but it does make the party more human, something which many large companies have already discovered.
Posted: Tue 3 Oct 2006 ~ filed under Blogs and Blogging ;Standards ;
This Site’s DNA
There’s a clever company out there which can create a piece of artwork for your lounge wall based on your DNA. Apparantly they send a DNA sample kit out to you and you returm your DNA from which they make the art, and very nice it is too. But it does seem a lot of work and does cost quite a bit - labs generally don’t come cheap.
So why not get art from something you use every day - your favourite site, or your own site? Here’s where Thomas Baekdal comes in with his WEB2DNA. This parses your site, much like an RSS and allocates coloured lines depending on what markup it finds. Different types of site end up with their own unique artwork with more semantic sites getting brighter piccies than one which uses lots of font tags. Oh, and as Thomas points out, due to the way in which this is all constructed it works best in IE rather than the usual Firefox recommendation.
Posted: Wed 23 Aug 2006 ~ filed under Standards ;
Bookroll
There's been a surge in new web development books being announced in the past few weeks, so here's a quick run-down.
Web Accessibility: Web Standards and Regulatory Compliance
A welcome addition, especially in light of the upcoming WCAG 2.0 release. A replacement on the shelves for the good, but aging Accessible Web Sites from the now defunct Glasshaus, it will hopefully be covering the accessibility issues of some of the newer techniques such as image replacement and oh I dunno, ajax? Looking at the contributing author list this looks like it will be a good read.
Ppk on JavaScript
This is one I'm waiting for, having made my merry way through Jeremy Keith's DOM Scripting (for good, not evil), I've been wanting more, but also wanted to avoid polluting my clean js knowledge with old-school techniques. Ppk says this is definitely a sequel kind of read so it should work out quite well.
Transcending CSS: The Fine Art of Web Design
I missed Andy's talk at this year's atmedia - damned 2 tracks! - but this may make up for it. It looks to be a 'think past the restrictions of CSS' vibe. Not much info apart from that, so we'll have to wait and see.
Building Scalable Web Sites
Cal Henderson did a great stint at the Carson Summit and I hope this book follows his presenting style rather than the more dry style O'Reilly is more known for.
Learn web design the right way
From all the reviews I've seen this is the book to buy anyone you know who is just getting into web design. Something we've been missing and one I'm going to recommend.
HTML Mastery
Another Friends of Ed book, this time by Paul Haine and I'm guessing a non-official companion to Andy Budd's CSS Mastery.
Designing With Web Standards, 2nd edition
A green cover for the new edition. Question is, will it still be referred to as 'the orange book'?
Posted: Tue 27 Jun 2006 ~ filed under General Web ;Standards ;
Movies and Microformats
Following Tantek‘s inspiring presentation at this year’s @media, I’ve decided to step up my game a little and seeing a great movie at the weekend gave me the perfect opportunity to try it all out.
I’ve kept the whole thing pretty simple - the Microformats site has a bunch of examples of microformats in use already and hReview was the obvious choice.
The code runs like this. The hReview only requires the item being reviewed, but obviously for a review to be useful it needs a bit extra.
As the power of microformats comes from them being pulled out of context (eg Technorati’s new search tool), I wanted to attach my name and url to the review. This is done via the reviewer item, wrapped up in hCard.
<span class="reviewer vcard">
<a class="url fn" href="http://www.liptrot.org/about">Adam Liptrot</a>
</span>
The reviewer also has the date of the review assigned to it. Dates are something which have to be machine-readable and so must have a format which is common.
This format is contained within the title attribute of the abbr tag, as it is effectively abbreviating the more readable ‘June 19th 2006’ or even ‘yesterday’. So we add the following after the link within the reviewer span:
<abbr class="dtreviewed" title="20060619">June 19th 2006</abbr>
Then we have the mandatory item which I’ve wrapped in a link to the IMDB site reference (oh, and I’ve added a language tag to the link too, as it’s a French film).
<div class="item">
<a lang="fr" class="url fn" href="http://www.imdb.com/title/tt0390808/">36 Quai des Orfèvres</a>
</div>
Put it all together with a rating and the review itself and we get the full entry.
<div class="hreview">
<span class="reviewer vcard">
<a class="url fn" href="http://www.liptrot.org/about">Adam Liptrot</a>
<abbr class="dtreviewed" title="20060619">June 19th 2006</abbr>
</span>
<div class="item">
<a lang="fr" class="url fn" href="http://www.imdb.com/title/tt0390808/">36 Quai des Orfèvres</a>
</div>
<div>Rating:<span class="rating">4</span> out of 5</div>
<div class="description">
<p>Movie review goes here...</p>
</div>
</div>
At some point in the next few weeks I’ll update my previous movie reviews in the same way.
Posted: Mon 19 Jun 2006 ~ filed under Standards ;
Back from @media 2006
I think Patrick has put himself in a bit of a tight spot. Looking at my bookshelf I can see at least 6 books authored by people who presented this year. Making next year's conference as good as this year's is going to be a real challenge.
It was really great to see some familiar faces among the crowd and get to meet a bunch of new ones. The conference was split along two tracks which caused a good few people to wish they could split themselves in half and it meant some really tough decisions - how do you decide between Andy Clarke and Tantek?
Anyway here are my best bits:
The WCAG panel encouraging people to actually read the 2.0 draft before making their mind up (and finding out about the quick references they've just put out); though most people agreed having Joe Clark there would have made it more of a debate.
Jeff Veen's 'Next Generation of Web Apps' presentation was the highlight of the whole conference and a great way to finish off day 1. I've always wanted to see Jeff speak as it was his book which gave me a huge leg-up in web design and he didn't disappoint, giving an inspiring look at the state of the industry, how far we've come and where we might be going next.
The social calendar sprang back into action with Patrick managing to convince the bar to open up for football and after a win and a few drinks it was down to the Texas Embassy for food with Gareth and Olly.
Dan Cederholm kicked of day 2 with a look into making sites bulletproof with examples from his Cork'd site and re-energised everyone after the excesses of the night before.
Cameron Moll told us how to look towards providing content to mobile devices and gave everyone some really useful tips to go away with. Yahoo!'s Nate Koechley's look at how they implemented standards into 3 of their upcoming products shows us how far the community has come in the past couple of years. Chatting to him afterwards about microformats and social tagging, he came across as a really nice guy.
Speaking of microformats, Tantek Celik enthused the whole lot of us with a run-down of what they are and the potential of them - along with examples of them out in the wild.
The final session was a great light-hearted 'hot topics' panel most ably hosted by Jeremy Keith - a great way to round of the day, followed by beer in the pub (CJ - are you going to start importing UK beer to Canada?).
What I noticed this year was a move towards more strategic thinking rather than nuts and bolts stuff. Also the presentations were without an exception amazing - from the crafted slides to the practiced speakers - coupled with a great venue this was a top class event. Congrats to Patrick and here's to @media 2007.
Posted: Mon 19 Jun 2006 ~ filed under Standards ;Talks ;
Did someone say we’d won?
Coincidentally, Web Standards Awards is closing at the same time that Stylegala is up for sale. Does this mean that the standards war is won? Well, no. WSA reached the 100-site milestone in January and Stylegala has had a distinct lack of new additions in the past few months. The WSA is much more along the lines of the Web Standards Project, the core of the site is the promotion of standards, with sites judged by the great and the good of web design. The annoucement says it all:
It's no longer a myth that you can produce a stunning site with Web Standards
and the 100 site mark is a good place to bow out. Plus these guys have a lot of other stuff to do.
Job done. War won? Nope, there are still an awful lot of sites out there partying like it's 1999, but the tide has turned. The WSA stands as a showcase to standard-compliant design. Stylegala on the other hand is a gallery, a place for inspiration, although it has actually been more than just a gallery for some time. However the gallery does seem to have fallen by the wayside since the heady days of March 2005 when 20 sites were added. In the past few months only a couple of sites have made it in, despite, as the WSA declares:
beautiful sites with beautiful code are being produced by the hundreds; every month, every week, every day
Maybe the problem is that it is too difficult to seperate out just 10 sites a month to feature - what about the ones that don't make it, are they not worthy? This is probably why many recent sites have been high-profile ones which everyone can put on a pedestal. Stylegala looks like it has just been overwhelmed.
Posted: Wed 17 May 2006 ~ filed under Standards ;
More Stuff to Read
Dang it! As soon as I start getting my RSS reader under control, along come 2 sites which are sure to demand my attention.
From the talented hands of John Oxton comes Bite Size Standards, a multi-author site which aims to give good advice but in manageable “while the kettle’s boiling” chunks. I especially like the further reading references at the bottom of each post to let you delve a little deeper if you’re hankering after more depth.
Then there’s Vitamin, a web magazine from Carson Systems which visually reminds me of UX Magazine, but has a wider remit and appears more hands-on. Vitamin has a stack of great content to launch with, and no wonder, just take a look at that author list/advisory board. I’m off to cull some of my RSS feeds to make room in my day for all this stuff.
Posted: Tue 18 Apr 2006 ~ filed under General Web ;Standards ;
Eolas hits
The Eolas vs Microsoft case has finally hit home. Microsoft released the updates for IE today, including the patch to require an extra click for ActiveX controls. Microsoft however have given us an extra 2 months by including a hotfix which delays the impact until June. So if you haven’t updated your code, now would be a good time.
I’m with ole Tim Berners Lee on this one. Good on Microsoft for not backing down to patent extortion, far too much of that malarkey goes on as it is, though whether it’ll end up doing them more damage with the community than good we’ll only see later down the road. Eolas, can’t you see you’re antagonizing just about everyone out there?
Posted: Wed 12 Apr 2006 ~ filed under General Web ;Standards ;
CSS Naked Day
Where’d the design go? Well, it’s CSS Naked Day, an annual event to promote Web Standards. By producing semantic code this site should still make sense with the styles turned off.
To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.
Posted: Wed 5 Apr 2006 ~ filed under General Web ;Standards ;