Rubious

Posts Tagged ‘CSS’

CSS Quick Tips: print stylesheets

Wednesday, April 29th, 2009

A print stylesheet — a special stylesheet which formats your website for printing — can be utilised to hide unneeded parts (the site navigation) and save ink for your visitors (swap that white text on a black background for black text on a white background!).

Here are some tips for improving your print stylesheet.
(more…)

CSS Quick Tips: advanced selectors

Tuesday, April 28th, 2009

One of the many advantages of CSS is the ability to select parts of your web page based on a stylesheet, which means when adding content to a website you need not worry about how it is formatted. Headers will be the right size and font, links will be the colour specified. It is all taken care of and you don’t need a manual or reference guide on how to format a page (great for Content Management Systems!)

Advanced selectors can select specific parts of the page and alter them. For example, you can select the first letter of a new paragraph and make it big (for a drop cap) or select the all email links and format them a different way.

Some examples below.

(more…)

Accessibility in web design

Friday, January 30th, 2009

Many people see accessibility as a need to give those with disabilities special treatment. They consider it an additional expense that will not give much tangible improvement on their sales, and so ignore it completely.

In actual fact, accessibility is about treating everyone– no matter what their ability–the same. It also needn’t cost any extra – by creating websites with accessibility in mind you can write your code to the standards and have it accessible with no extra effort. Bolting on accessibility features as an afterthought (such as builders adding a ramp to a building which previously only had stairs) can be inefficient and expensive. Websites created by Spring Bud always have accessibility in mind.

Some of the common mistakes which hinder accessibility:

  • Building websites with tables/frames – two old practices which create complicated and messy code – screen readers have trouble understanding the order to read things in and the invalid code causes problems
  • Using images with no text alternative, often websites will be created as a large image which is chopped up – text in images cannot be read by screen readers, and cannot be enlarged for people with poor vision.
  • Using Flash for websites – although Adobe are making great strides to improve the accessibility of Flash, it still cannot compare to plain text. Additionally, people using older versions of screen readers (they are expensive!) will not have the latest updates that allow Flash to be readable.

An added benefit is that Google and other search engines act just like disabled viewers – they are not currently able to see text in images, they struggle reading Flash content and prefer HTML valid web pages. This means in ensuring your website is accessible you are also improving your search engine ranking.

CSS Quick Tips: text-transform

Wednesday, January 28th, 2009

One of the great benefits of CSS is the ability to easily update or change the look of a whole website by only editing one file – the stylesheet. So whenever a heading is to be IN ALL CAPS, consider using the text-transform property.

h2 {
  text-transform: uppercase;
}
<h2>This header will be in all caps!</h2>

This allows you to write a header in the normal way, but have browsers interpret it as uppercase. Not only is this great for changing your mind later (you don’t have to re-write all those headings!) but it means your visitors can specify that they’d rather see headings in ‘sentence case’ by use of a user style sheet