{"id":84,"date":"2004-10-12T10:09:06","date_gmt":"2004-10-12T14:09:06","guid":{"rendered":"http:\/\/bronwynboltwood.com\/?p=84"},"modified":"2010-05-14T05:26:11","modified_gmt":"2010-05-14T09:26:11","slug":"lime-spider-stylemaster-template","status":"publish","type":"post","link":"https:\/\/arndis.helioho.st\/wpbb2010\/2004\/10\/lime-spider-stylemaster-template\/","title":{"rendered":"Lime Spider Stylemaster Template"},"content":{"rendered":"<p><a class=\"tt-flickr tt-flickr-Medium\" title=\"Screenshot of my Lime Spider webpage template\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2785023300\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"mascot\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3095\/2785023300_5fe00fec1a.jpg?resize=396%2C500\" alt=\"Screenshot of my Lime Spider webpage template\" width=\"396\" height=\"500\" \/><\/a><\/p>\n<p>The webpage template I designed for <a href=\"http:\/\/www.westciv.com\">Westciv<\/a>&#8216;s 2004 competition won an honourable mention and was included in <a href=\"http:\/\/www.westciv.com\/style_master\/index.html\">Stylemaster<\/a> version 4 under the name <a href=\"http:\/\/www.westciv.com\/style_master\/product_info\/screenshots\/48.html\">Lime Spider<\/a>.<\/p>\n<p><strong><a href=\"\/static\/stylemaster\/smc-lime.html\">See a live demo of Lime Spider<\/a>. <\/strong>Isn&#8217;t it lovely in comparison with the <a href=\"\/static\/stylemaster\/smc-nostyles.html\">unstyled version<\/a>?<\/p>\n<p>Entries in the competition were expected to be valid, accessible XHTML and CSS. So, I used semantic code which is more accessible, especially for screen readers. I styled it so that text contrasted strongly with the background and could be resized without damaging the layout or aesthetics. Neither does it rely on having perfect colour vision, or have any images or plugins replacing the text. Lime Spider is readable, attractive, compatible with a wide range of browsers, fast-loading, and easy to modify.<\/p>\n<p>It is also a fluid design. It reshapes to fit your browser window width so long as it is not too narrow or wide to read comfortably.  Since its proportions are set in ems, they&#8217;re maintained regardless of your window or text size.<\/p>\n<p>I began by making a grey version, to hammer out the layout and typography, and then made several colour variations.<\/p>\n<ul>\n<li><a href=\"\/static\/stylemaster\/smc-grey.html\">Grey<\/a><\/li>\n<li><a href=\"\/static\/stylemaster\/smc-lime.html\">Lime<\/a><\/li>\n<li><a href=\"\/static\/stylemaster\/smc-autumn.html\">Autumn<\/a><\/li>\n<li><a href=\"\/static\/stylemaster\/smc-cobalt.html\">Cobalt<\/a><\/li>\n<li><a href=\"\/static\/stylemaster\/smc-cerise.html\">Cerise<\/a><\/li>\n<li><a href=\"\/static\/stylemaster\/smc-aqua.html\">Aqua<\/a><\/li>\n<li><a href=\"\/static\/stylemaster\/smc-lime2.html\">Lime v2<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This web page template won an honourable mention in Westciv&#8217;s 2004 style competition.<\/p>\n","protected":false},"author":2,"featured_media":452,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[42],"class_list":["post-84","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-web-design"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phitMV-1m","jetpack-related-posts":[{"id":144,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2005\/08\/lens-skin-for-pmwiki-v2\/","url_meta":{"origin":84,"position":0},"title":"Lens Skin for PmWiki v2","author":"Wyn","date":"August 29, 2005","format":false,"excerpt":"My very flexible Lens design template for the PmWiki web content management system.","rel":"","context":"In \"web design\"","block_context":{"text":"web design","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/web-design\/"},"img":{"alt_text":"Eggs theme for Lens PmWiki skin, author view","src":"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3278\/2806369899_4e9e0ab1b4.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":139,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2004\/03\/arndis-skin-for-pmwiki\/","url_meta":{"origin":84,"position":1},"title":"Arndis Skin for PmWiki","author":"Wyn","date":"March 14, 2004","format":false,"excerpt":"Liquid website design for a previous version of my personal site.","rel":"","context":"In \"web design\"","block_context":{"text":"web design","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/web-design\/"},"img":{"alt_text":"Arndis Skin for PmWiki v1 in Cream","src":"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3105\/2806322289_79fede379b.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":81,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2003\/05\/intranet-improvement-proposal\/","url_meta":{"origin":84,"position":2},"title":"Intranet Improvement Proposal","author":"Wyn","date":"May 27, 2003","format":false,"excerpt":"Research, programming, and technical writing on how to create a better technical support intranet.","rel":"","context":"In \"programming\"","block_context":{"text":"programming","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/programming\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2008\/02\/witchs-treehouse\/","url_meta":{"origin":84,"position":3},"title":"Witch&#8217;s Treehouse","author":"Wyn","date":"February 29, 2008","format":false,"excerpt":"This New Zealand treehouse is the permanent residence for a witch and a shaman.","rel":"","context":"In &quot;Residential&quot;","block_context":{"text":"Residential","link":"https:\/\/arndis.helioho.st\/wpbb2010\/category\/residential\/"},"img":{"alt_text":"Treehouse Model: view from ground","src":"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3280\/2803209798_c6003ef9c5.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":637,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/1950\/05\/inverse-peekaboo-bug-test\/","url_meta":{"origin":84,"position":4},"title":"Inverse Peekaboo Bug Test","author":"Wyn","date":"May 17, 1950","format":false,"excerpt":"This duplicate post is here so that Position Is Everything can study a bug it has in IE7.","rel":"","context":"In &quot;Residential&quot;","block_context":{"text":"Residential","link":"https:\/\/arndis.helioho.st\/wpbb2010\/category\/residential\/"},"img":{"alt_text":"Treehouse Model: view from ground","src":"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3280\/2803209798_c6003ef9c5.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":56,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2008\/04\/real-world-stress-test\/","url_meta":{"origin":84,"position":5},"title":"Real-World Stress Test","author":"Wyn","date":"April 29, 2008","format":false,"excerpt":"Model of a loadbearing structure smashed to flinders by a respectable 480lb.","rel":"","context":"In \"model-making\"","block_context":{"text":"model-making","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/model-making\/"},"img":{"alt_text":"Our smashable structure","src":"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3258\/2721507178_5870b87e63.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/arndis.helioho.st\/wpbb2010\/wp-content\/uploads\/2010\/05\/y0_limespyder_2785023300_5fe00fec1a_s.jpg?fit=75%2C75&ssl=1","_links":{"self":[{"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":10,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":543,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/posts\/84\/revisions\/543"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/media\/452"}],"wp:attachment":[{"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}