<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:georss='http://www.georss.org/georss' xmlns:gd='http://schemas.google.com/g/2005' xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-30402957</id><updated>2011-04-21T23:49:27.130Z</updated><title type='text'>Spannah in the works</title><subtitle type='html'></subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default?max-results=100'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>32</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>100</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-30402957.post-400751931425126668</id><published>2008-06-01T19:05:00.012Z</published><updated>2008-06-11T14:28:13.756Z</updated><title type='text'>@media, day 2</title><content type='html'>&lt;p&gt;&lt;br /&gt;&lt;em&gt;Professional front-end engineering&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Nate Koechley&lt;/strong&gt;&lt;br /&gt;An interesting, but fast-paced presentation from Nate Koechley of Yahoo. Its always really interesting to hear how 'big sites' manage work. The very title of this presentation also rings a bit of a change - the fact that there is more of a requirement emerging to fill that specialised knowledge gap between designers and back-end developers.&lt;br /&gt;Nate mentioned how the team supports 'grades' of browsers, layering the 'richness' of the user experience according to the technology each grade supports. This enables the experience to degrade gracefully for older browsers, yet the content remains accessible to all. He promoted the use of tags such as 'cite', 'caption' and 'thead', proper use of declorations and inobtrusive javascript. Other interesting tips which really drive home the level of optimisation these popular sites require, included the method of horizonal alignment of CSS sprites rather than vertical, as this seemed to result in a much faster load time. Also, avoiding gaps between icons has a positive effect on optimisation. Oh and don't use @import for calling CSS files.&lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;Building on the shoulders of giants&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Jonathan Snook&lt;/strong&gt;&lt;br /&gt;A presentation about APIs/mashups/frameworks. Jonathan talked about how developers try to re-invent the wheel whereas designers re-use. With that in mind, he suggested that developers follow the 're-use' approach and look at what's already out there and established. He touched upon some of the main frameworks available.&lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;For example: The Guadian &amp; Dopplr&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Marc Pacheco &amp; Matt Bidulph&lt;/strong&gt;&lt;br /&gt;Marc focused on challenges the Guardian faces with CSS management. Due to the variety of layouts, many CSS files are used. In the development phase, the files are kept separate for easy maintenance and are called using @import. These are then merged when the site is published. He mentioned that in his experience researching CSS management, there was very little information available and very few tools that aid the control and maintenance of large numbers of CSS files. Particular issues discussed during the Q&amp;A, were the locating of specific code in large files and the removal of redundant classes etc. Hmmm - am there are tools out there for that. I attended a Microsoft presentation on Expression Web and remember quite a feature was made of CSS management. Must investigate further...&lt;br /&gt;Matt Bidulph focused on the use of APIs for his talk on the development of Dopplr. He made the point that an application is more interesting with other people's data in it. Dopplr uses a number of APIs to combine features and data. He mentioned how it can integrate with Google. Pretty interesting, and I can see how it can work for social netwoking sites, but not sure you would want to rely on third party data etc for business critical purposes. To ensure total control, you kind of need to re-invent the wheel to a degree, I guess.&lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;Communicating best practices&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Rachel Andrew, Paul Boag, Patrick H Lauke &amp; Murray Rowan&lt;/strong&gt;&lt;br /&gt;I was a bit disappointed with this session, but I think that may have been because it covered similar points from previous years. Only a problem if you've been to a few of these events. And I think they are probably important points worth covering. Much of the session discussed how to present good practices to stakeholders, how to make them a selling point, backing up the reasons why. Or whether we should just follow this best practices anyway as matter of course. I would say a bit of both. Another point covered, was how did the panel handle clients that insisted on doing something that went against the grain. Answers to this was to inform the client of the reason, backing it up with articles from third parties if necessary, then making a point that you would perform the task but it was against advice and that once the project was completed, you would not wish to be associated with it/wouldn't want to include it in your portfolio. This often surprises clients, enforces a sense of integrity and drives home how much you disagree with a principle.&lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;Richard Ishida&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Global design: Characters, language and more&lt;/strong&gt;&lt;br /&gt;An interesting presentation discussing character encoding (never been quite sure of what all this truly meant, but have a vague reference point now!) He explained the importance of declaring the language in the header ie. lang="en" or xml:lang="en" and how Unicode encoding UTF-8 is favourable. It certainly explained why random characters might appear if the correct encoding wasn't declared. I will start looking at headers in websites to spot this now!&lt;br /&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-400751931425126668?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/400751931425126668/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=400751931425126668' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/400751931425126668'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/400751931425126668'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2008/06/media-day-2.html' title='@media, day 2'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-4283335460431732058</id><published>2008-06-01T19:05:00.008Z</published><updated>2008-06-04T18:05:04.154Z</updated><title type='text'>@media 2008</title><content type='html'>Thursday and Friday last week was @media 2008, held at Southbank Centre. The venue was certainly one of the better choices for the event, especially due to its proximity to Waterloo Station.&lt;br /&gt;&lt;br /&gt;I've attended all of the @media conferences and have enjoyed them all. I was a little concerned this year as the schedule seemed to remain quite gappy close to the event date, but I needn't have been concerned as I didn't feel short-changed. Although I didn't come away with any major revelations, I did enjoyed it and felt, as ever, it raised debate and refreshed inspiration!&lt;br /&gt;&lt;br /&gt;SO common themes that seemed to emerge for me this year:&lt;ul&gt;&lt;br /&gt;&lt;li&gt;Making use of established APIs to enhance data and save on development&lt;/li&gt;&lt;br /&gt;&lt;li&gt;The stronger emergence of a role to cover 'front end engineering/development'&lt;/li&gt;&lt;br /&gt;&lt;/ul&gt;&lt;br /&gt;Anyway, here's my take on the sessions I attended...&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;Designing our way through data&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Jeffrey Veen&lt;/strong&gt;&lt;br /&gt;I enjoyed this keynote. Jeffrey Veen, among many other things, worked on Google's Analytics front end and this session focused on the presentation of data. He drew upon examples from history and from other disciplines to show how data can tell stories. He talked about how the graphical interpretation of data can enhance the message by allowing the story to be told at a glance. He also warned against 'chart junk' - using graphical devices that woolly the message and just provide a surface gloss rather than making the data easier to interpret. Examples of creative design included Beck's London Underground map, John Snow's map of cholera outbreaks and the art of Chris Jordan.&lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;For example: BBC Home page + Clear Left&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Tom Cartright &amp; Claire Roberts, and James Box&lt;/strong&gt;&lt;br /&gt;Two case studies here, one describing the development of the BBC home page which had communicated the strong requirement to optimise the site in order to deal with the many requests it receives, and Clear Left's role in the Edenbee website. A couple of interesting points James Box made, was that Clear Left 'don't do deliverables'. They may work with wireframes etc for the development of a site, but they don't present these to the client. He also offered the advice that when approaching social/community websites, design FOR a community, don't try and design A community. The case study also covered the use of API's.&lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;Getting your hands dirty with HTML 5&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;James Graham &amp; Lachlan Hunt&lt;/strong&gt;&lt;br /&gt;Some showcasing of some features of HTML 5, including specific tags that would reduce the need for divs with classnames; contextual h1 tags; a legend tag that would allow for captioning of images, objects etc; the opportunity to display video from the browser without the need for plugins.&lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;Underpants over my trousers&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Andy Clarke&lt;/strong&gt;&lt;br /&gt;An interesting session looking at how a comic book communicates a story and how these techniques can be adopted by the web designer. Andy told of how he struggled to make a newspaper site look 'different' and how he used comics as his inspiration for breaking away from the predictable approach. He provided examples of how comic book writers/artists use scale, grids, proportion to create a sense of drama and tension. How they provide non-specific cues to the reader to guide them round a page. He then showed how he used these techniques for his design and how he built the css to realise it. It was also interesting to note that aspects of the design may have been tricky to implement in reality when images and content would be created on the fly. However, its always a trade off building something that appears unique and 'un content-managed', requiring a high degree of control over individual elements, and something that is practical and easy to maintain by non-designers. &lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;Designing user interfaces: details make the difference&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Dan Rubin&lt;/strong&gt;&lt;br /&gt;Dan talked about the level of detail he puts into his designs in order to give them that extra edge. He discussed grids and using increments of units to create spatial relationships (vertical and horizontal padding) to create a harmony/pattern/rhythm to the page. Even if it uses just units of ten, it helps to give the design a sense of consistency and also aids the designer as this enables the designer to make many design decisions up front. He mentioned letter spacing to tighten headings and a very good tip - using a non-breaking space to prevent the occurence of widows. Dan continued with some photoshop tips to give texture and depth to what could otherwise be a flat and 'shiney' medium. Tips included using layer blends, taking sections from photographs and adding noise to create textures, overlaying colour layers to make colour changes quick and easy. He showed how very small changes could be made to improve a site, using an example that took just a couple of hours. I came away with the overall message from him that as designers, we shouldn't submit a design unless we're happy with it, even if it means tinkering with the details until it works just right.&lt;br /&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;br /&gt;&lt;em&gt;Hot Topics Panel&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Jeffrey Veen, Andy Clarke, Dan Rubin, Bronwyn Jones&lt;/strong&gt;&lt;br /&gt;An interesting debate including topics covering developer/designer working processes and the provision (or lack) of content from clients - am sure there was plenty more but its escaped me for the time being!!&lt;br /&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-4283335460431732058?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/4283335460431732058/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=4283335460431732058' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/4283335460431732058'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/4283335460431732058'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2008/06/media-2008.html' title='@media 2008'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-6655840234991986455</id><published>2008-05-20T17:17:00.002Z</published><updated>2008-05-20T18:15:57.794Z</updated><title type='text'>Silverlight game continued...</title><content type='html'>Well the game has been making progress, if a little slow. The developer I'm working with has dabbled with a little games programming in the past but has been learning Silverlight games programming techniques as we've gone along. So between the two of us, its pretty much been a case of getting stuck in.&lt;br /&gt;&lt;br /&gt;Once I'd drawn the characters in Expression Design, I exported them as xaml files, added them to a Blend project and worked on the (very basic!) animations for each character. For some characters I created just the one storyboard, other characters have several so that they can work independently and randomly. The developer requested I make each character a User Control. Getting this just right for him to work on took a bit of re-jigging: ensuring that the character was positioned within a canvas rather than the default grid, plus resizing the canvas tight to the character's edges. Some animations worked well when added to the game, others required some tweaking. Initially I'd worked with two 'states' which consisted of the basic character which was swapped to another image of the character in its altered state. This didn't seem the right approach and indeed didn't really work well in situ so I found working on the change of features directly in Blend in the storyboard far more satisfactory. Having used Expression Design really was an advantage when working with Blend, as methods of editing vector images are shared between the two.&lt;br /&gt;&lt;br /&gt;The most exciting thing was seeing the characters and animations in a game that works! The game is playable at the moment but not finished - still some more to work on but its oh so close!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-6655840234991986455?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/6655840234991986455/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=6655840234991986455' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/6655840234991986455'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/6655840234991986455'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2008/05/silverlight-game-continued.html' title='Silverlight game continued...'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-3469332511810597509</id><published>2008-03-20T16:52:00.003Z</published><updated>2008-03-20T17:01:19.108Z</updated><title type='text'>Silverlight game</title><content type='html'>Well for some reason I decided to create a really basic game in Silverlight. When I say 'I', I really mean I will do so with a lot of technical help from a colleague, but decided it would be a good way to get to grips with a bit more Silverlight and the Expression tools. My first step was to create some assets for my game, so I came up with a theme and created some characters using Expression Design. Now I can see Expression Design coming in for some design-snobbery criticism, but I actually find it ok to use. I still get frustrated, however, by the colour selection in the gradient tool, but otherwise I found it ok. I decided to create large illustrations of my characters initially, then set up the game layout and scaled down the grapics to put them in position. I need now to tweak the illustrations so that they work better at a smaller size - some will also need refining so that they relate to each other more effectively and look like part of a 'suite' of characters so to speak. Once that's been done, I will need to export them as xaml files to import into Expression Blend. Lots to do!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-3469332511810597509?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/3469332511810597509/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=3469332511810597509' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/3469332511810597509'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/3469332511810597509'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2008/03/silverlight-game.html' title='Silverlight game'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-4710366231187741397</id><published>2007-10-30T14:50:00.000Z</published><updated>2007-11-01T18:09:21.435Z</updated><title type='text'>Windows Vista sidebar gadgets</title><content type='html'>I've just worked on a couple of sidebar gadget designs and its so refreshing to work on something different. Well, I say different but I guess its not that much of a step from web page design. However, I have got a little crazed by the freedom of designing for something so specific! Its still HTML, its still CSS, its still JavaScript, but suddenly there's no shame in fixing a width and height - how much easier is that to design for?? No need for clever workarounds and compromises for backgrounds to varying height pages, no more worries about browser interpretation issues (although its good practice to keep aware of all that in case your design is to become re-used for a web gadget) AND you get to use transparent PNGs! How exciting is that? Sad, I know, but I got a real thrill when I overlaid a PNG image that graduated to transparent onto a background image.&lt;br /&gt;&lt;br /&gt;The tricky part was getting into the size restriction - designing small. When you're used to designing pages for 800 x 600 resolution, it takes a change in mindset to try and get branding info plus the all important content onto something with a width of 130 pixels. I imagine its like playing tennis all the time on one sized court and then switching to a smaller - you have to find your range. In the same way, you start to get a feel for what will work in that size restriction. In some ways, I guess it could almost define whether the content is gadget-worthy. If its not bitesize enough, then maybe its no use as a gadget. I look forward to getting to grips with a few more  and finding my range.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-4710366231187741397?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/4710366231187741397/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=4710366231187741397' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/4710366231187741397'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/4710366231187741397'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/10/windows-vista-sidebar-gadgets.html' title='Windows Vista sidebar gadgets'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-1946715308383800386</id><published>2007-09-30T10:25:00.001Z</published><updated>2007-09-30T10:56:17.021Z</updated><title type='text'>Sliverlight animation</title><content type='html'>Having attended Microsoft's Mix 07, I decided it was high time to have a crack at using Expression Blend to create a basic Silverlight animation sequence. Now I've done very little animation in my time - pretty much just gif animation, so I'm conscious that I am as much learning about animation techniques as Expression Blend and Silverlight. It certainly was a good introduction to using Expression Blend and XAML. I will write the whole thing up in much greater detail alongside the animation on my site when I've tweaked a few things. In fact, I mean to keep at it so will probably publish several versions as I go along. But for now, I just wanted to mention some of the issues that cropped up while they are fresh in my mind.&lt;br /&gt;&lt;br /&gt;The first thing that became evident, was the need to be familiar with XAML. Now I have no experience with this at all, but it doesn't actually look too daunting. My first task was to get an eps file into Blend. This meant that I needed to export the eps as a XAML file. For this, I used an Illustrator plugin downloaded from &lt;a href="http://www.mikeswanson.com/xamlexport/"&gt;www.mikeswanson.com&lt;/a&gt;. This was where I first needed to go into the XAML code and paste it into the page, ensuring the tags were correct. From here on in, I tried to glance at the XAML code as I worked every now and then to try and familiarise myself with it. What I noticed was that any property change or transformation change made in Blend was recorded and stored in the XAML, even if the result was discarded. I became aware the the XAML was starting to bloat with unwanted code. I gained the confidence to go into the XAML and delete what appeared to be extraneous without wrecking the page. It did make me draw a comparisson with WYSIWYG web design tools. Couldn't help thinking that developers could potentially get mightily fed up with designers creating stuff with code-gone-mad results. This reminded me of Robby Ingebretsen's point in his presentation, 'Silverlight, WPF, Expression design projects - where do we get started?' on the second day of Mix 07. Robby introduced the idea of a XAML programmer role in the design/development process, who sits between the designer and the developer to ensure the implementation of design and development runs smoothly. My first little taster of using Expression Blend has certainly made me aware that somewhere along the line it would be an advantage to know XAML. If you're a designer in a large team, then there may be the facility to fulfil this role, but if you are a lone designer, do you learn it yourself or expect the back end developer to tidy up the XAML? So that was just the first issue I faced during my little animation project. More to follow!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-1946715308383800386?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/1946715308383800386/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=1946715308383800386' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/1946715308383800386'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/1946715308383800386'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/09/sliverlight-animation.html' title='Sliverlight animation'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-773746216211678778</id><published>2007-08-10T16:43:00.000Z</published><updated>2007-08-10T17:03:36.916Z</updated><title type='text'>Expression Design</title><content type='html'>My latest learning task, one of many, has been to get aquainted with the Microsoft Expression suite of tools - Design and Blend. I've tasked myself with a little project which I hope will introduce me to a taster. Nothing fancy, just some basic animation to start with. The first step for this was to create a map so I decided to bite the bullet and use Expression Design to build it. Learning a new tool is always a tad frustrating - you have enough general experience of design apps to get so far, but trying to discover how to produce an effect you could do in seconds in your preferred tool can seem to take a painful age!&lt;br /&gt;&lt;br /&gt;To be honest, creating a basic map was pretty straightforward. Having experience with Microsoft products such as Publisher plus standard professional illustration software such as PhotoShop and Illustrator gets you through the majority of actions quite easily. Many of the terms and commands are similar. I did compromise on a few things and worked round these rather than perform the task in exactly the way I wanted, but I'm happy to say that watching a few tutorials (&lt;a href="http://www.lynda.com" target="_blank"&gt;Lynda.com&lt;/a&gt;) soon revealed that everything I had wanted to create was indeed possible. &lt;br /&gt;&lt;br /&gt;A few things niggled me - one was the colour pallet. I couldn't find a way of preserving a colour I had selected for future use. In Illustrator, for example, you can drag a new colour into the pallet but I couldn't see a way of doing in Expression Design. I'm sure it must be possible and hope it is stupid user error!!&lt;br /&gt;&lt;br /&gt;Another thing I seem to have a problem with, and this is a problem I find in Illustrator too (probably because I'm more of a PhotoShop user) is the way accessing elements on the page versus layers works. In PhotoShop, you only move shapes on a selected layer. I guess this is straightforward because the application is for the manipulation of bitmap images. With vector tools, I find myself using the same method of working. However, I get unstuck if I happen to click on an object not committed to the layer I wish to access. The layer then switches to that containing the selected object. Before I know it, I've got bits of a path on a different layer, and I'm editing another layer and get in a bit of a mess. I imagine its a case of adapting working methods to the tool you are using/kind of image you are creating.&lt;br /&gt;&lt;br /&gt;Overall, however, I was quite happy using it. It will probably be seen as a poor version of the mighty Illustrator and Photoshop, but as a 'supporting tool' for Blend has lots of nice features. The stroke brush tool offers scope for some interesting effects, some compound path actions seemed refreshingly simple so its worth investigating further. With XAML export plugins available for Illustrator, it will be interesting to see where it does fit in, but my first little play left me quite keen to try it out more rather than keep away so that's got to be a positive for it!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-773746216211678778?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/773746216211678778/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=773746216211678778' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/773746216211678778'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/773746216211678778'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/08/expression-design.html' title='Expression Design'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-6609458361975258237</id><published>2007-07-11T10:39:00.000Z</published><updated>2007-07-11T10:59:30.548Z</updated><title type='text'>Unwanted vertical space between block elements</title><content type='html'>Just a note really about the appearance of extra vertical space between block level elements in IE6. Most annoying as it seems hard returns in the HTML code can cause this. I can get quite uptight if I can't lay out my code the way I like to, so having to break elements mid-tag gets me a little on edge. The times I find this occurs, is when you apply a style 'display: block' to an anchor tag within a list item:&lt;br /&gt;&lt;br /&gt;&lt;img src="http://www.clearbreezedesign.com/images/blocklev1.gif" /&gt;&lt;br /&gt;&lt;br /&gt;If you find you get the insertion of vertical space between the list item tags, then try removing the hard returns, or if you're uptight like me and hate to work with code on one line, then:&lt;br /&gt;&lt;br /&gt;&lt;img src="http://www.clearbreezedesign.com/images/blocklev3.gif" /&gt;&lt;br /&gt;&lt;br /&gt;ooh it still sets my teeth on edge, but more managable!!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-6609458361975258237?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/6609458361975258237/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=6609458361975258237' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/6609458361975258237'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/6609458361975258237'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/07/unwanted-vertical-space-between-block.html' title='Unwanted vertical space between block elements'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-7179459748438229770</id><published>2007-06-26T17:25:00.000Z</published><updated>2007-06-26T17:52:29.893Z</updated><title type='text'>Who's driving?</title><content type='html'>I've been to a few Microsoft events recently featuring WPF, Expression tools and Silverlight which have really had me questioning approaches to projects. Its kind of irritating and fantastic at the same time when new methods and technologies come up. I remember how my confidence blossomed when I finally mastered HTML tables. There wasn't any layout I couldn't attempt. If faced with a third party site, I could be confident that Id work out how the site had been built. Then along came improved browser support for CSS 2. Suddenly my world was turned upside down. It took me ages to build a site using CSS for the layout. So often I wanted to throw it all in, knowing I could achieve a result in no time using tables. The font re-sizing, liquid, elastic sites came to the fore. Suddenly I had to pour hours into a site that wouldn't completely break if the visitor increased the font size from the browsers. It seems as if I've had to change technique and approach a gazillion times in the last few years and the rules are more ambiguous than ever.&lt;br /&gt;&lt;br /&gt;So where does design stand with all these changes occurring? I sometimes question my role - do I design sites or do I build pages? If course I do both, but so often I find myself falling for that dangerous pitfall - designing for the medium rather than designing for the solution. When I was at University, our tutors adamantly used to tell us not to be constrained by the process used to realise a design solution. I could totally see where they were coming from. I struggled back then to get to grips with Quark on the Mac and consequently my designs did suffer. I did much of my work by hand but knew that the results would suffer against the polished results other students could achieve from the Mac. So I would play safe and design something I felt confident I could produce. This often strikes me when I design websites today. Now obviously we are all constrained by time and budget and rarely have the luxury of having hours to pour over a design - we have to get things out of the door. This also contributes to the 'playing safe' strategy. We stick to the tried and tested but don't always question whether its the most effective, user friendly solution.&lt;br /&gt;&lt;br /&gt;So now WPF and Silverlight are looming closer and rules could change again. Potentially these technologies could offer more design flexibility, more opportunities. Of course, this can mean more ways to go off the rails(!) but it would seem that it could give web application design another kick. Perhaps we can start approaching problems in inventive ways that could aid usability and experience rather than constraining ourselves to tried and tested methods.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-7179459748438229770?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/7179459748438229770/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=7179459748438229770' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/7179459748438229770'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/7179459748438229770'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/06/whos-driving.html' title='Who&apos;s driving?'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-7234046014627675863</id><published>2007-06-19T12:16:00.000Z</published><updated>2007-06-19T13:22:32.783Z</updated><title type='text'>@media 2007 - part two</title><content type='html'>&lt;em&gt;How to be a creative sponge&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Jon Hicks&lt;/strong&gt;&lt;br /&gt;This was another inspirational presentation. Again, always interesting to learn which processes different designers follow and where they get ideas, how they work through thoughts and how they build a product from a blank canvas. Jon spoke of how he looks to design outside the web to keep his creative juices flowing. He talked of being a collector - of leaflets, magazine clippings, t-shirt design colour schemes and online sources of photo galleries and collections eg. flickr. He also spoke of the importance to him of using a sketckbook - of how things from your mind can escape in all kinds of ways. Taking photographs of signs, objects, scapes, colours etc and cataloguing them really help to provide instant resources when faced with a blank page. Another interesting thought was the use of mood boards for clients. Not only can this be a useful method of getting the ball rolling, but it also helps clients to feel involved in the process which can be valuable indeed. Lastly, following on from an audience question, Jon introduced the idea of an online 'shed' where you can tinker with things non-client to keep playing with ideas. I'm off to find a flatpack version.&lt;br /&gt;&lt;br /&gt;&lt;em&gt;For example...&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Hannah Donovan&lt;/strong&gt; and &lt;strong&gt;Simon Willison&lt;/strong&gt;&lt;br /&gt;This session, presented by key team members, introduced design, implementation and work flow issues faced in real-life situations. Hannah Donovan, Head of Creative at Last.fm was first to the floor. She came up with some really interesting points and seemed to take a down to earth, realistic approach to issues. She spoke of how she came to Last.fm after the site had been developed which was the wrong way round to approach the development of a web application. However, the bottom line was that it was imperative to launch the site so as to be ahead of the competition. With this in mind, there was no time for perfectionism. From this approach came another piece of advice - don't get involved in 'skinning' or 'styling'. I could relate to that as I have done a fair bit of this over the years. I've had a sense of achievement seeing things coming to life when I've applied styles to applications, but have also seen underlying issues with usability and have grappled with the idea that there must be a better way. This said, often the fact that skinning is a necessary evil is, going back to Hannah's first point, because time and budget allows for only that. It can also be the result of Hannah's other main point - lack of interaction between designer and developer. Hannah related to difficulties she had with bringing design and development together and how 'scrum' meetings helped to overcome this. So overall, Hannah's message was that development is often an iterative process - you start with 'broad brush strokes' and fill in the detail later as time permits. Another tip that stuck in my head was not to release new visuals unless they are accompanied by a feature. I guess people like to feel some added value and receive a sense of reason behind a visual change.&lt;br /&gt;Simon Willison followed, talking about the project, Lawrence.com. Simon explained the challenges faced by a small team developing a local directory site and how the site stoood out against other local directory listings.&lt;br /&gt;&lt;br /&gt;&lt;em&gt;Advancing web accessibility&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Shawn Lawton Henry&lt;/strong&gt;&lt;br /&gt;I actually kept up with Shawn's presentation - I usually struggle with accessibility presentations because they can be dry and smattered with acronym-riddled document names and organisations. Shawn's session described how WCAG 2 would work, how it was based on success criteria rather than the priorties of WCAG 1. There is also emphasis on the 'informative' where techniques are introduced that are adaptible and flexible with examples. Scripting techniques that enhance accessibility have also been accepted. Shawn spoke at length about WCAG 2 supporting materials, which will probably turn out to be explored and used more than the document itself. These come in the form of 'informative' techniques and 'understanding' (reference). A 'quick reference' sits somewhere between the two. This supplies 'sufficient techniques' and 'advisable techniques'. Shawn went on to discuss the importance of CMS systems adopting accessibity concepts in order to generate accessible code and how pressure needs to be applied in some way to ensure this is the case. Overall, Shawn conveyed her desire for an accessible web, regardless of responsibility. We can argue the responsibility issue all we like, in the meantime there are people out there unable to access information. Another viewpoint to consider.&lt;br /&gt;&lt;br /&gt;&lt;em&gt;Royale with cheese&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Andy Clarke&lt;/strong&gt;&lt;br /&gt;As the title suggest, a look at how globalisation has affected websites. In the same way that many high streets in many towns all over the world feature the same shops, the same global brands, so there is the capacity for the web to follow suit. However, as with Macdonalds in Amsterdam compared with Macdonalds in the States, there are little differences that remain. Andy Clarke investigated the question, do websites from certain localities have a similarity? He asked designers of many nationalities their opinions and these seemed to be divided. Is there such a thing as a quitessentially british website design? If yes or no, is that good or bad?! He also suggested that large corporates/brands often approached multi-national sites with an air of arrogance, by simply providing translations in the same format as the home language. Is this a correct approach? Are we qualified to make assumptions as to how another nationality might use a website? Should multi-national brands offer individual countries the opportunity to create their own local site to ensure something is produced that most relates to that culture? Quite a thought-provoking presentation. I certainly have started to look out for 'the little differences' when I browse the web.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-7234046014627675863?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/7234046014627675863/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=7234046014627675863' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/7234046014627675863'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/7234046014627675863'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/06/media-2007-part-two.html' title='@media 2007 - part two'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-8211992705004965443</id><published>2007-06-12T09:28:00.000Z</published><updated>2007-06-12T11:45:03.744Z</updated><title type='text'>@media 2007 - part one</title><content type='html'>Last week I attended the @media 2007 conference in Islington - my third @media in a row. What did I think of it? Well, the first @media in 2005 was a real career-changing experience in many ways. I was new to using CSS for page layout and so I found those two days completely inspiring. I have found the subsequent conferences have given me a refreshed buzzy attitude to work, but I can't expect to get the same feeling as I did from the first. Something I have taken from all three, has been a renewal of enthusiasm for design, a desire to work harder (tinged with guilt that I don't, seeing these people talk and work tirelessly for their art!) and a comforting feeling that these speakers/experts/gurus/web stars, don't know all the answers and struggle over many of the things that us mere mortals do! I sometimes feel a twang of envy towards some of the more acamedic speakers when it seems that rules and high standards are so hard to apply in the real world when you're on the front line, so to speak.&lt;br /&gt;&lt;br /&gt;SO - @media 2007. Well, venue was good, food was good (although trying to eat lunch standing up, whilst carrying bags &amp;amp; notepads, always a nightmare). I find it hard to decide on which presentations to attend when they run along parallel tracks - its impossible for me to make a decision at the best of times. I think I chose wrong on a couple of occasions, but was lucky enough to attend with a colleague who complimented my choices so we could share the jists of each one. A few themes seemed to permeate through:&lt;br /&gt;&lt;ul&gt;&lt;li&gt;The importance of user experience &lt;/li&gt;&lt;li&gt;Globalisation/localisation - website design across different cultures &lt;/li&gt;&lt;li&gt;The continual debate over responsibility for accessibility issues - designer, browser/device and the role of standards&lt;/li&gt;&lt;li&gt;Aspirations towards a partnership between design and implementation&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;I'm not great at getting details from these kind of events - I usually come away with impressions or messages with a few detailed technical tips here and there. I'm sure others will cover the sessions much more efficiently, but for what its worth, here are the presentations I attended on day one:&lt;/p&gt;&lt;p&gt;&lt;em&gt;Beyond Ajax&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Jesse James Garrett&lt;/strong&gt;&lt;br /&gt;I thoroughly enjoyed this session, discussing the importance of user experience (also liked the term 'ecosystem' for the web!). Jesse, from &lt;a href="http://www.adaptivepath.com/"&gt;Adaptive Path&lt;/a&gt;, discussed the relationship between new technologies and existing human behaviour, how we should consider the terms 'applications, not sites' and 'interfaces, not pages'. He exemplified views on simplicity in design through the story of the kodak camera. He encouraged us to consider the highest compliment an application could receive - the idea that a consumer couldn't live without a product. He also conveyed the point that people interact with technology as they would interact with another person and how this can be exploited. Traditionally, its been data that has driven applications but this doesn't always result in a great product. A great product has a clear function - 'knows who it is', has personality and integrity and has been designed from the 'outside in'.&lt;/p&gt;&lt;p&gt;&lt;em&gt;The Broken World: Solving the browser problem once and for all&lt;br /&gt;&lt;/em&gt;&lt;strong&gt;Molly Holzschlag&lt;/strong&gt;&lt;br /&gt;This was probably a poor choice for me really as I felt a bit at a loss part way through. I plumped for this session as I thought I might pick up some useful philospophies or at least tips for cross-browser development, but think it was probably aimed at the more technical than me! However, it was interesting and I guess I came away with the message that there are always reasons for browser differences and that there is no quick and easy solution to getting all to conform to a single behaviour. Standards compliance aside, I often bizarely find myself sympathising with browsers. I swear and curse at them for making my life hell sometimes - the fact that their different or similar features are presented or behave in different ways, but then you think, well, they are products at the end of the day. Its business. Its competition. You don't buy a pair of trainers to look like every other pair of trainers, you buy a pair that suits your purpose, looks appealing to you and offers a brand that presents you in the way you want to be presented. Browsers are no different and if people use 'em, then why on earth should they change? That's a weird, overly simple view, but I do sometimes think we lose sight of these things.&lt;/p&gt;&lt;p&gt;&lt;em&gt;High-noon shoot-out: design vs implementation&lt;br /&gt;&lt;/em&gt;&lt;strong&gt;Drew McLellan and Simon Collison&lt;/strong&gt;&lt;br /&gt;An entertaining mock debate between designer and developer. Very well done and an opportunity to voice everyone's rants on the issues designers, developers and indeed, designer/developers have to face daily. Really found Drew's references to 'pencil twirlers' and 'turtleneck wearers' very amusing! Completely empathised with Simon's points about the designer's lot in the web world: how designers are 'stifled', 'restricted', 'limited' by the demands of browser conformity and accessibility issues. One part that did particularly interest me as I had been discussing just that on the train during my journey to London, was how print designers don't seem to have the weight of accessibility responsibility pressed on their shoulders. As Simon mentioned, the closest they get to the subject, is to print a large phone number at the bottom of a publication with a suggestion that you ring it for large print versions. So why on earth do designers of websites have to be experts in disabilities?! Do book designers consider how someone with Parkinsons Disease might struggle to hold their product in order to read its contents? No - its accepted that not everyone can hold a book. Again, this is a hard-line argument and I'm not suggesting its right, but that in other fields of design, there is less pressure to conform to issues of accessibility. It does seem that often the web designer has to be jack of all trades, expert in everything (or master of none?) and where it will all lead.&lt;br /&gt;Drew's argument was really on how designers want to control the uncontrollable and I guess how often they don't get the true nature of the web and try to enforce their own ego and principles from a bygone age on to an inappropriate medium. True indeed. His final slide said it all - an image of the London Olympics logo!&lt;/p&gt;&lt;p&gt;&lt;em&gt;Interface design juggling&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Dan Cederholm&lt;br /&gt;&lt;/strong&gt;An interesting presentation with some nice tips. I enjoy listening to designers share their thought processes. Good to see how Dan recycles background images throughout his work to add a coherence to the page and of course to be green! Also nice to hear that a limited font set doesn't necessarily have to be restrictive. I do get a little tired of hearing how bored everyone is of verdana etc and yes its true, we do have to endure system fonts, but I don't think its the be all and end all of typography. Typography is as much about the control of type and you don't really need a library of typefaces to make something beautifully functional or functionally beautiful. Dan also raised the profile of the humble favicon so we're all scuttling off to beaver away at 16x16 icons. Not sure whether I zoned out or quite how Microformats were introduced, but Dan spent some time presenting their advantages.&lt;/p&gt;&lt;p&gt;&lt;em&gt;Five simple steps to better typography&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Mark Boulton&lt;/strong&gt;&lt;br /&gt;I struggled a little with this presentation. It was certainly well-presented and raised some good points, but a little too much maths involvement for my liking! Mark gave a really interesting, formulaic principle to maximising type colour on screen - summising the right line height in relation to font size for maximum legibility. I admire this level of commitment, but have always found that, within reason, the more you try and control with the web, the more it can fall apart. However, I can't possibly back this up without trying it so won't knock it. Someone did question how this approach is affected by the user enlarging the type etc (that old accessibility responsibility issue raises its head!) and his answer, I believe, was that it can be done so proportionally. I'm not sure its as simple as that as if you're going to be really picky and perfectionist, I think you would need to intervene and adjust when a font size is increased, rather than rely on formula. However, I was a poor typography student so really am not qualified to comment! Oh and can people please leave Comic Sans alone?! The poor old thing gets dragged out for every typography presentation to convey the appropriateness of type selection. Its great for that, but let's pick on some other poor font next time!&lt;/p&gt;&lt;p&gt;&lt;em&gt;When web accessibility is not your problem&lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Joe Clark&lt;/strong&gt;&lt;br /&gt;Loved the title of this as the lazy, irresponsible and downright bad side of me longs to know, and then go work in that area! I'm also so confused by what are good and bad practices, that if I hear the merest whisper that something isn't my responsiblity, I'm there! However, I found myself struggling with Joe's controversial suggestion that responsibility for equal access to the web lies with the browser suppliers. Its great to think that should be the case - that if a browser doesn't include a feature to enlarge text size, then that's not the designer's problem. I appreciate that unless a stand is taken and that people go elsewhere and use another browser that DOES include that feature, then browsers are never going to strive to improve. Part of me is behind this. The more we get things to work in browsers that don't support standards, the less the incentive to change. Its all about applying pressure. However, to the average browser user, there is no problem with their browser. If they visit a site that is broken to them, yet its standards-complient, presented by a non-compliant browser, what is the average visitor going to think? This site doesn't work - I'll go elsewhere. They are not going to know the reasons behind it and therefore change browsers - how do you get round that? Do we all sport logos on our site that say this won't work in this because the browser is non-complient? Its a difficult scenario but one that really strikes up a debate. &lt;/p&gt;&lt;p&gt;Day two to follow...&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-8211992705004965443?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/8211992705004965443/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=8211992705004965443' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/8211992705004965443'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/8211992705004965443'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/06/media-2007-part-one.html' title='@media 2007 - part one'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-7733121650803601662</id><published>2007-04-26T11:32:00.000Z</published><updated>2007-04-26T11:35:41.544Z</updated><title type='text'>Firefox background image bug</title><content type='html'>Grrrr am soooo frustrated!!! Have a teensy issue with Firefox displaying a background image. The background image will only appear if I set a border-bottom to the div to which the background image is applied. Now that completely stuffs up my design and have struggled to get round the problem. Opera and IE display it fine and as you would expect it to behave. The fact that Opera seems happy leads me to believe it may be a bug in Firefox? If anyone has any experience/solutions please do reply! If I find a workaround, then I will post back.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-7733121650803601662?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/7733121650803601662/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=7733121650803601662' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/7733121650803601662'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/7733121650803601662'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/04/firefox-background-image-bug.html' title='Firefox background image bug'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-4842101669008749957</id><published>2007-04-18T13:46:00.000Z</published><updated>2007-04-18T13:56:44.327Z</updated><title type='text'>Em 'n' em</title><content type='html'>I've started looking more seriously at scalable websites - or elastic sites, whatever you want to call them. Basically, replacing my pixel measurements with ems so that as the font sizes increase and decrease, the constraining elements on the page expand and contract accordingly.&lt;br /&gt;&lt;br /&gt;I did this by attacking a fixed width site I'd built using pixels, with the font size described in ems. I went through and converted the pixels to ems and kept increasing and decreasing the font size in firefox, IE and Opera to test how the site worked. It actually seemed to convert pretty smoothly. The main problem I encountered, was addressing image placement. For instance, if you have a site with a 780px width, the top banner can be an image of 780px. When you increase the font size, the width of the site doesn't change. However if you set the width to ems and increase the font size, the width of the site adjusts accordingly and suddenly your 780px width image is left stranded, surrounded by space.&lt;br /&gt;&lt;br /&gt;To try and tone down this problem, I created a wider image and feathered the right hand edge to the background colour, then aligned this background image to the left. As the width of the site expanded beyond its default width, the image just gracefully faded to the background colour rather than jarringly halt at a set width. Not perfect, but a reasonable solution I felt!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-4842101669008749957?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/4842101669008749957/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=4842101669008749957' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/4842101669008749957'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/4842101669008749957'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/04/em-n-em.html' title='Em &apos;n&apos; em'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-3197705036123172826</id><published>2007-02-26T10:03:00.000Z</published><updated>2007-02-26T10:18:58.179Z</updated><title type='text'>Re-animation</title><content type='html'>I have just been tearing my hair out trying to get a very simple animated gif to look right. I created several basic designs in PhotoShop and then animated them with ImageReady for my client. All exported fine. On refining one, I worked following the same procedure, but found that my exported gif had somehow incorporated a fine horizontal line into the design. So I re-worked it, re-exported it, re-exported it with a different file name, started again, all to no avail. All this time I'd been viewing it with IE6. I had a look in Firefox and Opera and the gif appeared fine, no horizontal line whatsoever. Grrrr. So had a look in IE7 - same problem. Getting increasingly frustrated, I reworked the gif in Fireworks - same thing!! I investigated everything frame by frame but couldn't really see what was going on.&lt;br /&gt;&lt;br /&gt;I asked a technical colleague why it would look fine in one browser and not another, and they reckoned it was to do with the encoding the browser uses for animated gifs. After inserting some blank frames, in ImagReady, between the offending frames, we managed to cure the problem. So it seemed to be something to do with some residual 'show through' for want of a better description, from a former frame/layer. Having a little play with the optimisation settings, we found that by default, ImageReady was using transparency when it was exported. By turning this off, the gif exported perfectly. SO lesson learned - having thought an animated gif was pretty much an animated gif, it seems that is not the case. Different browsers use different encoding when presenting them which can effect the appearance. Therefore, it is just as necessary to check animated gifs in different browsers as it is for any web page. Furthermore, pay attention to the optimisation settings to ensure you get the desired result.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-3197705036123172826?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/3197705036123172826/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=3197705036123172826' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/3197705036123172826'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/3197705036123172826'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/02/re-animation.html' title='Re-animation'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-116983696154632687</id><published>2007-01-26T18:16:00.000Z</published><updated>2007-01-26T18:42:58.506Z</updated><title type='text'>Dizzy heights</title><content type='html'>My latest project has taught me the downside of setting a height to an element. I wanted to add a background image to an h2 tag - just a small image to give the header a lift. It needed to be positioned just above and to the left of the text so in order to acheive the desired effect, I set some padding to the left so that the text would sit free of the image, and a height to the tag plus some padding to shift the text down a fraction. I got the desired effect which worked across browsers and thought no more of it. Until, I wanted to take a check of the page with the font size increased. Yikes - suddenly the header text overlapped the text below it in an ugly and illegible fashion. I had an inkling it was the height that was causing the problem and so removed that attribute from the stylesheet. Problem resolved. I then tweaked the padding fractionally and still got the appearance I was after. Adding height to the element was completely unecessary as padding alone enabled me to manipulate the text around the background image. When the font was enlarged, there was no ugly overlapping issue and the page behaved as expected. SO - I will think twice before needlessly adding a height to an element.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-116983696154632687?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/116983696154632687/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=116983696154632687' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116983696154632687'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116983696154632687'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/01/dizzy-heights.html' title='Dizzy heights'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-116834073730567536</id><published>2007-01-09T10:33:00.000Z</published><updated>2007-01-09T11:05:37.336Z</updated><title type='text'>Forms</title><content type='html'>Whenever I am asked to construct a form, whether simple of complex, I am always faced with the dilema of how exactly to construct it: whether to build it within a table or to persist with semantic markup and rely on CSS.&lt;br /&gt;&lt;br /&gt;I guess the first question should be, does a form present tabular data? The obvious answer, I imagine, is 'no'. If we consider exactly what a form is, we could say its a vehicle for presenting a set of questions to the visitor with a means to answering them. A question might present a visitor with a free text area or input box. The answer to the question might be narrowed by multiple choice via select dropdowns, check or radio boxes. Is it therefore necessary that the question and answer appear on the same row for it to make sense to the visitor? Again, the answer is 'no'. The answer could be placed beneath the question, on a new row. The fact that often the answer is aligned horizontally alongside the question is often to save vertical space and /or to assist with the usability of the form. These reasons are therefore presentational. Unlike tabular data, arranging the information in rows and columns is not essential to the meaning of the data presented.&lt;br /&gt;&lt;br /&gt;So I think I'm fairly clear in my mind that forms should not be presented in tables, this aside from the accessibility issues of presenting forms in tables (which is a whole new can of worms to be openend on another day). Yet, I am ashamed to say, I often resort to building them thus, if my presentational aims require. Despicable.  As usual its the time factor that so often determinse this. No excuse, I know, but often that's how it pans out. I spend some time struggling to arrange answers to questions so that all the answers in rows align and i so far have failed to derive a solution outside the table that works. I dabbled with inline blocks and floats which I thought would be the answer to my prayers, however support for this across browsers is eratic. So one of my New Year's Resolutions is to find a method of presenting forms that does not rely on a table. I'll let you know how I get on!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-116834073730567536?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/116834073730567536/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=116834073730567536' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116834073730567536'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116834073730567536'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2007/01/forms.html' title='Forms'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-116457456034432310</id><published>2006-11-26T20:01:00.000Z</published><updated>2006-11-26T20:57:13.020Z</updated><title type='text'>Expressionism</title><content type='html'>I've just started learning about WPF for designers, Microsoft Expression Interactive Designer. A month or so ago, I attended a Microsoft presentation on Expression Web Designer which was interesting enough as far as a web design package goes (guess the thing that interested me most was the CSS maintenance tools - how that could aid workflow, more than building pages as such) but it's Expression Interactive Designer (EID) that has piqued my interest.&lt;br /&gt;&lt;br /&gt;Having created buttons, splash screens, icons etc for windows applications over the years, I was indeed interested in how EID could improve the workflow between visual designers and developers. Currently, I create buttons etc in Photoshop and then export them as gifs or jpegs, handing them over to the developer to implement. On some occasions I've seen that these images haven't always been implemented as I would have desired - I could have tweaked them here or there to accommodate the situation in which they are used had I been in control of applying them. Microsoft's new suite of tools offers designers the opportunity of actually working on the interface independently of the developer. One way might be that the developer will create a 'skeleton' application that simply holds all the controls and elements required in the app which can then be handed over to the designer for styling. You could draw a similarity to building pages with CSS - the page structure and behaviour is set whilst the CSS designer can control the style without affecting the content. In the same way, it is hoped that EID will allow definite roles to be established between the development of the function and the look and feel. The developer can work on the aspects of the project that he or she is best skilled to resolve, and the designer, the style. Currently these roles can blur into each other which threatens to dilute the quality of the end solution. &lt;br /&gt;&lt;br /&gt;This all sounds impressive and definitely something I would like to investigate, however I do wonder how this will affect the usability of applications. Rightly or wrongly I think it would be fair to say that it has been the technology developer that has set a president for the look and feel of applications as we experience them today. Certain conventions have taken hold; menus, folders, files are all aspects of day to day computing we have become familiar with. If suddenly the designer's influence is overwhelming in application interfaces, how many different approaches to common commands and functions are we going to have to experience from app to app? Even Microsoft themselves appear to be moving away from the folder/file concept - how will all this affect the average user? I guess we will have to watch this space. Just as with the use of Flash on websites, designers are going to have to take responsibility for ensuring an application's interface is 'usable' and not an 'expression' of their own design egos!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-116457456034432310?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/116457456034432310/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=116457456034432310' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116457456034432310'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116457456034432310'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/11/expressionism.html' title='Expressionism'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-116229052419429720</id><published>2006-10-31T10:06:00.000Z</published><updated>2006-10-31T10:28:44.206Z</updated><title type='text'>Photoshop CS2 Creativity Tour</title><content type='html'>Spent a pleasant couple of days up in London last week, primarily to go along to the Photoshop CS2 seminar at the Business Design Centre, Islington. I thought the seminar was excellent - far exceeded my expectations. Photoshop is a vast tool and I was wondering at what level the seminar would be pitched and how much they would manage to get through in just a day and was pleasantly surprised. I've been using photoshop for a number of years but know I barely scratch the surface. There are so many methods you can use to get an end result and you kind of muddle through in some instances. It was great to see some approaches in situ that could achieve results that would have been far more painful and time consuming using my methods. Probably aimed more at the illustrator than the photographer as the speaker, &lt;a href="http://www.bertmonroy.com/"&gt;Bert Monroy&lt;/a&gt;, is that way inclined, but nonetheless, tips for all.&lt;br /&gt;&lt;br /&gt;Layer masks have been features that I've never really got to grips with which is ridiculous as they are so powerful and useful. It was so useful to see different results and working methods- has started to click with me now. Other useful stuff was the exploitation of the Layer Style tool, particularly 'Blending Options'. Bert really showed how varied results could be by tweaking and experimenting with the various attributes.&lt;br /&gt;&lt;br /&gt;There were some useful workflow tips too. Bert showed an impressive photo-realistic illustration that had involved hundres of hours of work. Each portion of the image was a separate file of multiple layers. This enabled changes and tweaks to be made with minimal disruption and allowed him to re-use elements of the work for other projects.&lt;br /&gt;&lt;br /&gt;But above all else, the real message of the day was to experiment with the tools. So many effects have been discovered through exploiting the tools in personal project work. All quite inspirational. Oh and I am now a NAPP (National Association of Photoshop Professionals) member. Reminds me - I have a dvd on 'mastering camera raw' to watch...&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-116229052419429720?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/116229052419429720/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=116229052419429720' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116229052419429720'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116229052419429720'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/10/photoshop-cs2-creativity-tour.html' title='Photoshop CS2 Creativity Tour'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-116047992087019436</id><published>2006-10-10T11:26:00.000Z</published><updated>2006-10-10T11:33:06.000Z</updated><title type='text'>Display: inline-block</title><content type='html'>OOh just had a frustratring problem. I won't bore you with the details, but I was creating a horizontal menu via a list set to display-inline. I wanted the 'a tag' to fill the menu bar if you like so that the hover could change the background image that filled the height of the list. No problem, I thought, I'll simply set the 'a tag' to display; inline-block. Fine for IE. However, Firefox kinda ignored it as it apparently doesn't support inline-block. So quick search on the web found me a useful hack - using -moz-inline-block. Alas, Firefox just displayed the 'a tags' as block elements. Sulk. Further searching brought me to &lt;a href="http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm"&gt;this site&lt;/a&gt; which offered an alternative to this: -moz-inline-box. Seems to work a treat - so many thanks for this tip!!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-116047992087019436?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/116047992087019436/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=116047992087019436' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116047992087019436'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116047992087019436'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/10/display-inline-block.html' title='Display: inline-block'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-116030262266353908</id><published>2006-10-08T09:51:00.000Z</published><updated>2006-10-08T10:17:02.673Z</updated><title type='text'>Website logos as background images</title><content type='html'>I've been debating with myself recently about my method of displaying company logos on websites. I tend to create a div that uses a style that holds the logo/topbanner image as a background image. My thinking behind this was that it keeps the page source clean of images, it allows any amendment to the top banner to be made just once via the stylesheet rather than ensuring every page is changed and it won't display if the stylesheet is ignored which adds to the accessibility of the page.&lt;br /&gt;&lt;br /&gt;The downside I guess I've been questioning is, that if the stylesheet is ignored, the site is left with no visual branding. Now I think there are pros and cons with this. Overall, I think this is a good thing. Usually if a stylesheet is ignored, its because the visitor is just interested in getting to the text with as little intereference as possible, whether visually or via a screenreader. Losing the height of a top banner image can also help with this. But should you still have some visual cue that brands the site even if the stylesheet is ignored?&lt;br /&gt;&lt;br /&gt;An alternative might be to include an image tag to hold a small logo in the top banner div. This could be styled to be hidden so that it only comes into play when the stylesheet is ignored, so a logo would still display regardless. However, this means adding some extraneous code to the page so I'm not altogether happy with that idea. Plus I still am unsure whether visual branding would be appreciated once the stylesheet has been ignored. At that stage, a decision has been made to ignore visual styling and concentrate on the content. So I think I'll plod on with my method unless a different requirement convinces me otherwise.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-116030262266353908?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/116030262266353908/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=116030262266353908' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116030262266353908'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/116030262266353908'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/10/website-logos-as-background-images.html' title='Website logos as background images'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115964977480987862</id><published>2006-09-30T20:45:00.000Z</published><updated>2006-09-30T20:56:14.820Z</updated><title type='text'>Lynton photo gallery</title><content type='html'>I finally put together a photo website of the piccies we took during our break in Lynton: &lt;a href="http://www.clearbreezedesign.com/lynton"&gt;www.clearbreezedesign.com/lynton&lt;/a&gt;.&lt;br /&gt;I optimised the photographs and created some crops for thumbnails. The site is split into four categories: coastal, moorland, woodland and river. This was to emphasise the fact that such diverse landscapes can be found in one area.&lt;br /&gt;&lt;br /&gt;The site was built in XHTML and CSS with a little, very basic javascript to perform the image swaps. The mouseover effect with the thumbnails was created by styling the a:hover pseudo class to hide the drop shadow background image and to adjust the padding. This creates an animated effect without drawing on any dhtml. Although a little tricky, it wasn't actually too hard to do and has certainly made me keen to experiment with this further.&lt;br /&gt;&lt;br /&gt;I hope people enjoy the snaps!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115964977480987862?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115964977480987862/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115964977480987862' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115964977480987862'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115964977480987862'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/09/lynton-photo-gallery.html' title='Lynton photo gallery'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115874377683900438</id><published>2006-09-20T09:05:00.000Z</published><updated>2006-09-20T09:16:16.853Z</updated><title type='text'>Lynton and Lynmouth</title><content type='html'>Just come back from a brief but lovely trip to Lynton, Nort Devon. I'd stayed at Woolacombe as a child and have memories of the lovely beach there, but haven't visited Lynton before. It was better than I hoped. A really nice mix of landscape. Right at the North tip of Exmoor, you get the atmosphere and ruggedness of the moors, but have the added bonus of being right on the coast. The cliffs drop dramatically to the sea. Goats teater on the edge of rocks above you as you meander along the coastal path. Really beautiful and a photographer's dream. &lt;br /&gt;&lt;br /&gt;Lynton and Lynmouth are pleasant towns, perfectly situated for walking. We stayed at &lt;a href="http://www.st-vincent-hotel.co.uk/"&gt;St. Vincent Hotel&lt;/a&gt;, Lynton, which was perfect for our stay. Its also a small restaurant and the meal we had there was fantastic. The best meal I'd had in ages and very reasonably priced. Well worth booking. &lt;br /&gt;&lt;br /&gt;Hope to put together a photo site of our trip so will post a link to that when completed.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115874377683900438?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115874377683900438/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115874377683900438' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115874377683900438'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115874377683900438'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/09/lynton-and-lynmouth.html' title='Lynton and Lynmouth'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115874311532996444</id><published>2006-09-20T09:00:00.000Z</published><updated>2006-09-20T09:05:15.346Z</updated><title type='text'>Blogstyle</title><content type='html'>Well, as you can see, had a bash at styling this blogsite. Nothing fancy, quite basic, but good fun. I created the little spanner, flowers and sphere devices in illustrator, then popped them into Photoshop to create the banner and graphics. Rest of the changes have been made via the stylesheet (with just a tiny tweak to the code!) I still have some work to do on it - notably, ensuring the right hand column runs the length of the page and creating more white space between each post, but hopefully will get round to that eventually. All very pink and purple and girlie, but nice to do something completely differet from the sites I work on day to day.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115874311532996444?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115874311532996444/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115874311532996444' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115874311532996444'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115874311532996444'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/09/blogstyle.html' title='Blogstyle'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115531809884622483</id><published>2006-08-11T17:29:00.000Z</published><updated>2006-08-11T17:45:05.283Z</updated><title type='text'>Test, test and test some more</title><content type='html'>Oh I was livid with myself yesterday. I'd worked on a hellish site that wasn't our own and that had been inherited. A total mess really, both front and, as I'm reliably informed by my developer colleague, back end. I was charged with re-designing areas of the site whereas I would dearly have loved to have re-designed and built the whole thing, as would my developer colleague.&lt;br /&gt;&lt;br /&gt;What has caused me to cringe inwardly and will do for days to come, was that I'd made a couple of 'minor' adjustments to some pages which I'd foolishly assumed would look the same in Firefox as they appeared in IE. I therefore can't have tested these changes in Firefox before the site went live. Embarassingly it was a safari user who noticed a problem. I'd simply set a border in a stylesheet to zero - an act you would think would be pretty inocuous, but it had extended a table column so that it no longer appeared the same width as its neighbours. I burn with shame. It was immediately fixed (although I have still to work out exactly why that act caused the table to break in that way), but nonetheless an embarassment. Grrr. A lesson learned, I guess. However pressured and rushed you might be to get a site up live and however distracted by parallel projects, get into a routine of test test test again (repeats over and over to self).&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115531809884622483?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115531809884622483/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115531809884622483' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115531809884622483'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115531809884622483'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/08/test-test-and-test-some-more.html' title='Test, test and test some more'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115531635745026246</id><published>2006-08-11T16:24:00.000Z</published><updated>2006-08-11T17:12:37.490Z</updated><title type='text'>Website construction from a third party's design</title><content type='html'>A recent web design project of mine has been to build the front end to a site that will contain some dynamic, customer-managed content. Now that's fine. However, the customer used a design agency to design the look and feel of the site. This always fills me with a level of intrepidation as more often than not, the designer charged with providing the design has little web knowledge. I was provided with photoshop files representing the relevant pages. A very nice-looking design, but an absolute nightmare to build. That's not strictly true. Easy enough to build if you would be happy to splice and dice images and throw those together in a table, but to build a site with any integrity and especially robust enough to cope with dynamic content, a nightmare.&lt;br /&gt;&lt;br /&gt;Oh its all very nice to create a design with a fixed height with fixed text that will never change in size or amount. Then you can do all manner of appealing things with gradient backgrounds, curved boxes, overlapping images. Oh it was enough to make me weep. Now given a few weeks of experimentation, I might have been able to do something that almost resembled the design, but I don't have a few weeks. Despite all the cunning css curved boxes/borders tricks, curved corners are still a headache to build. They still clutter up code and still rely on unecessary images, even if they do look quite appealing. I often question whether anyone notices enough to warrant the extra time, effort and code required. But designers are obsessed with them (I'm allowed to mock designers because I am one).&lt;br /&gt;&lt;br /&gt;So I sat and whinged a bit, squinted and huffed, thought 'what the hell am I gonna do with this?' several times over, and then had a bash. I'd pretty quickly worked out what I thought would not be possible and decided my best course of action was to show the client where the design would fall down. I created a page, having had to omit some of the design niceties even at this stage, and then changed the font size via the browser to show how increasing the size would break the page. How all the neatly aligned boxes would change height, how an image would no longer align with the foot of the page, how suddenly you would get ugly white space at the top of the adjacent column and how the menu would kick over two lines. I also created a version that broke when more text was added. I then made another page, simplified and adapted to be 'web friendly' that I felt still sensitively captured the essence of the original design and showed that to the client. To be honest, I don't think they noticed that half of the borders didn't have curved corners or that some of the background gradients had been removed. I then showed how it would adapt to increased font size and increased content. The client was perfectly satisfied with this.&lt;br /&gt;&lt;br /&gt;Incidentally, one of the page designs showed two columns of continuous copy. Hmm that would have been straightforward for the customer to update.&lt;br /&gt;&lt;br /&gt;Now I've built sites from print designers's designs many times over the years and I am only too aware of their fundamental lack of understanding for what a website is and what needs to be considered when designing for the web. And I don't have a problem with this. Why should they? If day to day they design for print, they wouldn't know how a website should work, how its constructed and how it varies across browsers and how it needs to adapt to changing content. A customer will automatically approach their design company when they consider a website and that's fair enough - they are looking to extend their branding and their identity to the web. And designers are often happy to listen to advice and allow me to adapt their designs as I see fit. Being a designer, I like to think I do this with an awareness for what they are trying to achieve. Its often a refreshing experience and a challenge as it allows you to get outside your own design mindset and work on something that's differently approached. Sometimes trying to realise someone else's vision forces you to discover new techniques and breaks you out of a web designer's mentality. However there some fundamental web design rules that need to be at least acknowledged if not followed.&lt;br /&gt;&lt;br /&gt;What annoyed me in this instance was that on visiting the agency in question's site, they actually sell web design as a service. Was a bit baffled therefore as to why they weren't building the site and why they'd provided me with what I can only describe as a print designer's web page design.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115531635745026246?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115531635745026246/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115531635745026246' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115531635745026246'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115531635745026246'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/08/website-construction-from-third-partys.html' title='Website construction from a third party&apos;s design'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115454886559326158</id><published>2006-08-02T19:56:00.000Z</published><updated>2006-08-02T20:03:06.206Z</updated><title type='text'>Ooooh macbook - oooohhhh...</title><content type='html'>A friend just bought a new macbook and I have to confess to being rather seduced by Apple's packaging and marketing material. It does look pretty. As does the cd sized manual and the tiny remote control. I started with Macs (well actually I started with a Dragon 32 but that's for another post!) as a designer and moved onto PCs as I journeyed into the area of web design. I did own a G3 on which I dabbled with print design, but I've kinda got out of macs. I still get Mac User regularly because, well, I guess I kind of like the idea of being a trendy designer mac user, but do I think they are superior? I'll reserve judgement. Its all horses for courses, but they sure do look priddy!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115454886559326158?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115454886559326158/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115454886559326158' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115454886559326158'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115454886559326158'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/08/ooooh-macbook-oooohhhh.html' title='Ooooh macbook - oooohhhh...'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115454850109852562</id><published>2006-08-02T19:39:00.000Z</published><updated>2006-08-02T19:55:01.113Z</updated><title type='text'>Working on a chinese website</title><content type='html'>I've recently been charged with creating a stylesheet for a Chinese website. I've had some vague experience with Japanese, but that was several years ago - in the world of the Internet, an age. So the first challenge was to get the chinese characters to display. I had to save the file to a specific unicode format to enable the browser to cope with chinese characters. &lt;br /&gt;&lt;br /&gt;In addition to that, I needed to include the meta tag, http-equiv=content-type content="text/html; charset=gb2312". This informs the browser which character set to use in order to render the text for the site.&lt;br /&gt;&lt;br /&gt;So all in all something new for me. Of course it made me consider a whole range of cultural differences that could affect web design - the significance of colours, reading direction, conformity to user expectations etc. For this particular project, my input didn't move beyond creating a style that resembled a corporate site and so was pretty cosmetic, but it has piqued my curiosity for non-western website user conventions...&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115454850109852562?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115454850109852562/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115454850109852562' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115454850109852562'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115454850109852562'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/08/working-on-chinese-website.html' title='Working on a chinese website'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115366528677168368</id><published>2006-07-23T14:30:00.000Z</published><updated>2006-07-23T14:35:14.396Z</updated><title type='text'>Dishwasher rant</title><content type='html'>Just had to let off steam. One of THE most annoying things is unloading the dishwasher to find that a dish or pan or piece of cutlery seemed to escape blasts of cleaning power and has retained its layer of food. This is annoying in itself. But then, cleaning said item is fifteen times harder once its been through the dishwashing process than it would have been washing the damn thing up in the first place. The dishwashing process seems to seal food on with some kind of varnish so that huge amounts of hand-cramping energy is required to chip, soak and scrub said food particles off. Fails to improve my mood.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115366528677168368?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115366528677168368/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115366528677168368' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115366528677168368'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115366528677168368'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/07/dishwasher-rant.html' title='Dishwasher rant'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115329828239541232</id><published>2006-07-19T08:16:00.000Z</published><updated>2006-07-23T14:07:04.616Z</updated><title type='text'>IE 3 pixel float problem, or the 'wavy alignment' problem as I like to call it</title><content type='html'>I first encountered this problem when I built my first CSS layout website. I got round it with some nasty fudgey fixes but originally put it down to my inexperience and figured I hadn't used as good a technique at constructing the page as I might. The problem I am referring to is an IE issue where floating a column to the left causes a weird left-alignment rendering where the column to the right's text, as it flows beyond the height of the left-hand column, kicks over 3 pixels and causes a kind of wave to the text. Its beautifully illustrated on the CSSplay website, &lt;a href="http://cssplay.co.uk/boxes/floatfix.html"&gt;http://cssplay.co.uk/boxes/floatfix.html&lt;/a&gt;.&lt;br /&gt;&lt;br /&gt;I soon realised there was more going on than my inexperience as this problem continued to crop up so I investigated further and found the above fix. I merrily applied 'display: inline-block' to my stylesheet and was delighted that it fixed the problem. It didn't even break in Firefox. Then some time later I realised it fell apart in Opera. Instead of the right hand div sitting alongside the left-hand float, the right hand div would sit below. Grrrr. I realised then I would have to use a hack so the 'display: inline-block' would only apply to IE. With that in place, the page worked fine in IE, Firefox and Opera.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115329828239541232?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115329828239541232/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115329828239541232' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115329828239541232'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115329828239541232'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/07/ie-3-pixel-float-problem-or-wavy.html' title='IE 3 pixel float problem, or the &apos;wavy alignment&apos; problem as I like to call it'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115290036714995643</id><published>2006-07-14T17:52:00.000Z</published><updated>2006-07-14T18:06:07.166Z</updated><title type='text'>Blonde moments in abundance</title><content type='html'>Dooooooh - I've really had a frustrating day. One of those days where your brain keepsdwelling on things you need to be doing several steps ahead and leaves you with zero resources for coping with current tasks. Consequently, I have found myself cursing my computer at regular intervals for reasons that have been no fault of its own. Poor slaptop! Its been shrugging its shoulders at me all day, saying 'whaaaaaat??' with an exasperated expression.&lt;br /&gt;&lt;br /&gt;I was working on something in Illustrator and was trying to send one object behind another. Despite selecting 'arrange' &gt; 'send to back' a gazillion times, it failed to respond. I cursed a few times, tried again. Clicked off everything then tried again. No. I started shouting 'STOP IGNORING WHAT I'M ASKING YOU TO DO, YOU*****!' But it ignored that too. I then turned to a colleague and said 'Its blatantly ignoring me!! Watch..' I went through the procedure again, to no avail. He glanced over my shoulder and said 'the objects are on separate layers' How stupid did I feel??? I knew it too - as soon as he pointed it out. Grrr. The same thing happened later - I couldn't for the life of me work out why a certain menu option wasn't available and sat racking my brains trying to remember how I'd done it before. I eventually grizzled to same colleague and in an instant, he resolved it. And at that same instant, it all came flooding back in a horrible 'thanks, brain, for remembering now its too late' torrent.&lt;br /&gt;&lt;br /&gt;Ah well, I ain't blonde for nothing!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115290036714995643?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115290036714995643/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115290036714995643' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115290036714995643'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115290036714995643'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/07/blonde-moments-in-abundance.html' title='Blonde moments in abundance'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115265214934034163</id><published>2006-07-11T20:46:00.000Z</published><updated>2006-07-11T21:14:13.213Z</updated><title type='text'>Design - conscious decision-making or an organic process</title><content type='html'>Today I've been designing a logo for a friend's new company. Over the weekend I'd been turning over the logo device that I wanted to create in the back of my mind. I'd decided on the kind of style I wanted it to take on, the shapes and the colour. However, I almost knew at that point that the end result wouldn't closely resemble what I'd had in mind. It rarely does. So as I was working through my ideas today, getting what was in my mind down on paper, it got me wondering whether that made me a bad designer.&lt;br /&gt;&lt;br /&gt;Very occasionally, I have a gut feel about how a project should look and work and I'll end up with a product that's not far from my original vision. But I have to say, rightly or wrongly, this is rare. This doesn't mean to say I or the customer or the user is unhappy with the end result, but it sometimes moves far from my original concept. Part of me thinks this is the way the process should work. Its certainly the way we tend to get taught at college and university. You shouldn't stick with the first idea that comes into your head. You should work through ideas and be prepared to drop concepts, however attached you may have become to them. If its not right, it shouldn't be forced.&lt;br /&gt;&lt;br /&gt;But then again, shouldn't I be able to make a design work? Is it a cop out to let things develop away from a design decision? Obviously, different projects require a different design approach and sometimes the development of an idea is more appropriate in order to work out what works best.&lt;br /&gt;&lt;br /&gt;So does a design benefit from taking the organic approach: is one that has been created via a journey more valid than one that seems to have been arrived at almost instantaneously? Well I guess I reckon no. Neither is right or wrong - it depends what works and whether the final design is successful or not. You could argue that the majority of a design's audience are going to remain unaware of the journey a design has followed - they will draw their conclusion on the result, regardless of the blood, sweat and tears that preceded it!&lt;br /&gt;&lt;br /&gt;I've written at bit more on &lt;a href="http://www.clearbreezedesign.com/faq_gooddesign.htm"&gt;design&lt;/a&gt; which you may be interested in reading.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115265214934034163?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115265214934034163/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115265214934034163' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115265214934034163'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115265214934034163'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/07/design-conscious-decision-making-or.html' title='Design - conscious decision-making or an organic process'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-30402957.post-115151972304099052</id><published>2006-06-28T18:32:00.000Z</published><updated>2006-06-28T19:00:22.676Z</updated><title type='text'>Finally signed up for a blog but don't know what to say!</title><content type='html'>Well here it is at last then. My blog. I was worried I'd ended up getting addicted if I had a blog and would waste my life writing pointless thoughts that wouldn't mean anything to anyone. Now I have one, I don't know what to say... I've gone all shy...&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30402957-115151972304099052?l=spannahintheworks.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://spannahintheworks.blogspot.com/feeds/115151972304099052/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=30402957&amp;postID=115151972304099052' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115151972304099052'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/30402957/posts/default/115151972304099052'/><link rel='alternate' type='text/html' href='http://spannahintheworks.blogspot.com/2006/06/finally-signed-up-for-blog-but-dont.html' title='Finally signed up for a blog but don&apos;t know what to say!'/><author><name>spannah</name><uri>http://www.blogger.com/profile/08478335235310401440</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry></feed>
