Webdesign checklist

Simon Schoeters <p>If you try to make the best out of a website you it's easy to loose track of the stuff you checked and the ones you missed. This list should help me not to forget the small optimizations next time. This list is by no means exhaustive and not every point is needed in every situation but it's a start. It is customized for my own web development projects but it could be a start point for your own checkpoint list as well. Note, this is a checklist, not a tutorial on how to write websites and it assumes you have some basic understanding about accessible webdesign (make sure your site still works with JavaScript turned off, split your HTML structure from the layout, etc).</p> <ul> <li>Write correct semantic HTML <ul> <li>Use a strict doctype</li> <li>Define your document language</li> <li>Define your content type for the XML and once more in the head</li> <li>Use microformats where possible: hCard, hReview, XFN, etc.</li> <li>Validate your finished page (or have reason why it does not)</li> <li>Correct HTML elements for the right content, did you know the <samp> element?</li> </ul> </li> </ul> <samp> <?xml version="1.0" encoding="utf-8"?><br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br /> <head><br /> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><br /> <title></title><br /> </head><br /> <body><br /> </body><br /> </html><br /> </samp> <ul> <li>Decent CSS <ul> <li>No browser dependent hacks (if possible)</li> <li>Never use JavaScript to load styles</li> <li>Use only external stylesheets so it can be cached (no more then 8kB)</li> <li>Write general CSS, be aware for ‘<a href="http://joshuaink2006.johnoxton.co.uk/blog/330/avoiding-classitis" title="Avoiding classitis by John Oxton" class="ext">classitis</a>’</li> <li>Different colors for visited links (a:visited)</li> </ul> </li> <li>Check your sites browser compatibility <ul> <li>Internet Explorer</li> <li>Firefox</li> <li>Opera</li> <li>Safari</li> <li>Lynx</li> <li>Mobile devices</li> </ul> </li> <li>Accessibility <ul> <li>Still readable for people with color blindness?</li> <li>Enough contrast between text and background?</li> <li>Test with larger font sizes</li> <li>Add a 'last updated' date</li> </ul> </li> <li>SEO or Search Engine Optimization <ul> <li>Google Sitemap</li> <li>robots.txt</li> <li>Google Analytics</li> <li>Use rel="nofolow" for links in the comments</li> <li>Technorati</li> <li>Add the description and keywords meta tags</li> <li>Add <abbr title="Dublin Core">DC</abbr> meta tags (optional)</li> </ul> </li> <li>Performance <ul> <li>As HTTP requests</li> <li>Check image file sizes</li> <li>Optimize include files (get rid of white spaces in CSS or JavaScript files)</li> <li>GZIP all your output</li> <li>Use the expire cache in Apache</li> <li>Move JavaScripts to the bottom of the page where possible</li> </ul> </li> <li>Content</li> <li>License, check the CC licenses</li> <li>Nice extra's <ul> <li>XML</li> <li>JSON</li> <li>OpenSearch</li> </ul> </li> </ul> <p>Missing something? Write a short comment so I can add it to the list.</p> <h3>Tools</h3> <ul> <li><a href="http://www.paciellogroup.com/resources/contrast-analyser.html" title="Contrast Analyser" class="ext">Software tool for checking foreground & background colour combinations</a></li> <li><a href="http://www.vischeck.com/vischeck/" title="Vischeck" class="ext">How does your website look like to someone who is color blind?</a></li> <li><a href="http://michelf.com/projects/sim-daltonism/" title="Sim Daltonism" class="ext">Sim Daltonism, a color blindness simulator for Mac OS X</a></li> <li><a href="http://www.graybit.com/" title="GrayBit" class="ext">Convert a full-color web page into a grayscale rendition</a></li> <li><a href="http://developer.yahoo.com/yslow/" title="Really useful extension for Firebug to check a site's performance" class="ext">Yahoo! YSlow extension to check a site's performance</a></li> <li><a href="http://www.websiteoptimization.com/services/analyze/" title="Web Page Analyzer" class="ext">Website Performance Tool and Web Page Speed Analysis</a></li> </ul> <h3>Read more</h3> <ul> <li><a href="http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/" title="Color contrast checking tools to improvet the accessibility of your design" class="ext">Color contrast checking tools to improve the accessibility of your design</a></li> <li><a href="http://www.456bereastreet.com/archive/200603/evaluating_website_accessibility_part_3_digging_deeper/" title="Evaluating website accessibility part 3, Digging Deeper" class="ext">Evaluating website accessibility</a></li> </ul>

