One of the most overlooked aspects in designing a website that we often brush off is web accessibility. There’s a misconception that web accessibility requires sacrifices to aesthetics, or that it’s not worth the effort.

But, with a growing number of ways that users access the web, creating highly-accessible and universal designs that can be viewed in as many ways as possible is critical to the success of a website.
And here’s the good news: it isn’t as hard as you think.
Most web accessibility guidelines already go hand-in-hand with website development practices. In this article, we’ll explore 10 quick and easy ways to improve your site’s accessibility.

Read the full article from Six Revisions

Image optimisation is something that is quite commonly overlooked by designers and developers alike. Image optimisation can make or break a site, if the site doesn’t load quickly then your visitors will leave. There are also financial benefits as an optimised image uses less disk space and less bandwidth to download.

Compression Formats

There are 3 main types of compressed image formats on the web. JPG (JPEG), GIF and PNG. Each format is slightly different and is used for different things.

JPEG or JPG is a the best format to use for images like photos. There is no transparency with jpeg images.

GIF is the best format for web graphics and illustration type images. GIF is great for graphics because the color palette, unlike a jpg image, is limited to 256 different colors. This allows a gif format to boast smaller file sizes, while retaining good detail when a graphic image is exported. GIF can also export images with transparency, but can leave jagged edges.

PNG is a competitor to the GIF format. There are two versions of PNG, 8 and 24. Version 8 is very similar to GIF, so the one to look at is 24. PNG 24 can sport great detail that one would want from a jpg image, but is able to compress the file size better. PNG 24 also allows you to export transparent images that would appear jagged with exporting with gif.

When in Doubt

If you’re not sure what format your image should be in, this is a nice simple reference that should point you in the right direction.

When exporting transparent images, your best bet is with PNG-24. The file sizes tend to be larger, but they provide spot on quality.

When dealing with layouts, sprites and buttons, your best bet is GIF compression.

When dealing with photos, the best bet is JPEG compression.

Chris Spooner

About Chris

“I mostly earn my living by creating custom brands and logo designs from scratch, as well as designing and building high quality websites and blogs, but I also enjoy producing the odd t-shirt graphic, illustration or character design. I pride myself in having the nerdy skills to build top notch creations online, as well as being knowledgeable in the print side of design.”

[www.spoongraphics.co.uk]

Chris’s work.

Social

Twitter: @chrisspooner
Website: www.spoongraphics.co.uk

---

Do you have a recommendation for Follow Friday? Get in touch via the contact form or leave a comment.

It’s competition time!

We all love Moleskines right? Design Grid is giving you the opportunity to win your very own luscious red Moleskine notebook.

To enter this competition:

1. Follow @design_grid on twitter.

2. Post a tweet:

Win a red Moleskine over at @design_grid! http://tinyurl.com/dgmoleskine

That’s it!

OR

For you non-tweeters, pop a comment on here explaining why you should receive one of these beautiful Italian designed Moleskines and you will be entered into the draw. Please use a valid email address so that you can be contacted if you win!

Good luck! The winners will be announced on the site/via email (if applicable), and on twitter via @design_grid.

At its foundation, XHTML is simply HTML refactored in an XML framework. This post discusses the rules that this refactoring requires all valid XHTML documents to abide by.

XHTML is XML

This means that all XHTML documents must comply with the following rules that are inherited from XML:

• All XHTML attributes must be quoted.
• All XHTML tags and elements must be properly closed. An XHTML element that contains no child elements must be self closing (e.g. <hr /> instead of <hr>).
• Attribute minimization is not allowed. For example, <option selected> is a valid HTML tag, but is not valid in XHTML. The correct way to reflect minimized attributes is to use the attribute name as the value, such as <option selected=”selected”>.
• Structure must be perfectly nested. For example, instead of this: <div><span>foo</div></span>, do this: <div><span>foo</span></div> instead.

XML (and XHTML) must be validateable

Additionally, like all good XML, XHTML must be able to be validated against a schema or definition of its rules. This results in the following additional requirements:

• XHTML element and attribute names must be specified in lowercase, due to the case-sensitive nature of XML, schemas and DTD’s.
• Deprecated tags (such as <center>) and deprecated attributes (such as bgcolor) that are not defined in the schema are not supported.
• The hierarchy of parent/child elements must be written correctly, because they are enforced. For example, an inline element (such as a <span>) cannot contain a block element (such as a <div>).

XHTML is the core to standards-based development

Standards-based development focuses chiefly on three things:

• XHTML, the markup of our dynamic, non-cacheable pages that our servers generate per request.
• CSS, the separate, cacheable files that provide our recommended layout and styling for the content and services delivered in the XHTML.
• Behavior, usually implemented in separate, cacheable files that enhance the content and services by leveraging programmatic capabilities of some browsers/devices.

