{"@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/design","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-5487103910304554663","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"
At the Future of Web Design conference earlier this month, I was inspired. As\r\na developer primarily and a designer when I have to be, the talks and people\r\nat FOWD were perhaps more valuable to me than if my main focus was on design.\r\nI don't need inspiration to develop, but I do to design.
\r\nBut an incredibly busy week and a bit later, I find I haven't had an\r\nopportunity to really make use of the ideas that were triggered at the\r\nconference; not only that, but the inspiration is beginning to fade. And I\r\nwill struggle to find time to watch the talk videos over the next few weeks.
\r\nI had intended to shove together a new portfolio site, to match my shiny new\r\nbusiness cards, before the first day of FOWD. Naturally I didn't manage to\r\nstick to this deadline, continued to work on the site during the conference,\r\nand to this day the redesign remains unfinished at localhost/. It is so far\r\nresponsive up to iPad dimensions, but the design that I was initially\r\nsatisfied with has fallen out of my favour, so I'm struggling to finish. I've\r\nbeen browsing collections of great web design, like\r\nthis one, as well as staring agonisingly at localhost/, hoping for\r\nre-inspiration.
\r\nTurns out I dislike quite a few of the designs on that list. Some just have\r\ntoo much blank space. Many go way overboard with the 'Web 2.0' look; glossy\r\nbuttons, excessive rounded corners, and the like. Pretty on first glance,\r\nperhaps, but after seeing so many sites in the same style, you suddenly\r\nrealise the genericness of them all; they give an impression of designers who\r\nforgot that the purposes of, or the companies behind the sites have their own\r\npersonalities and branding that can't be represented simply with shiny buttons\r\nand background gradients.
\r\nI am currently a fan of textured backgrounds, and I'll confess I am currently\r\nof the opinion that a text shadow automatically makes almost any header text\r\nlook better. I'm sure this will wear off, just like glossy buttons did. But\r\nI'm still struggling to find a style that suits me personally (and matches my\r\nbusiness cards).
\r\nSo far, just writing about it has helped a little, and I think I have enough\r\nbeginnings of new ideas to push on. Watch this space.
\r\n__
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/2012/12/digital-totem","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-6405518298166615701","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:name":"Digital Totem Pole","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2012-12-12T11:36:00.001Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/chris+speed"},{"@id":"https://rhiaro.co.uk/tags/community+hacking"},{"@id":"https://rhiaro.co.uk/tags/digital+sentinel"},{"@id":"https://rhiaro.co.uk/tags/eca"},{"@id":"https://rhiaro.co.uk/tags/fields"},{"@id":"https://rhiaro.co.uk/tags/php"},{"@id":"https://rhiaro.co.uk/tags/plugin"},{"@id":"https://rhiaro.co.uk/tags/totem+pole"},{"@id":"https://rhiaro.co.uk/tags/web+development"},{"@id":"https://rhiaro.co.uk/tags/wester+hailes"},{"@id":"https://rhiaro.co.uk/tags/wordpress"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2012-12-12T11:36:51.514Z"}},{"@id":"https://rhiaro.co.uk/2013/04/not-taming-blogger","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-1900084843425069832","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"Change of plan. Trying to run the whole thing with Blogger templates did not\r\nresult in a happy time. So the main site pulls and manipulates the Blogger\r\nRSS feed, with Simple Pie making that easy.
\r\nI then simplified the actual Blogger template and made it match and stuff.\r\nThe general intention now is that individual posts and comments will be\r\nviewed, if necessary, via Blogger, in a kind of archive-y way, but the content\r\norganised as I see fit exists on the main site as the primary port of call.
\r\nBut my goodness does Blogger automatically add some crap into its templates.\r\nI delete stuff and it comes right back. Pointless classes, and divs, and\r\ngeneral unnecessary bulky markup. I give up with trying to strip all that\r\nout.
\r\nBy the way, the source code for the site is\r\nhere. Share and share alike, yada.
","as:name":"Not taming Blogger after all","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-04-02T20:46:00.001Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/doing"},{"@id":"blog:Doing"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/web+development"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-04-02T23:30:33.625Z"}},{"@id":"https://rhiaro.co.uk/2015/07/1435828140","@type":"as:Add","as:actor":{"@id":"https://rhiaro.co.uk/about#me"},"as:object":{"@id":"http://tantek.com/2012/353/b1/why-html-classes-css-class-selectors"},"as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2015-07-02T10:09:00+0100"},"as:summary":"Amy added http://tantek.com/2012/353/b1/why-html-classes-css-class-selectors to https://rhiaro.co.uk/bookmarks/","as:tag":[{"@id":"https://rhiaro.co.uk/tags/class"},{"@id":"https://rhiaro.co.uk/tags/css"},{"@id":"https://rhiaro.co.uk/tags/html"},{"@id":"https://rhiaro.co.uk/tags/microformats"},{"@id":"https://rhiaro.co.uk/tags/tantek"},{"@id":"https://rhiaro.co.uk/tags/web+development"}],"as:target":{"@id":"https://rhiaro.co.uk/bookmarks/"}},{"@id":"https://rhiaro.co.uk/2015/07/1438158778","@type":"as:Announce","as:actor":{"@id":"https://rhiaro.co.uk/about#me"},"as:content":"","as:object":{"@id":"https://adactio.com/journal/9312"},"as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2015-07-29T09:32:58+0100"},"as:summary":"Amy shared https://adactio.com/journal/9312","as:tag":[{"@id":"https://rhiaro.co.uk/tags/advertising"},{"@id":"https://rhiaro.co.uk/tags/browsers"},{"@id":"https://rhiaro.co.uk/tags/performance"},{"@id":"https://rhiaro.co.uk/tags/web+development"}]},{"@id":"https://rhiaro.co.uk/2016/05/-web-isnt","@type":"as:Announce","as:content":"\r\n\r\n","as:object":{"@id":"https://medium.com/@fox/the-web-isn-t-uniform-fd67eb631501"},"as:published":{"@type":"http://www.w3.org/2001/XMLSchema#dateTime","@value":"2016-05-01T21:34:09+01:00"},"as:summary":"Amy shared https://medium.com/@fox/the-web-isn-t-uniform-fd67eb631501","as:tag":[{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/life"},{"@id":"https://rhiaro.co.uk/tags/medium"},{"@id":"https://rhiaro.co.uk/tags/progressive+enhancement"},{"@id":"https://rhiaro.co.uk/tags/web+design"},{"@id":"https://rhiaro.co.uk/tags/web+development"}]},{"@id":"https://rhiaro.co.uk/tags/web+development","@type":"as:Collection","as:totalItems":{"@type":"http://www.w3.org/2001/XMLSchema#nonNegativeInteger","@value":"7"}},{"@id":"https://rhiaro.co.uk/tags/web+development?before=https://rhiaro.co.uk/2016/05/-web-isnt&limit=16","@type":"as:CollectionPage","as:items":[{"@id":"https://rhiaro.co.uk/2016/05/-web-isnt"},{"@id":"https://rhiaro.co.uk/2015/07/1438158778"},{"@id":"https://rhiaro.co.uk/2015/07/1435828140"},{"@id":"https://rhiaro.co.uk/2013/04/not-taming-blogger"},{"@id":"https://rhiaro.co.uk/2012/12/digital-totem"},{"@id":"https://rhiaro.co.uk/2011/05/design"},{"@id":"https://rhiaro.co.uk/2011/05/work-wanted"}],"as:name":"web development","as:partOf":{"@id":"https://rhiaro.co.uk/tags/web+development"}}]}"The Web isn't uniform; it's countless flowing layers, each affecting user experiences in its own way."
\r\n