CSS and Web Design Articles
Web Design Trend: Vector Illustrations
Posted by admin, 2 Years, 11 Months, 1 Week, 5 Days, 5 Hours, 56 Minutes ago
The very inspirational Web Designers Wall has taken a look at an emerging trend in web design - using vector illustrations as the main graphical elements in the header of a page.
"Here is a nice collection of over 30 sites that demonstrated excellent use of vector illustration. This set of site has proven that illustration is suitable for all type of sites - from personal blogs, to designer showcases, and even professional or corporate sites. Not only illustration can set the mood and characteristic of the site, but it can also establish an icon (branding) of your corporate image."
Click here to read the full article
Best resources for free icons
Posted by admin, 2 Years, 11 Months, 2 Weeks, 34 Minutes ago
Icons can really improve the look of your website and can also help usability.
If your a web designer you might be comfortable creating these icons yourself - but for everyone else - here is a list of the best free icon resources I know of:
FamFamFam Silk Icons
The FamFamFam Silk Icons are probably the most popular free icon set. "Silk" is a smooth, free icon set, containing over 700 16-by-16 pixel icons in PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. You can't get any better than that.
The Silk icons are licensed under a Creative Commons Attribution 2.5 License. This means you may use it for any purpose, and make any changes you like - just make sure you include a link back to the authors webpage in your credits.
IconFinder
IconFinder dubs itself as the best search engine for icons (although it is probably the ONLY search engine for icons).
It is a very handy tool. Just type in the name of an icon you are looking for (for example "error") and a list of error icons will be shown, along with the further information such as the license the icons belong to. There's also some handy search filters available (search by icon size, background color) and a MacOS dashboard widget for those Mac-fans out there.
Crystal Clear
Icons from the Crystal Clear icon set were created by Everaldo Coelho.
The icons are licensed under the GNU Lesser General Public License (LGPL). All images are 128x128px and are in PNG format (with transparent background).
Tango Icon Gallery
The Tango Icon Gallery is a direct result of work on the Tango Free Desktop project.
This icon set is more designed for application/desktop use - but there are plenty of icons there which are applicable to websites and web applications. The Tango base icon theme is licensed under the Creative Commons Attribution Share-Alike license.
IconBuffet
The Chefs at IconBuffet painstakingly create dozens of new free icons each month which are somewhat randomly delivered to members according to super-secret schedules. If you're not already a member, you should really sign up
If you have another favourite icon resource please leave a comment so we can add it to this list.
5 Web Accessibility Tips For The Humble ALT Tag
Posted by admin, 2 Years, 11 Months, 3 Weeks, 1 Day, 15 Hours, 3 Minutes ago
I recently attended a couple of Web Accessibility seminars and thought I would share my experiences. Before the seminars, my exposure to ALT text in terms of web accessibility was nothing more than "always have alt texts on images". However, after attending the seminars I now have had my eyes opened to the world of accessible web design - and I must say, it's a bit daunting.
There is quite simply SO much to take into account if you want to make your site 100% accessible, however, there are definitely some quick and easy things you can do to take steps towards your site conforming to at least the WCAG Priority 1.0 Guidelines. The first of these steps is to ensure you use the ALT texts in a correct manner.
The following tips are 5 of the most important things to keep in mind about the humble ALT text:
1. Decorative Images Should Have Blank ALT Tags
As I mentioned, simply having alt text on every image isn't enough. To understand why this is you must understand how and why ALT texts are used. One of main reasons we have alt text is for screen readers to be able to provide a verbalize an image on the page to a vision-impaired web user.
However, the tip I learned is that you don't always want to put text in the alt text! If an image is used for purely decorative purposes. you should use an empty alt attribute.
For example:
... <img src="/images/swirls.jpg" alt="" /> ...
If we have a website about dogs for example, and we have some decorative images of dogs along the right hand side of the page then we need to ask ourselves - do visually-impaired people need to know those images are there? Or are they purely decorative? It takes time to read out the alt texts of an image with a screen reader - so do we want to be wasting the user's time in telling them there are pretty pictures of a dog running in a park?
Note: The preferred way of displaying decorative images would be to use the CSS background-image selector which will mean the image is not shown when stylesheets are turned off, and not announced to a screen reader user at all.
2. Don't Put 'Image of ...' in ALT Texts
Another thing to keep in mind is not to put unnecessary text in the alt texts:
For example:
<img src="/images/georgewbush.jpg" alt="Image of George W. Bush" />
Most screen readers will announce the item as an image anyway - so the above example will be read out as "Image - Image of George W. Bush" which once again means the screen reader user is forced to hear duplication of information.
As a result, avoid using thing such as 'image of...' or 'the following is an image of ...' in any alt text.
3. Keep ALT Texts Concise
This is fairly logical and follows on from the second point - we want to keep ALT texts concise as possible.
4. ALT Texts For Images Containing Text Should Be The Exact Words
Firstly, avoid using images for text as much as possible.
BUT, if you must do it - make sure the alt text of the image is the direct equivalent of the text found in the image.
5. Images That Are Links Should Have ALT Texts Representing The Link Destination
For active images that link to other pages, the ALT text should indicate the link's destination or function. Also, avoid writing ALT text using the words 'link to...':
For example:
<img src="/images/whitehouselink.gif" alt="link to whitehouse webpage" />
Instead, you should use the following:
<img src="/images/whitehouselink.gif" alt="whitehouse webpage" />
There you have it - for more information about ALT text, you might want to check out the following links:
* Guidelines on ALT texts and IMG elements
* Mini FAQ about the alternative text on images
