{"@context":{"rdf":"http://www.w3.org/1999/02/22-rdf-syntax-ns#","rdfs":"http://www.w3.org/2000/01/rdf-schema#","owl":"http://www.w3.org/2002/07/owl#","foaf":"http://xmlns.com/foaf/0.1/","dc":"http://purl.org/dc/elements/1.1/","dct":"http://purl.org/dc/terms/","sioc":"http://rdfs.org/sioc/types#","blog":"http://vocab.amy.so/blog#","as":"https://www.w3.org/ns/activitystreams#","mf2":"http://microformats.org/profile/","ldp":"http://www.w3.org/ns/ldp#","solid":"http://www.w3.org/ns/solid#","view":"https://terms.rhiaro.co.uk/view#","asext":"https://terms.rhiaro.co.uk/as#","dbp":"http://dbpedia.org/property/","geo":"http://www.w3.org/2003/01/geo/wgs84_pos#","doap":"http://usefulinc.com/ns/doap#","time":"http://www.w3.org/2006/time#"},"@graph":[{"@id":"https://rhiaro.co.uk/2011/05/work-wanted","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-7666757292937788553","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"
Their previous version of this particular site was the image from the event\r\nposter, with links mapped onto it. It was mere moments before my progressive\r\nenhancement / responsive design OCD kicked in. The site in question is to\r\nadvertise this year's University of Lincoln Grad Ball, and is little more than\r\nan online poster. So here goes.
\r\n1530
\r\nMarked up the page, with HTML5 tags and the content from the poster, using\r\ncurrently non-existent classes where needed, and also including a few non-\r\nexistant images. Added my own mini CSS reset for the elements I was using.
1545
\r\nCut the couple of images I needed out of the poster png and uploaded them.\r\nSpent a while trying to find something to match the obscure Mac font that had\r\nbeen used on the poster. Impact was close, but didn't quite cut it at small\r\nsizes. Played with weighting and letter spacing for ages, but eventually\r\npicked a font from Google Web Fonts that did\r\nthe trick and styled all the typography related stuff.
1605
\r\nAligned, padded, margined and weighted everything as I wanted. Remembered to\r\nuse a HTML5 enabling script so versions of IE lte8 would actually bother to style things properly.
1625
\r\nTook a step back to look at content. The organisation of it was great for a\r\nposter, where you can pretty much see everything at once, but in any scenario\r\nwhere scrolling is a possibility, the most important stuff needs to go at the\r\ntop. So I rearranged some things.
1630
\r\nUsed CSS to hide a couple of elements that would do more harm than good on a\r\ndevice with a small display. Used media queries to show them for displays with\r\na greater width than 480px. With help for IE, of course.
Nasty, dirty cheating
\r\nOne of the images I used consisted mostly of text, with a few images plonked\r\naround it. I didn't have the energy to recreate this in a two-column list,\r\nespecially not with the apparently randomly floating images. The image is\r\nonly used for 480px+ of course. Mobile get a list. Unfortunately, I just\r\nused display:none. So mobile browsers are still loading the image. I hate\r\nme, too. But hey, I had an hour. It's better than the whole site being an\r\nimage.
READ MORE ABOUT RESPONSIVE DESIGN.
\r\nI wrote that in capitals, because it is not a suggestion.
\r\nAnd, if you're University of Lincoln final year student, get your tickets for\r\nthe Grad Ball, and resize your browser\r\nwindow while you're there. It's going to be the best one yet, as they say\r\nevery year.
\r\nIt doesn't really seem like much when summarised like this, but I do wish I\r\nwas paid more than £6 an hour.
","as:name":"Work wanted a website in an hour today.","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2011-05-13T19:27:00.000Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/lincoln+su"},{"@id":"https://rhiaro.co.uk/tags/Lincoln"},{"@id":"https://rhiaro.co.uk/tags/responsive+design"},{"@id":"https://rhiaro.co.uk/tags/web+development"},{"@id":"https://rhiaro.co.uk/tags/work"},{"@id":"https://rhiaro.co.uk/tags/lincoln"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-31T23:57:13.068Z"}},{"@id":"https://rhiaro.co.uk/tags/responsive+design","@type":"as:Collection","as:totalItems":{"@type":"http://www.w3.org/2001/XMLSchema#nonNegativeInteger","@value":"1"}},{"@id":"https://rhiaro.co.uk/tags/responsive+design?before=https://rhiaro.co.uk/2011/05/work-wanted&limit=16","@type":"as:CollectionPage","as:items":{"@id":"https://rhiaro.co.uk/2011/05/work-wanted"},"as:name":"responsive design","as:partOf":{"@id":"https://rhiaro.co.uk/tags/responsive+design"}}]}