2007-09-27T00:11:18+02:00

webdesign-checklist Webdesign checklist

2008-10-10T17:41:39+02:00

Simon Schoeters <p>It's all about the map in this sites header today. The header background shows a dynamically generated map of the coordinates shown in the right top corner, or my last recorded place. I can select my current location (latitude and longitude) and the header background map is updated accordingly. So how exactly does this work?!</p> <h3>No Google or Yahoo! maps?</h3> <p>I integrated Yahoo! Maps first. The Yahoo! Maps look nice, the API is easy to use and well documented but the problem is that you are only allowed to play with these maps within limits placed on you by the API's terms and conditions. Below are some extracts from the <a href="http://info.yahoo.com/legal/us/yahoo/maps/mapsapi/mapsapi-2141.html" title="Yahoo! Terms Center" class="ext">Yahoo! Maps API Terms of Use</a>:</p> <ul> <li>You understand and agree that you must retain the attribution text and links contained within all Yahoo! Maps and Yahoo! Map images without alteration.</li> <li>Your will not store or allow end users to store map imagery, map data or geocoded location information from the Yahoo! Maps APIs for any future use.</li> </ul> <p>I would break these terms as I convert the original image to a grayscale version and store the map on the server for performance reasons so the Yahoo! Maps are out of the question. Google or Yahoo! Maps are great for out of the box functionalities but if you want more freedom you will probably have to look elsewhere (or pay for licenses if possible).</p> <h3>OpenStreetMap</h3> <p>Luckily for us there are other solutions out there. Let's take a look at <a href="http://www.openstreetmap.org/" class="ext">OpenStreetMap</a> for example. OpenStreetMap is a ‘wiki style’ editable map, made by people like you and me. The content is available under the Creative Commons Attribution-ShareAlike 2.0 license which means anyone can use (and remix) the data as long as you share it with a similar license.</p> <p>This ‘Wikipedia-like’ approach has some drawbacks as well: the map is incomplete and the data is not 100% reliable. On the other side you can correct or complete the map where needed. This may or may not be important for your project but I only needed a nice background image for this website so a general overview of the area is more than sufficient.</p> <p>OpenStreetMap has a RESTfull way to build a map image with a given latitude, longitude, zoom level and image size. Here is how (or see an example for <a href="http://tah.openstreetmap.org/MapOf?lat=50.8668&long=4.69714&z=12&w=200&h=200" title="OpenStreetMap map of my home town" class="ext">my city</a>):</p> <samp>http://tah.openstreetmap.org/MapOf?lat=<lat>&long=<long>&z=<zoom>&w=<width>&h=<height>&skip_attr=1</samp> <p>The <code>skip_attr</code> defines if you want to include an <abbr title="OpenStreetMap">OSM</abbr> attirbution image in your map or not.</p> <h3>Start coding</h3> <p>The process flow:</p> <ol> <li>The current location is updated on the website,</li> <li>a map of this new location is downloaded from a map server,</li> <li>the downloaded map image is converted to grayscale and</li> <li>the generated image is saved to disk.</li> </ol> <p class="center"><img src="/images/map_flow.gif" alt="Map flow" /></p> <p>We'll use <a href="http://rmagick.rubyforge.org/" title="Graphics Processing for Ruby and Ruby on Rails" class="ext">RMagick</a> and Ruby on Rails to convert the downloaded image to something else so make sure you have this installed first.</p> <samp># Writes an image with a map of the location, the zoom ranges from 4 to 17<br /> def map(latitude, longitude, width = 500, height = 500, zoom = 7)<br /> require 'RMagick'<br /> require 'open-uri'<br /> map_request_url = "http://tah.openstreetmap.org/MapOf?lat=#{latitude}&long=#{longitude}&z=#{zoom}&w=#{width}&h=#{height}"<br /> uri = URI.parse(map_request_url)<br /> map = Magick::ImageList.new<br /> map.from_blob(uri.read)<br /> map = map.quantize(256, Magick::GRAYColorspace)<br /> map.write(RAILS_ROOT + '/public/images/map.png')<br /> end</samp> <p>That's it, this method downloads and converts the image and saves it in your images folder so from now on you can use this image in your website:</p> <samp><img src="/images/map.png" alt="Map" /></samp> <h3>More resources</h3> <ul> <li><a href="http://www.alistapart.com/articles/takecontrolofyourmaps" title="Take Control of Your Maps" class="ext">Take Control of Your Maps</a> explains how to build you own map stack.</li> </ul>