With the introduction of CSS3, and CSS2 now being used worldwide as a standard for web developers it is safe to say that we all rely heavily on CSS as a whole. Planning and organising your stylesheets is essential for creating manageable and beautiful websites. The idea of organising your stylesheet is actually very simple, and there are many ways of doing so, but I find the following is the best practice.

Comment your stylesheet

This should always go without saying, a well commented stylesheet makes it easier to locate the information and syntax that you are looking for. There are 2 types of comments that I always include in my stylesheets.

Info/Update

This is used at the head of the CSS file displaying what the stylesheet is, what site is it for, who wrote it, and when was it updated.

/*--------------------------------------
Info: Design Grid - Main Stylesheet
Author: Darren Jones
Updated: 09/12/2009
--------------------------------------*/

Section Headers

For every section of the site, put a section header above the syntax. This makes finding section specific CSS a breeze.

/*--------------------------------------
HEADER
--------------------------------------*/

/*--------------------------------------
NAVIGATION
--------------------------------------*/

Define your global rules and main classes first

For anything that will be used globally over the site, set it at the top of the style sheet.

body {
background: #eee;
font:  helvetica, arial, sans-serif 12px;
}
h1 {
font-size: 1.2em;
}
h2 {
font-size: 1.1em;
}

Order CSS like HTML

If your html header is at the top of the page, and your html footer is at the bottom, then your header should be at the top of the CSS and the footer at the bottom.

Use the correct selector

There are 3 general rules for using the correct selectors.

1. Does it need a selector? If not, don’t use it.
2. Use a class if the element/selector is repeated more than once.
3. Use an ID if the element is unique and only used once in the document.

Name selectors appropriately

What happens if your class=”red”gets changed to blue? Wouldn’t it have been better to name it class=”sidebarlink”? Try and think semantically when naming your selectors.

Group together common elements

If your h1,h2 and h3 tags are all to be red, then it is best to group them together to define the colour.

h1, h2, h3 {
color: red;
}

h1 {
font-size: 1.6em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.2em;
}

There are more things you can do to plan and optimise your CSS sheet. We will cover some more techniques and methods in the future.

There are a lot of these posts around, but I usually find that I find a few useful apps when reading them that I never would have discovered otherwise.

There are also a lot of alternatives to each of these apps, so why don’t you share what’s in your dock?

http://www.panic.com/coda/
Coda is everything you need for coding under one roof. It has integrated FTP, live preview, terminal access and a few other features up it’s rather attractive sleeve.

http://www.adobe.com/products/creativesuite/
I shouldn’t need to explain what this one is about. I use Photoshop daily, I would be lost without it.

http://www.panic.com/transmit/
Another fantastic little app from those clever guys over at Panic. Transmit is an FTP client that does all of the essentials. A must have for file transfers.

http://macromates.com/
Textmate is a simple text editor equipped with syntax highlighting, and “bundles” for automating those everyday coding processes.

http://lightheadsw.com/papaya/
Sometimes we need to send a file to a client fast, maybe it’s too large for email and you don’t want the hassle of uploading it via FTP. The solution is Papaya, files of any size and kind are served directly from your own Mac, so there’s no need to wait for the file to upload somewhere. Your stuff is instantly available to anyone with a regular web browser. I use it mainly for quick screenshot sharing to clients/colleagues.

(Abandoned)
I love this app, but unfortunately the developers have abandoned the project. Cocoa MYSQL is an interface for working with your MYSQL databases. It seems a similar alternative is Sequel Pro. I haven’t tried it, but it may be worth checking it out!

http://iconfactory.com/software/twitterrific
For those of you who have heard of Twitter, you will know how useful it is for advice, opinions and general banter. Twitterific is an application bringing all of your and your followers tweets straight to your desktop.

http://www.billingsapp.com/index.html
Being a freelance web designer, I have to keep on top of invoicing, payments and estimates myself. It is made painless with Billings. It generates reports, invoices, quotes, receipts.. all useful stuff. The most valuable tool for me is the time tracking feature that tracks your time spent on a project and adds it to the appropriate invoice.

http://www.parallels.com/products/desktop/
All designers hate Internet Explorer, we also hate having to boot up a separate PC (for us Apple geeks) to test our sites in Internet Explorer. Parallels Desktop allows us to run Windows using a Virtual Machine. Meaning that you can open and minimise Windows on your mac allowing you to run Windows-only software. Marvelous.

http://www.merlin2.net/en/
Merlin – the project wizard. Merlin is a fully featured project management tool that also syncs up nicely with Billings (Number 8 in this list). Merlin would not be for everyone as some people prefer a simple to-do list, but for me, I could not do without it.

–

So, there we have my list of 10 Applications every Web Designer should have in their dock. There are more, a lot more. Why not add to the list with your suggestions in a comment?

Decorate your desktop with images from the pages of National Geographic magazine.

