I am a Web Designer

I missed this years FOWD, cost is the main reason. But via twitter I did experience a kind of running commentary delivered by those present – this is the iPhone generation after all. One of the most notable trends of these live micro blogs was talk of Mike Kus’ presentation and rave reviews of the slides he used to illustrate his talk. How good can these slides be? I wondered. Well, Mike has made them available for us all to enjoy. They certainly are striking and fully deserving of all their praise. Enjoy…

I found it interesting when listening to the webdevradio podcast this week, when SEO expert Ashley Berman Hale declared that the html address tag can be used to mark up a company’s physical street address. She claims that Google will read this as valid street-address mark-up (not at all that the address tag was designed for). I find this interesting because it suggests that in an age of semantic awareness and its role in web standards, Google can rewrite any tag’s function simply by how it decides to interpret its meaning when spidering* a website. So, if Goolge declares that Meat is Fish, then does Meat really become Fish?

* Spidering: to spider. One of the many words that ought to be added to the modern dictionary

As a web design freelancer who works from home, I have found that it’s important to get dressed. I have slipped into that bad habit of working in my pyjamas or dressing-gown until 2 or 3 in the afternoon… this does not lead to good productivity. Getting dressed, having breakfast and going out upstairs to the office puts the mind in a better place for work. Staying away from twitter helps too

So the eagerly anticipated Macheist bundle is finally with us and there’s some nice apps included and a very VERY nice price. For me one of the highlights of the software bundle is Espresso from MacRabbit, the makers of the very fine CSSEdit. The last time I posted about Espresso, it was a brand new, about to be ‘beta’ test version of the software, so it was difficult to get a handle on how good it was going to be, or how many unfulfilled promises it would be seen to make. As a seasoned TextMate user, it would be very difficult for me to move to a new editor, to relearn a new piece of editing software takes time and serious application, neither of which many people have an abundance of. But occasionally a piece of software comes along that makes you consider doing the unthinkable and embark on learning a new text editor. I’ll report how I get on if I do decide to take that almighty step.

There are some pretty impressive titles making up the rest of the bundle too, The Hit List is a ToDo list in the mould of Things, so I’ll have fun playing with that. I liked things, but I have a problem paying for what is essentially a list of things that I have to type in in the first pace. I enjoy working in them because, like many apps on the mac – they look and feel good. But that isn’t enough reason to actually part with my hard earned cash! So, to have The Hit List included in a bundle that I am buying anyway, is surely a win win!

Check out the other apps in the MacHeist3 bundle (only $39 for the lot!!)

There seems to be a resurgence if IE6 bashers at the moment. Now, IE6 – in modern terms, is an awful browser. But in its day IE6 was the cutting edge trailblazer that allowed us to dream of the web we have today. It’s not standards compliant – it doesn’t understand (or misinterprets) half of your CSS 2.0 styling, it doesn’t know how to process an xHTML file in that way that it was created for, it doesn’t realise that my PNGs have transparency, it doubles up of floated widths, it can’t count to 100 etc. But! It is still in use as the main web browsing tool by half of the population. Some are using it out of ignorance, other through lack of choice – but whatever the reason someone has for using IE6 they have just as much right as anyone else to access your online content. As much of a PINTA it is, it’s not really a great hardship for a skilled web developer to include a basic stylesheet just for our dear old friend IE6 now is it?

For the most part, a well written and well constructed HTML, with a basic CSS 2.0 styling will render just fine in IE6. By all means save the rich web experience using CSS 3.0 and layered PNGs for those with a browser to cope (Firefox, Opera etc.) – but please stop whinging about IE6 and lack of compatibility with your abhorrent code. It is the job of the web developer to make a site compatible with IE6 – it it’ll take about 30 mins extra work in most cases.

Now this is useful! I have 456 Berea Street to that for this. I often get emails sent though as HTML with a font size of 10 – and this looks too small in OS X. using a terminal command after making sure you have quit mail.app, allows you to set the default font at any size you wish. My preference is 12.

write com.apple.mail MinimumHTMLFontSize 12

Restart mail.app et viola!

So, what do: semantic naming conventions; semantic or not; what is web standards anyway?; speech impediments; accessibility and wcag 2.0; have in common? Well, they’re all half-written blog posts that haven’t made it to the shubox blog… yet. I’m sure you’ll agree that they are, for the most part, tantalisingly interesting titles – and I’m sure that they would have been (and still will be with any luck) interesting, impassioned, thought-provoking and in places misguided ramblings on contemporary web design issues. For some reason however, I find myself unable to complete some of my blog posts. Sometimes this is due to workload – other times it might be down to completely losing the plot or when that special and all too allusive moment of clarity has dissipated.

