Author: Keelan

Sample Page

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!

CSS Background Tips

If you don’t know any CSS at all, you might want to check out the CSS Cheat Sheet before reading further. Changing backgrounds is pretty basic, but a little extra understanding won’t hurt.

Basic Backgrounds

Recolouring a background is easy enough: put body{background-color:#ffffff;} in your stylesheet, with whatever colour you want in place of the #ffffff.

Background images work in a similar way: body{background-image:url(background-image.png);}, with the name of your background image in the parentheses. By default, the image will repeat – you can change this by adding the background-repeat declaration, for example:
body{
background-image:url(background-image.png);
background-repeat:no-repeat;
}

To move the image away from the centre, use the background-position declaration: body{background-position:left top;} will align the image to the top left corner. You can get pixel-specific if ‘left top’ isn’t accurate enough: background-position:20px 100px; will put the background image twenty pixels from the left and a hundred pixels from the top.

It’s usually a good idea to specify a background colour even if you’re using a background image. The background colour will show if the image has transparent sections or doesn’t repeat over the whole screen anyway, but even if the image covers the entire screen, a background colour will come in useful if there’s ever a problem which prevents the image from loading.

If your code’s starting to feel a bit long, you can combine the background declarations. body{background:#ffffff url(background-image.png) no-repeat left center;} works the same as body{background-color:#ffffff;background-image:url(background-image.png);background-repeat:no-repeat;background-position:left center;}, and is significantly faster to type.

You don’t need to save all your cool backgrounds for the overall body, either. They can be used for everything from major columns to a few selected words, just by changing the chosen selector. blockquote{background-image:url(quote.png);} or something similar is commonly used to add a quotation mark image to blockquotes. strong{background-color:#f0e9a7;} will add a bit of colour to your any bold words in your text.

For greater precision, use IDs or classes: p.tip{background-color:#f0e9a7;} will only change the background colour if you specially mark a paragraph with <p class=”tip”>.

More Background Tricks

Attachments: Usually a background image will move along with the rest of the page as users scroll through the content. Use background-attachment:fixed; to keep a background in one place.

Lists: Bullet lists are normally marked with, well, a bullet. And a rather plain and ordinary one at that. This can easily be replaced with a bullet-sized image. Remove the old bullets with ul{list-style:none;} and add in the new ones with ul li{background:url(bullet.png) left top no-repeat;}. Unless your bullet image is very thin, you should also include padding-left: in your ul or li attribute, set wide enough to indent your list properly so the text doesn’t overlap the bullet image.

Gradients: CSS-generated gradient backgrounds are supported by most modern browsers and are popular on many types of websites. The trick is getting the gradient to work on all browsers – while many browsers support CSS gradients, they don’t use the same code. Chrome uses a -webkit prefix, Firefox needs -moz-linear, and (current) IE uses -ms-linear. (Old versions of IE use some kind of mess which i will not even attempt to interpret.) It’s probably a bit of a cop-out to not include a proper description of creating CSS gradients, but they’re worthy of an entire article on their own. CSS Tricks has a solid article on CSS gradients, and gradient generators exist to create the code for all browsers at once.

Looking for some good background colours (or any other colour to spice up your website)? You don’t need to stick with boring black-and-white! I can create a great five-colour website colour scheme for you. For $5, you can have a unique new website colour scheme.

Speedy Portfolio WordPress Plugin

Lite Version – FREE

  • Shortcodes to make adding images to any page quick and easy
  • Handy customisation of your thumbnail CSS to make your portfolio look great. Not enough CSS know-how? Even unstyled, this is made to look good.

Pro Version – $30

  • Automatically categorise images and update relevant portfolio area based on tag or category
  • Gets information from featured images, not any special custom fields
  • Generate separate pages by tag. Need a special portfolio for a special customer? Tag the relevant posts and generate the page you need.
[contact-form-7 id=”705″ title=”Speedy Portfolio”]

5 Easy Website Requirements for Good Accessibility

Making a website look good isn’t the only important part of design. Websites should also be designed to be accessible to people with disabilities. A great-looking website which is completely inaccessible to blind people is useless to an entire group of people.

There’s plenty of ways to make websites more accessible to people with disabilities, but some of the lists on how to do so are a bit overwhelming. I recommend everyone make their sites as accessible as possible, but if you’re not sure where to start, here’s a few simple things you can put into effect immediately.

  1. Links – Make links clear and descriptive. People who use screen readers will often end up tabbing from one link to another, or getting all the links in one list. If you set up all your links as ‘click here to read a great article’, visually impaired users will hear a long list of ‘click here’ with no other reference to where your links go. Much better would be ‘click here to read a great article‘ – though if your links are styled properly, it should be obvious where the links are without something as redundant as ‘click here’, and you could drop it completely: ‘this is a great article‘.
  2. Image descriptions – For best accessibility, every image should have some sort of description in its ‘alt’ tag (e.g. <img src="image.jpg" alt="image description" />). If for some reason or another an alt tag can’t be used, making sure all the important information in the picture is included in the accompanying text is a good substitute.
  3. Audio transcripts – There’s a wide variety of reasons why a person might not be able to understand audio alone. It might not be possible to provide a full transcript of an hour-long seminar video, but it’s easy enough for shorter videos. This goes double if you’re working from a script or prepared statement and thus already have a written copy of everything spoken. If you can’t do a full transcript, try to at least post a useful summary.
  4. Autoplay – For the love of all things holy, do not have audio or video play automatically.
    • It’s bad for visually-impaired people using text-to-speech screen-readers, because it interferes with the screen reader.
    • It’s bad for hearing-impaired people for a whole pile of reasons, but i’ll stick with the one i’m most familiar with: people with certain auditory processing disorders can hear more or less like anyone else if there’s no conflicting sounds. If we’re trying to listen to something else and music suddenly starts up, we have trouble understanding either sound. If you can’t even get song lyrics because the words and instruments interfere with each other too much, having a conversation when a video blog has just gone on autoplay is certainly impossible.
    • It’s bad for people with certain cognitive disorders who are highly sensitive to sudden, unexpected changes; imagine nails screeching on a chalkboard every time you hear something unexpected. Or, for the really loud and dramatic stuff, your speakers spontaneously combusting. Not going to be spending much longer on a website which has such effect, are you?
    • It’s also annoying for able-bodied/neurotypical people who like to actually control what their own computer is doing.
  5. Colours – Changing colours is a quick way to change a web design, but it’s important to be sure the colours don’t ruin the site for colour-blind users. Don’t make colour the sole indicator of anything important – links, by default, are underlined as well as a different colour from the rest of the text, and the underline can be important to colour-blind users. It’s also important to be sure text and its background contrast well enough for a colour-blind user to read it. You don’t need to stick with black on white for everything, but high-contrast colours are much easier to read than colours which barely contrast at all.

Extra Web Accessibility Resources

A simple introduction to web accessibility – lists the four main types of disabilities which affect web browsing and how to help users work around them
Colour Contrast Check – allows you to check the contrast of two colours and be sure any text written with them will be legible
Wave – helps you check general accessibility

Looking for help in choosing a good, accessible colour scheme? You don’t need to stick with black-and-white to have easily-legible text! I can create a five-colour website colour scheme for you which will include colours which contrast perfectly. For $5, you can have a new website colour scheme in under 24 hours.