magpiebrain

Sam Newman's site, a Consultant at ThoughtWorks

Posts from the ‘Web Design’ category

“Charles Miller”:http://fishbowl.pastiche.org/ has posted up on the Javablogs confluence wiki some information on “including Javablogs generated statistics graphs”:http://confluence.atlassian.com/display/JAVABLOGS/Including+Javablogs+Statistics+Graphs+on+Your+Blog on your site. The example HTML mixes the semantics of the markup with the presentation logic:

Entries Added

There are several issues with this markup. Firstly, there is a @

@ with no purpose other than to center our image. Secondly it uses a font @@ tag to create a title. Finally it uses the @border@ attribute on the image. All of these aspects are presentation logic, and as such should really be moved into CSS. The benifits of seperating presentation from content using proper semantic markup and CSS are many and varied, and I won’t go into them in depth here, suffice to say that if you’re intersted in the topic, grab a copy of Jeffrey ZeldmanÂ’s “Designing With Web Standards”:http://www.zeldman.com/dwws/, or checkout any of these sites:

* “A List Apart”:http://www.alistapart.com/
* “Mezzoblue”:http://www.mezzoblue.com/
* “The Daily Report”:http://www.zeldman.com/

Not being the one to point out the flaw and offer no better alternatives, I went about producing some nice compliant markup. Firstly, I started with the HTML itself:

Entries to Javablogs over time

Entries to Javablogs over time

Hits from Javablogs this week

Hits from Javablogs this week

Gone are the @@ tags, the @border=@ attribute, the useless @

@ tag. On its own, this looks pretty uninspiring. For a start, by putting the graphs in a @div@ they appear below each other. This is easily fixed with a bit of css:

.graph {
  float: left;
  margin-left: 30px;
}

The @margin-left@ gives a bit of a gap between the two graphs which now sit next to each other. This can introduce another problem however – any @div@ following the @graph@ will also appear on the same line – in my case my related entries @div@ was at fault – this was fixed using @clear@:

.related {
  clear:both;
}

Next, we want our graphs to be centred:

.graph img {
  text-align: center;
}

And finally format our caption:

.graph .caption {
  text-align: right;
  text-style: italic;
  font-size: 90%;
}

Net result? The HTML is smaller, and yet more meaningful – the presentation is entirely within CSS meaning we can easily use the same styles elsewhere, and we can also change styles quickly (and even have different styles for specific users). You can now see the end result on my “Site Statistics”:http://www.magpiebrain.com/archives/000227.html page.

A nice little site this – “Widgetopia”:http://www.eleganthack.com/widgetopia/ catalogues various widgets from websites. Resources such as this can help show just how functional a website’s UI can be, and more importantly can give some well needed inspiration to webapp UI designers. Its time webapp developers realised that their interfaces don’t need to be ugly, bland affairs, and that beyond looking nice, a decent functional design can make for a more pleasant and efficient user experience.

A whole array of useful sites and tools for you today.

* First off, this “on line PHP script”:http://www.nickherman.com/colormatch/ over at “nickherman”:http://www.nickherman.com/ will generate a colour palette based on a given colour.
* “Colours on the web(Colours on the web – color Theory and color matching)”:http://www.webwhirlers.com/colors/index.asp is a great site which also hosts a “colour wizard”:http://www.webwhirlers.com/colors/wizard.asp which from the description sounds great, however failed to work for me with a handy @Microsoft VB Script runtime error ‘800a0006’@ message. The text was also a little hard to read on the wizard page, but elsewhere the site had some great information
* “EasyRGB(EasyRGB – The first RGB and COLOR search engine on the web!)”:http://www.easyrgb.com/ is a very handy site packed with utilities such as a color harmony generator and tint search engine
* The online “QuickColor”:http://kohaistyle.com/scripts/quickcolor/ tool generates a harmonised colour palette in real time….
* As does this “very good looking flash utility”:http://www.defencemechanism.com/color/color_toy_fr.htm over at “Defence Mechanism”:http://www.defencemechanism.com/. This tool can generate random palettes for you, but doesn’t necessarily generate web-safe colours.
* Finally, “The Colour Schemer(The Color Schemer: The Ultimate Web Designer’s Color Tool)”:http://www.colorschemer.com/ is a shareware app that also generates palettes, albeit as a desktop tool.

Note, applicable the spelling of colour from other sites has been retained 🙂

Quite a few CSS resources have been sitting in my ‘to checkout’ bookmark folder for a while.

* “Position Is Everything”:http://www.positioniseverything.net/ is a CSS resouce site focusing on the use of CSS for positional layout. The hosted “Perched Upon a Lily Pad”:http://www.positioniseverything.net/guests/3colcomplex.html design which I first found out about from “Simon Willson (Simon Willson’s Blog)”:http://simon.incutio.com/ is especially good
* “CSSShark(The CSShark Answers FAQs)”:http://www.mako4css.com/index.htm has some CSS FAQ’s and tutorials.
* There is some good information over at the “CSS Panic Guide”:http://www.thenoodleincident.com/tutorials/css/index.html, although despite the clean looking site I found it a little hard to navigate.
* “The Nemesis Project”:http://nemesis1.f2o.org/ aims to gather all sorts of CSS resources together. I haven’t looked in too much depth but the “Meta Tag Generator”:http://nemesis1.f2o.org/meta hosted there is very handy.
* Eric Meyer’s “CSS Edge”:http://www.meyerweb.com/eric/css/edge/ aims to show the more exterme uses for CSS.
* Finally, “Glish.com”:http://www.glish.com/css/ has some more CSS layout techniques.

If you haven’t been already, you really should checkout the “CSS(Cascading Style Sheets) Zen Garden”:http://www.csszengarden.com/. The brainchild of “Dave Shea”:http://www.mezzoblue.com/, its a site with a number of high quality CSS(Cascading Style Sheets) designs showing what CSS(Cascading Style Sheets) can achieve in today’s browsers.