Whatever the reason, I feel that I have robbed myself, if not the world, of a few decent insights into how my mind works and how my thoughts and views relate to my contemporaries. In any field its important to contemporise ones own development and knowledge – this doesn’t mean blindly agreeing with every new trend that abounds, but understanding why you don’t agree.

A good, well researched blog post can help form ones own opinion on a particular subject more fully that reading someone else’s opinion, and can facilitate a greater clarity that ultimately breeds a genuine insight. It’s this insight that I feel that I risk losing (or not even achieving) with these half finished blog-posts and although I will strive to complete them (particularly now that I’ve highlighted their existence here – I’m now pretty much obligated to) I do wonder how many full-time small-world web designers (or anyone else for that matter) manage to create interesting and regular blog content or are they too sitting on a backlog of unfinished works of genius?.

I don’t normally post stuff like this, but I thought it was interesting and clever… so have a butchers!

Clever!

Ok, so I spend my time building websites for other people and hopefully establishing their web identity in the process. But what about shubox? It’s well documented that hairdressers often have the worst hair styles, well, web designers are no different – my hair’s a mess! my web identity is a mess! So, with a little time on my hands yesterday I’ve begun the redesign/reinvent process and this is the result… so far!

In the dim and distant past of one year ago, ems where viewed as the holy-grail of measurement units for designing accessible websites. An EM being a relative value meant that if the text was resized by the viewer via the browser, the layout would expand in proportion to the resized text. A tricky skill to acquire and in the case of an image-rich website, a very tricky method to implement.
But along came IE7, where the browser’s resize function didn’t just apply itself to text, but to images and indeed the entire webpage. The text was no longer resized, the page was zoomed. I thought this combination of genius and common sense was inspired, but perhaps because it was a Micro$oft product it was largely ignored by the web design community at large. Of course IE7 borrowed heavily from the Opera browser, which had been using its own page zoom since the dawn of time – perhaps for so long that people had forgotten it even existed. But now, the mighty, all conquering, all important Firefox in its manifestation 3 has arrived (the RC1 has anyway) and suddenly there is murmuring amongst the design community that this zoom feature is really nice and might even be a good thing.
What it does mean is that in the very near future, 90% (or so) of online users will be using the page-zoom method to enlarge their text. So the humble EM unit will be a far less significant choice when it comes to webpage design. In theory, using pixels as a unit of choice with the occasional percentage spacing for elasticity might provide more control over a sites’ design than the current and at times painful method of today’s EM based layout.

Finally @media have rid themselves of the web 2.0 look – gone are the reflections and 3D ‘soft-furnishing’ lettering – rejoice! Although I’m not sure about the amateur indy rock band look…
As usual I won’t be at @media but I will look forward to any podcasts of the event that make there way to the web for us less fortunate souls.

The accessibility laws are vague to say the least at the moment in the UK and although there are general guidelines for creating and publishing websites (and I’m happy to say that I adhere to them), they aren’t necessarily law… yet. Aside from making sure that your service is accessible to all users, there is no specific law that applies to websites. The grey area here is: what exactly constitutes a service. In my view it’s making sure that your business website contains information that can be viewed by all site visitors. You business website provides a service of informing visitors about your business. If you have a strictly personal blog/portofolio site then perhaps these accessibility concerns might be relaxed – but why would you want to exclude visitors from your site even if it’s just personal? I can appreciate the philosophy that because all web content is officially published, then that makes it subject to the same constraints as all other published material and thus, the same accessibility guidelines. This would make even personal website subject to accessibility law. In the UK this subject has been actively analyzed since the tail end of last year and hopefully the latest studies will result in clearer laws. You can read some comments at uk webstandards.org. In the meantime, I shall continue to create websites, personal and business that adhere to generally accepted accessibility principles on the web.

I’ve just read a decent post by Jonathon Snook about his displeasure at using CSS reset stylesheets. A reset stylsheet is a generic ‘cover-all-bases’ css file that strips all css properties that are passed into a web page by the browser. In theory, this creates a clean slate upon which to build your website so that it will be identical in each browser. But I don’t use them and don’t feel the need to do so. When I have used them I found that I spent most of my time ‘re-correcting’ the CSS resets and the eric myer level of resetting I simply found obtrusive and doesn’t fit in with my coding practice at all. In fact I reckon that it takes me more time to un-reset the css in that Eric Myer version than it does to target the specific elements I actually need to reset and simply write a basic reset style for each web site. I am quite comfortable with the subtly different ways that each browser renders its h1 element. Like Snook, I don’t have a problem with people using them, but I’m so glad that someone with a fairy high profile such as his has dared to suggest that they’re not for everyone.

UPDATE:
Following the Jonathan Snook post, Eric Myer posted his very eloquent response.