2008-04-15T18:14:57+02:00

generated-maps Generated maps with Ruby on Rails

2008-09-19T01:45:44+02:00

Simon Schoeters <p>Only 3 days ago we launched the first version of <a href="http://www.milkcarton.be/apps/lustro" title="Lustro, export your Address Book contacts" class="ext">Lustro</a>. It took us a week between the beta testing and the final release and we fixed and enhanced quite a few things. Lustro is our little Mac OS X Leopard app to export your Address Book contacts to <abbr title="Comma-separated values">CSV</abbr>, tab delimited, hCards and Google Contacts.</p> <h3>Google Contacts export</h3> <p>A few months back making an application that exports your Address Book contacts to GMail sounded like a useful idea. Little the we know that Apple was working on the same thing. A few weeks before we released the beta version Apple came out with their built-in Address Book to Google Contacts export with the release of <a href="http://support.apple.com/kb/HT1141" class="ext" title="About the Mac OS X 10.5.3 Update">Mac OS X 10.5.3</a>. We are not good enough to beat Apple... not yet.</p> <p>We decided to keep the Google export in Lustro for the following reason (copied from the Lustro Help):</p> <blockquote>“Address Book also synchronizes with MobileMe, Exchange, Yahoo! and Google if you enable this in the preferences. Lustro still includes the Google Contacts export as the Address Book syncing only works if you have connected an iPhone or iPod Touch before and the syncing mechanism is not perfect at the time of writing (e.g. company cards show an empty name in the GMail contacts list).”</blockquote> <p>So there are a few smaller reasons why you would still use Lustro today, maybe we can add the photo export in the next release as Apple skipped that one as well.</p> <h3>hCard exports</h3> <p>The other mayor feature are the <a href="http://microformats.org/wiki/hcard" title="hCard - Microformats wiki" class="ext">hCard</a> exports. We couldn't find any hCard exporters for Apple so why not include it? We got some indirect feedback from <span class="vcard"><a href="http://flickr.com/photos/factoryjoe/2625201023/" class="fn ext">Chris Messina</a>, <span class="vcard"><a href="http://flickr.com/photos/factoryjoe/2625201023/comment72157605921180862/" class="fn ext">Brian Suda</a></span>, <span class="vcard"><a href="http://flickr.com/photos/factoryjoe/2625201023/comment72157605908401795/" class="fn ext">Tantek Çelik</a></span>, <span class="vcard"><a href="http://microformatique.com/?p=263" class="fn ext">John Allsopp</a></span> and <span class="vcard"><a href="http://ma.gnolia.com/people/adactio/bookmarks/scucuwumuch" class="fn ext">Jeremy Keith</a>, whow, I'm impressed! In the end I think we released Lustro a little too late for the GMail export thing, the buzz was over and lots of GMail exporters started to pop-up but the hCard export made up for that one.</p> <p><span class="vcard"><a href="http://flickr.com/photos/factoryjoe/2625201023/comment72157605921180862/" class="fn ext">Brian Suda</a></span>'s idea for a distributed hCard export sounds great. I don't think it fits in Lustro as it's the opposite way but I can see an Address Book plugin that ‘subscribes’ on hCard enabled webpages.</p>

2008-07-03T20:02:40+02:00

lustro-out-now Lustro on the streets

2009-02-21T22:09:25+01:00