http://ngm.nationalgeographic.com/wallpaper/download

Swing over to Lifehacker to check out the simple command line scripts to download all of National Geographic’s 2008 and 2009 wallpapers.

A quick tutorial on creating a basic PHP login form.

Create a new php file, we will call this one login.php for the tutorial.
In login.php we need to add a form for the user to enter their credentials:

<form action="login_check.php" method="post">
&#60;label>User Name</label>
&#60;input type="text" name="user" />
&#60;label>Password</label>
&#60;input type="password" name="pass" />&#60;br />
&#60;button type="submit" name="submit">Sign in</button>
&#60;/form>

Now we create login_check.php. In there we put the following code:

<?php
// Set the username and password here
$user = "username";
$pass = "password";
if ($_POST['user']==$user && $_POST['pass']==$pass){
$pass_secure = md5($pass); // Add md5 encryption to the password
$expire=time()+60*60*24*30; //Set the expiration of the cookie
setcookie("username", $user, $expire); // Add a cookie called "username"
setcookie ("password", $pass_secure, $expire); //Add a cookie called "password"
header('Location: whatever_page_you_want.php');
}
else {
echo "Incorrect username/password";
}
}
?>

Effectively, the code above checks the username and password, if they match then it sets a cookie for the username and password.

Now if you add this code to the top of every page you want protected by the login script then if these cookies are not set, it will redirect you back to the login page:
<?php
if(!$_COOKIE['username'] || !$_COOKIE['pass']){
header('Location: login.php');
}
?>

Pretty simple eh? This form is by no means secure as it stores the login data using cookies. Even thought the password has been encrypted using md5, it can still be decoded! You have been warned!

In this guide I will show you how to install a LAMP system. LAMP stands for Linux, Apache, MySQL, PHP. The guide is intended to help those who have very little knowlegde of using Linux.

Install Apache

To start off we will install Apache.

1. Open up the Terminal (Applications > Accessories > Terminal).

2. Copy/Paste the following line of code into Terminal and then press enter:

sudo apt-get install apache2

3. The Terminal will then ask you for you’re password, type it and then press enter.

Testing Apache

To make sure everything installed correctly we will now test Apache to ensure it is working properly.

1. Open up any web browser and then enter the following into the web address:

http://localhost/

You should see a folder entitled apache2-default/. Open it and you will see a message saying “It works!” , congrats to you!

Install PHP

In this part we will install PHP 5.

Step 1. Again open up the Terminal (Applications > Accessories > Terminal).

Step 2. Copy/Paste the following line into Terminal and press enter:

sudo apt-get install php5 libapache2-mod-php5

Step 3. In order for PHP to work and be compatible with Apache we must restart it. Type the following code in Terminal to do this:

sudo /etc/init.d/apache2 restart

Test PHP

To ensure there are no issues with PHP let’s give it a quick test run.

Step 1. In the terminal copy/paste the following line:

sudo gedit /var/www/testphp.php

This will open up a file called phptest.php.

Step 2. Copy/Paste this line into the phptest file:

Step 3. Save and close the file.

Step 4. Now open you’re web browser and type the following into the web address:

http://localhost/testphp.php

The page should say: PHP is working!

Congrats you have now installed both Apache and PHP!

Install MySQL

To finish this guide up we will install MySQL. (Note – Out of Apache and PHP, MySQL is the most difficult to set up.)

Step 1. Once again open up Terminal and then copy/paste this line:

sudo apt-get install mysql-server

Step 2 (optional). In order for other computers on your network to view the server you have created, you must first edit the “Bind Address”. Begin by opening up Terminal to edit the my.cnf file.

gksudo gedit /etc/mysql/my.cnf

Change the line

bind-address = 127.0.0.1

And change the 127.0.0.1 to your IP address.

Step 3. This is where things may start to get tricky. Begin by typing the following into Terminal:

mysql -u root

Following that copy/paste this line:

mysql > SET PASSWORD FOR 'root'@'localhost' = PASSWORD('yourpassword');

(Make sure to change yourpassword to a password of your choice.)

Step 4. We are now going to install a program called phpMyAdmin which is an easy tool to edit your databases. Copy/paste the following line into Terminal:

sudo apt-get install libapache2-mod-auth-mysql php5-mysql phpmyadmin

After that is installed our next task is to get PHP to work with MySQL. To do this we will need to open a file entitled php.ini. To open it type the following:

gksudo gedit /etc/php5/apache2/php.ini

Now we are going to have to uncomment the following line by taking out the semicolon (;).

Change this line:
;extension=mysql.so

To look like this:
extension=mysql.so

Now just restart Apache and you are all set!

sudo /etc/init.d/apache2 restart

All being well, you should have a fully functioning LAMP server setup! If you encounter problems the best advice I can give you is that Google is your friend!