Forms… well, we all know what a pain they can be to get right, to keep accessible and secure and to style nicely. With the continued expansion of Google apps and their brilliant record in regards to spam filtering – I was very happy to find the forms making an appearance in the google docs :)
Everyone has their favourite browser – be it the default installed on the home computer or one of the newer and more modern browsers like Firefox. As webdesigners – we have no influence over how our sites will be accessed (no matter how much we wish we had…). And of course, we work towards ensuring our sites not only work across all required browsers but also look professional. We have no choice but to take into consideration the different viewing platforms. This could be any of the different browsers on a desktop or laptop computer, or one of the mobile browsers and now also other browsers found on games platforms. In addition – the screensize, resolution and functionality needs to be planned for as well.
→ continue reading…
A few weeks ago – I went to the standards.next meetup which was absolutely fantastic :) The event was organised by Bruce Lawson and Henny Swan, who evangelise Open Web Standards for Opera. It was one of the best geek meetups I’ve been to in ages… I couldn’t believe how great the speakers were and how much solid information was shared… I learnt a ton and really enjoyed it.
I had intended to write this post straight after the event and sum up a few bits of content. Unfortunately I’d been so busy that I did not have the time. So rather than delaying this further I’d like to show you a clip of Bruce Lawson and his talk on HTML5 instead.
Bruce Lawson from Opera: The HTML 5 Experiments from Sigurd Magnusson on Vimeo.
Bruce Lawson from Opera talks at O’Reilly’s OSCON 2009 conference about HTML 5.
“Presented by Bruce Lawson (Opera Software ASA). A pragmatic look at HTML 5 by experimenting with converting a real site to HTML 5 – how does it work? Where it useful and where is it annoying? How is support in current browsers?”
Personally, I am very fond of Style Sheet Switchers (I’ve been meaning to put one on this site for ages now, oh to have more hours in the day! I will find the time – one day). For me – they add a certain playful touch to the site if done creatively. They are however much more important functions to consider so a style sheet switch function is not only a little bit of eye candy or simply a superficial feature but can also add to the accessibility of a website. It is good to offer an alternative colour scheme which would switch the page from light coloured text on a dark background to a dark coloured text on a light background, for example. → continue reading…
Looking for a suitable script for the popular lightbox presentation to show my web students – I went online to do some research and was quite taken back with the number of different techniques now used. With jQuery being such a light and apparently designer-friendly script – it was no surprise to find it in use extensively. I came across this great post: 10+ promising jQuery Lightbox-Clones Plugins by insicDesigns. This list shows various different techniques and makes for interesting experimenting :)
→ continue reading…
For ages now I’ve been meaning to write up a brief tutorial on styling quotes. There are many articles out there, many great resources which talk of the different ways of styling quotes – worth a read. My aim here is to give you a bit of info on handling this popular typographical feature, hoping to inspire you to give quotes the attention they deserve.
let’s take this quote from one of my favourite web gurus
(as published on Twitter, 5/5/08):
Jeffrey Zeldman
“”
Content precedes design. Design in the absence of content is not design, it’s decoration.
If you are lucky enough to start learning webdesign at the moment – ideally on a mac – then you do have the perfect tools at your fingertips. The ‘Web Developer’ toolbar (Firefox extension by Chris Pederick) alone can be a great help to learning about page elements, their positioning and properties.
One of the best applications out there however must be MacRabbit’s CSS Edit. Unfortunately for mac only – this code editor can make learning CSS a little bit easier. Luckily there is now an alternative for you PC users – Rapid CSS.
I will focus on CSS Edit here as it’s one of my favourite apps ;) CSS Edit colour codes and tidies up your code – it allows instant preview of applied rules – and even enables you to override the CSS of any given site.
To get you started a quick introduction to its features… → continue reading…
While you are new to handcoding – you will inevitably write CSS code which IE just messes up… :”( In this moment you’d probably like to have a little IE voodoo doll to stick pins into…. :)
But don’t worry – the more you work with the code – the more you will understand how to structure your HTML and CSS better, avoiding most if not all IE hacks. And hopefully with IE8 – if we’re lucky enough – we will have a better version yet…
This post is merely a resources collection – to give you a few links to articles, resources and utitlities… → continue reading…
Spending time on your menu styling will be time well worth spent. Though going over the top with link enhancement will be more distracting than helpful – making good use of icons, graphic symbols and other small additional visuals can create a richer user experience – adding a touch of style and character.
Using CSS – you can use background images to add visual effects to your links – here is a quick step-by-step to take you through one example of a so-called ‘sprite rollover’, as in the example here.
→ continue reading…
Being “a visual type” – as Eric Meyer puts it – and handcoding my webpages as much to the web standards as possible for my overloaded brain to cope with – I’ve come to love CSS as it’s a great techniques to work with. On a positive note – it allows us to fight the browsers and – with a few battles here and there, a few cups of coffee later – achieve a nicely grafted layout which reflects our design concept. Great.
Then, there comes the contact page, blog comments or generally any page using any type of form. And out goes the joy and visual continuity of CSS styling…. :”( → continue reading…
Sorry about this abstract sounding title – just the best way to put it ;)
For those of us who love Flash – it is important to understand how to implement any flash content without alienating those who cannot see it due to browser plugins, security or network settings. The times of flash being something people either love or hate should be over and we can look forward to using flash elements to visually enhance our sites while ensuring consistent design and style throughout.
Using del.icio.us for your bookmarking is not only an excellent way to organise your bookmarks and keep them safely backed up – it can also add a collection of links – which remains current and up to date – to any webpage you design . Using services like Feeddigest – you can customise your feeds, such as any chosen del.icio.us tag/s or collections – and add them dynamically to yoru chosen webpage. While you add any selected links to your delicious page, adding your set tag – allows those bookmarks to be fed through to your site, keeping the link collection displayed fresh and updated frequently.
(If you haven’t heard about del.icio.us yet – you should definitely have a look – read my previous post for more info)
Having played around with getting to grips with what the new version of IE is now throwing at our sites – after reading a lot of useful articles on this subject (see links below) – I’ve ended up with one method to use which seems to work fine. The idea is to only load the style sheet in our ‘good’ browsers understand and use conditional comments to load in the extra style sheets IE would need.
→ continue reading…
When you set out to start learning to handcode your sites in XHTML and CSS – and of course aiming to work towards the webstandards – there are a few things you should keep in mind. Below is my list of what to remember – it will become a little bit of a mixed bag of different bits but I hope it will give you something to think about – please feel free to share your thoughts…
… in case your head is spinning with the new world of coding…
TacoHTMLedit – mac [http://tacosw.com]
CrimsonEditor – pc [http://www.crimsoneditor.com/]
→ continue reading…