I occasionally potter down to the odd forum, happen across the odd tutorial and during the course of a typical days work I’ll research new ideas or even old ones from those at the top of my profession. They bang on about semantics in (x)html, about accessibility, about reaching as large an audience as possible without unduly effecting their enjoyment of the webpage. But so often I come across non-semantically named IDs and CLASSES in HTML written by these bastions of web standards. One recurring trend it to construct a multi-column layout with naming conventions such as right-col, middle-col, left-col. Now where’s the semantics in that? What does right-col tell me about the content in that section? Nothing at all – its meaningless. Ok, when designing a webpage its not always easy to know what kind of content is going to be placed in that section – especially when you’ve included a content management system whereby the client can add his/her own content later on. But right-col? This has nothing to do with any kind of content – it relates purely to its visual position in a fully styled webpage. A webpage must make sense without any styling whatsoever and its HTML should be written in the order it is intended to be read. A better naming convention might be simply col1, col2? Better, but this still suggests a styling/presentational concern. More semantic might be text-block1, text-block2 if the anticipated content is largely text. You get the idea.
There is one tutorial which show a method for creating a three column layout in css and I’m highlighting it here because it has worryingly been adopted my many web designers (even the mighty A List Apart has an example that sees the centre column appear ahead of the left column in the HTML) – but not only does it use meaningless naming conventions of rightcol, middlecol and leftcol, but it doesn’t even list them in the right order!! To achieve its three columns, the designer has use a combination of left floats and right floats so that leftcol is on the left, rightcol is on the right and the middlecol… you guessed it, is in the middle. However, when viewed without its styling, you will read the left column first (fine), then you’ll read the right column and then you’ll read the middle column – so it’s totally meaningless and impossible for screen-readers to present affectively or for those with older browsers, or mobile devices who simply don’t have styling turned on. I have written my own three column layout which functions beautifully in all browsers, degrades gracefully and can be read in the order it was written!! Perhaps when I finally organise my tutorial section, I’ll include it there.
So, to conclude. Make sure your HTML element IDs and CLASSES make sense and as best you can, describe the content and NOT its position on the page. While you’re at it – make sure the webpage makes just as much sense without styling as it does with.

Its the annual naked css day today, which is a day set aside for all standards advocates to remove styling from their website in order to show that their sites make just as much sense without the pretty colours and element positioning. Good idea me thinks – but glad its only for a day or the web would become very dull indeed wouldn’t it?

To know more about why styles are disabled on this website visit the

Annual CSS Naked Day website for more information.

Well, I’ve upgraded to 2.5 – and I am impressed with the admin interface – I don’t think I’ll need to supply my own anymore. As for everything else?? Well it’s a blog isn’t it! But I suspect its more efficient and much more secure than the previous version – and far more secure that some of the versions I had been running on various sites. All updated now, so rest easy!

I’ve just done a bit of browsing, as you do – and come across mon.itor.us a free website monitor. Like all uptime monitors it, it checks a url at certain intervals and if it finds a site to be down – it emails and tells you so. I have used similar systems in the past and they work reasonable well, with occasional false negatives. But many of those services are either restrictive (as in freewebmonitor.com: only allows three websites to be checked per account) or unreliable (monastic – many many false negatives). So here’s the new kid on the (my) block, Monitorus.

This a comprehensive looking FREE service with no limits on the number of url’s submitted. It will check port:80, it’ll PING your site. it has facility to check websites externally and internally (I’ve yet to work out what internal checking entails – but glad that it its offered).  All in all it looks promising. But,as they say (who are they? the wizards??), the proof of the pudding is in the eating – so I’ll wait and see over the next couple of months.

http://kilianvalkhof.com/ An interesting experiment to determine just how many CSS classes can be applied to a single element.

While I’m at it, Microsoft have released pretty comprehensive details of their CSS support in all IE browser versions upto IE8 Full release. Little or no CSS3 support it seems, which  is a shame. Perhaps IE9 (shhhhh, I didn’t tell you that’s what it’ll be called ) will show more support in this area.

Great news for us lowly web developers as Microsoft announce that they are going to reverse the decision to ‘default’ to IE7 rendering and will now default to the current version of IE – this is a bold and common sense backtracking and I’m please to see that Microsoft haven’t been stubbornly bloody-minded over this matter – well done.

Now I’m officially employed by Leeds Met Uni, I have access to their library facilities. So, out of interest I have a look at their Web design section. To my (expected) horror, not one book was recent. Book after book I opened was purchased between 2001 and 2003, making them not only dated in the design advice they give, but also in coding. No standards awareness, no accessibility best practice etc…

I look again and see if it becomes better!!

