{"id":2046,"date":"2010-07-13T11:25:00","date_gmt":"2010-07-13T11:25:00","guid":{"rendered":"http:\/\/jeffreyatw.wordpress.com\/2010\/07\/13\/website-review-treasure-island-music-festival-2010\/"},"modified":"2010-07-13T11:25:00","modified_gmt":"2010-07-13T11:25:00","slug":"website-review-treasure-island-music-festival-2010","status":"publish","type":"post","link":"https:\/\/jeffreyatw.com\/blog\/2010\/07\/website-review-treasure-island-music-festival-2010\/","title":{"rendered":"Website Review: Treasure Island Music Festival 2010"},"content":{"rendered":"<p>mentioned she liked reading my rants on how websites are built, and since I&#8217;m in the website-building business, it makes sense that I&#8217;d have some insights on what&#8217;s what. This is not to say that I&#8217;m an authority on how sites should be built, nor am I the only one spending time nitpicking. There are sites that focus on the whole package, like <a href=\"http:\/\/www.sitecritic.net\/\">Sitecritic.net<\/a> and <a href=\"http:\/\/www.webpagesthatsuck.com\/\">Web Pages That Suck<\/a> &#8211; both of which, for some reason, have pretty bad UI &#8211; but are thorough and well-written. As a developer, not a designer, I&#8217;ll try to focus mostly on use of code, and how websites that look just fine could greatly benefit from a bit of code rewriting.<br \/>\n(I don&#8217;t know if I&#8217;m going to write even more than one of these, so I decided I&#8217;d stick this on my personal blog for now.)<br \/>\nThe <a href=\"http:\/\/www.treasureislandfestival.com\/2010\/index.php\">lineup for the 2010 Treasure Island Music Festival<\/a> was released yesterday. I&#8217;m pretty excited about everything on day 1 (being more of an electronic than indie guy). The color scheme for this year is a little strange (reminds me of a rotten fruit salad) but otherwise I like the design they&#8217;re going for. I was a bit appalled when I took a look at the code and a hodgepodge of tables jumped out at me.<br \/>\n<img decoding=\"async\" src=\"http:\/\/jeffreyatw.com\/static\/images\/websitereviews\/timfsf\/1.png\" alt=\"The tables, Duke! The taaabblles!\" style=\"border:1px solid #aaa;\" \/><br \/>\nThere&#8217;s a myth that the <code>&lt;table&gt;<\/code> element is an awful, taboo, even deprecated thing that shouldn&#8217;t even be <em>thought<\/em> about when it comes to putting a site together. It&#8217;s false: <code>&lt;table&gt;<\/code> is great for, well, tables. Spreadsheets. Charts of data. Anything that can be logically arranged in rows and columns. But I don&#8217;t see any spreadsheets on this page:<br \/>\n<img decoding=\"async\" src=\"http:\/\/jeffreyatw.com\/static\/images\/websitereviews\/timfsf\/2.png\" alt=\"Rotten fruit salad\" style=\"border:1px solid #aaa;\" \/><br \/>\nIn fact, I don&#8217;t see any rows or columns at all, in a traditional sense. I suspect tables were used to &#8220;speed up&#8221; development, as this reeks of a &#8220;slice and dice&#8221; job, where the developer was given a mockup and he decided, for some reason, to splice it into tiny bits and shove it into a series of convoluted tables with <code>rowspan<\/code>s and <code>colspan<\/code>s.<br \/>\nBottom line: splicing is baaaad. I can&#8217;t think of a situation in which splicing would be a good thing to do. When you splice a PSD into tiny images and scatter them throughout a page, you do a few things:<\/p>\n<ul>\n<li>You waste time taking apart an existing design and putting it back together, when you don&#8217;t have to<\/li>\n<li>You make a page hard to maintain &#8211; what if the design changes?<\/li>\n<li>You increase the amount of HTTP requests by a buttload<\/li>\n<li>You doom a page&#8217;s SEO value by increasing load times, removing any opportunities to make a page semantic and machine-readable<\/li>\n<\/ul>\n<p>The developer, instead, could have exported the entire design as a single PNG (oh god, I just noticed that they&#8217;re all GIFs), set it up as the background of the main site container, and overlaid some absolutely-positioned lists, whose text content is hidden via CSS. That is to say, the site with styles disabled would look something like this:<\/p>\n<blockquote>\n<h3>Treasure Island Music Festival<\/h3>\n<p>October 16 &amp; 17, 2010<\/p>\n<ul>\n<li>LCD Soundsystem<\/li>\n<li>Deadmau5<\/li>\n<li>etc&#8230;<\/li>\n<\/ul>\n<ul>\n<li>Belle &amp; Sebastian<\/li>\n<li>The National<\/li>\n<li>etc&#8230;<\/li>\n<\/ul>\n<\/blockquote>\n<p>And with CSS implemented, the site would still look like it does above.<br \/>\nI am generalizing in one area, though, and that&#8217;s with hover states. If you yearn for the days when your visitors could be whisked away to a magic cyberspace of interactivity, then I guess you gotta implement your danged hover states one way or another, so you do have to splice the PSD and save the images individually (or turn them into <a href=\"http:\/\/www.alistapart.com\/articles\/sprites\">sprites<\/a>, or something equally clever), and use CSS to specify what shows up when you hover where. Instead, this site uses a horrid cocktail of JavaScript and invalid HTML attributes (srcover? oldsrc???).<br \/>\nIn general, this a site that, despite being functional and pretty-looking, makes me want to smack the developer upside the head. It lives in a world where <code>&lt;table&gt;<\/code>, <code>&lt;div&gt;<\/code>, and <code>&lt;img&gt;<\/code> are the only HTML elements worth using, substitutes CSS for deprecated\/invalid HTML attributes, loads a million images when in a perfect world it wouldn&#8217;t have to load any (web fonts! SVG! etc.!&#8230;), and sacrifices any chance of being accessible to search engine bots or those with disabilities (no meta tags, no alt text, not a hint of semantic HTML usage).<br \/>\nBoy, this was kind of therapeutic. If you found this at all interesting, feel free to send me some more examples. I&#8217;m looking to rant about recent, small-scale sites that aren&#8217;t overtly horrible but could use some work. Or I&#8217;ll find &#8217;em instead.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>mentioned she liked reading my rants on how websites are built, and since I&#8217;m in the website-building business, it makes sense that I&#8217;d have some insights on what&#8217;s what. This is not to say that I&#8217;m an authority on how sites should be built, nor am I the only one spending time nitpicking. There are&hellip; <a class=\"more-link\" href=\"https:\/\/jeffreyatw.com\/blog\/2010\/07\/website-review-treasure-island-music-festival-2010\/\">Continue reading <span class=\"screen-reader-text\">Website Review: Treasure Island Music Festival 2010<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[68,80,83,115],"class_list":["post-2046","post","type-post","status-publish","format-standard","hentry","category-blog","tag-music","tag-programming","tag-rant","tag-website-review","entry"],"_links":{"self":[{"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/posts\/2046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/comments?post=2046"}],"version-history":[{"count":0,"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/posts\/2046\/revisions"}],"wp:attachment":[{"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/media?parent=2046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/categories?post=2046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jeffreyatw.com\/blog\/wp-json\/wp\/v2\/tags?post=2046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}