I have been deliberating this for some time, and in the past have often used a background image to display the website’s logo. This is invariably as a background replacement for the H1 text to score points in the SEO arena. But this has always left me somewhat uncomfortable. The logo of a website isn’t mere style, its valid and contextual content, it is a visual representation of that company and in that sense it is its face. The face of a named individual would always be presented as an IMG inline image, so why not the logo? Also, talking of SEO(search engine optimisation), this logo would then have to declare an ALT value, thus providing a very important aid to the site’s google ranking that is otherwise lacking with a mere background-image. So an inline img logo plus and h1 header value would provide proper semantic markup and increase a site’s SEO performance.

Any web designer (or front end developer) worth his salt will be oh so painfully aware that the latest browser offering from Microsoft, IE7, although a vast improvement on its predecessor is still severely lacking standards-compliance with regards to CSS. But to see just how bad a job they have done in the five years it took the largest software company in the world to make a simple web browser, head over the Sitepoint website where they are finding so many more issues that I could ever have believed.

another of my very short postings – but I just wanted to share with you a new site about typography http://ilovetypography.com/ – well, I do like to share but I also don’t want to lose this url under the mountain of browser bookmarks – so it’s worthy of a blog post so that I may find it easily

Now this is interesting! A paper thin battery… read on at ars technica.

This is a long and drawn out question that’s been bothering me and many many other web designers for some time. Back in the day, I learned to code in html 4.0 – the (not so) good old days of blink elements and the like. Then xHTML gained popularity for no other reason than that it was new and thus must be the natural evolution of HTML. xHTML1.0 became xHTML1.1 and latterly xHTML2.0 – it would be natural to assume that if one were to keep up with technology then you ought to use the latest incarnation of this HTML evolution? Wrong, it seems. For conventional websites, there’s no benefit to using xHTML over HTML – in fact xHTML isn’t anything more than invalid HTML unless parsed with an XML parser… I would certainly expand on this explanation if I understood what all this meant Because of this I have been using HTML4.01 to code my web pages – and not xHTML1.0 that I had been using previously. Pure web pages, if they are to be absolutely valid and compliant should be HTML 4.01. Or so I thought… but now, after listening to a lecture by Tantek Calik, it might be a good idea to code using xHTML 1.0 afterall. His argument is that, if you author your pages to be xhtml – they are well formed xml. and a nice side affect of that is providing an api by default for anyone trying to read your site with an xml parser. Spending the little extra effort to code up xHTML 1.0 in the first place will have no discernible ill affects on the site as a whole and will allow it to be used in mashups etc. in the future should you so wish.

I’m still undecided which to use however, and will make my decision based on the nature of the site I’m building at each time, and evaluate the likelihood of its content being appropriated in the future.

Not everyone can make it to industry events such as @media, expense, location, indifference maybe factors contributing to design-isolation. Thankfully, the podcast of day one of this years @media event are now available for download from the vivabit website. These are well worth a listen for anyone interested in current trands or developments in webdesign and development.

a new organisation has been tentatively setup now called Unbound. It aims to gather artists together from the West Yorkshire area in order to take exhibition opportunities into their own hands.

Over at 456bereastreet there’s an interesting discussion about the effects of html 5.0 and the push for browser compliance. This is a useful short discussion around the ‘don’t break the web’ principle and what its all about.

Mollly E. Holzschlag will now be contributing to the development of Microsoft’s Internet Explorer. Molly is a web standards champion and IE has long been criticised for being hopelessly standards non-compliant, and rightly so. Will this signal the dawn of an IE version to truly rival Firefox and Opera? Time will tell. Read the full article here

click… goto video Its been around for a little while but its an absoulte gem and worth another mention.

Intype alpha After much anticipation an alpha release is finally available for download. Its pretty basic, as you’d expect from an alpha, but already you can glimpse the level of functionality to expect from a final product. Well done to all involved.

I have been using a little text-editor on the mac called TextMate, which I think is fantastic – it looks good, feels good and has a number of shortcuts that will be useful for any xhtml/css coder. However, I don’t just edit on a mac – sometimes its more convenient to work on the windows machine in my office, or even out of the office but the current crop of html editors for windows are, in my view, dull and unintuitive. Happily, after much scouring and much waiting, an alpha version of Intype will soon become available. This is not a textMate clone but does borrow heavily from it and incorporates all of those features that I love about textmate and what makes it a worthwhile web-developers tool. I’m hoping the preview facility is as good as textmate’s also… with any luck I’ll be able to find out in the next couple of weeks when the alpha version is released for testing.

this has to be good news although I’m not holding my breath for when the standards are finally set, and then for web browsers to adopt them. As it is xhtml is acting as a half way house between where HTML4.01 left off and where HTML5.0 ought to be. XHTML is strictly speaking for web applications and a valid XHTML page is a masked invalid HTML4.o1 page – but its an accepted standard to some extent albeit not totally correct.