| 456 Berea Street |
| Put this feed on your website |
| Description: |
456 Berea Street is where Roger Johansson writes about web standards, accessibility, usability and other topics related to web design and development. |
| Format: |
RSS 2.0 |
| Url: |
http://www.456bereastreet.com/feed.xml |
| |
| Latest headlines |
456 Berea Street
|
Quick Tips for web developers and web designers
Tue, 02 Dec 2008 20:28:00 -0600
I spend a fair amount of time doing quality assurance of websites. This includes reviewing code (HTML, CSS, JavaScript), reporting accessibility and usability issues, giving tips and advice, and so on.
In these reviews there are some things that keep coming up. A lot of them are pretty simple and basic things if you ask me. However, there are many people who make the same mistakes, so maybe those things aren?t that simple after all. Or maybe the problem is that they aren?t widely known.
In the hope that it will help some people out I am going to start a new category of posts here called ?Quick Tips?. Each Quick Tip will focus on one of the issues that I come across while doing QA work, and will probably be anything from a sentence to a few paragraphs in length.
This is not meant to ridicule the mistakes or the people who make them. My sincere intention is to help people avoid making these mistakes in the first place by attempting to spread the knowledge.Posted in Accessibility, Quick Tips, Usability, Web Standards.
|
Making Google Maps more accessible
Mon, 01 Dec 2008 17:12:00 -0600
It has become very popular to use the Google Maps API to add maps to websites. While the maps work fine for most users, unfortunately Google Maps does not by default work without JavaScript ? when there is no JavaScript support, you don?t get a map.
Fortunately it is quite easy (but not very common) to provide a fallback for users who do not have JavaScript enabled in their browser by using the Google Static Maps API.
The Google Static Maps API lets you embed a map as a plain image in various formats. The developers guide explains the many options you have when it comes to configuring the static maps.
So next time you use the Google Maps API to put a map on a website, take a couple of minutes to add a static fallback for users without JavaScript.
While we?re on the topic of making Google Maps work for more people, I recommend reading Patrick H. Lauke?s article on creating Keyboard-accessible Google Maps. Making Google Maps usable without a mouse requires a bit of hacking, but the end result is well worth it.Posted in Accessibility, JavaScript.
|
Make HTML messages readable in Apple Mail
Thu, 27 Nov 2008 19:34:00 -0600
Long time readers may have noticed that I dislike receiving email in HTML format. It?s not primarily because HTML email uses HTML instead of plain text that I dislike it though.
No, the main reason is less ideological than that. I dislike HTML email simply because it is often very hard for me to read, since for some reason many HTML-formatted emails use extremely small font sizes.
Luckily there are workarounds. If you use Apple Mail like I do I know of two things you can do that will make HTML messages more readable.
Force Apple Mail to display the plain text alternative if there is one
I?ve been using this for years and can?t understand why it isn?t available in Mail?s GUI. Here?s what to do:
Quit Mail.app
Open Terminal.app
Enter defaults write com.apple.mail PreferPlainText -bool TRUE and press enter (toggle it back by changing TRUE to FALSE)
Open Mail.app
View an HTML message and marvel at the readable plain text
The catch is that this only works for messages that actually contain a plain text alternative, which far from all HTML email does.
Specify the minimum font size Apple Mail uses for HTML messages
As a fallback for the messages that do not contain a plain text alternative it is useful to make sure that the text at least has a readable size:
Quit Mail.app
Open Terminal.app
Enter defaults write com.apple.mail MinimumHTMLFontSize 13 in the Terminal window and press enter
Open Mail.app
View an HTML message and marvel at the readable font size
You can change the font size to whatever suits your eyes.
Apply both of these and you should be able to read most of the HTML email that you receive.Posted in Accessibility, Apple, Usability.
|
TextMate productivity tips
Tue, 25 Nov 2008 19:47:00 -0600
If you saw my post about the DOMAssistant bundle for TextMate, you will already know that my favourite coding tool at the moment is TextMate. If you missed that post, well, now you know.
For anyone who is new to TextMate or considering trying it out, I thought I?d share a few tips. These tips are nothing revolutionary for many Textmate users, but nevertheless they make my workdays a little easier. Several of these tips may not be all that obvious, so I hope you will find something new here.
1. Insert close tag
When editing an HTML document, press Opt + Cmd + . to make TextMate automatically insert a closing tag for the element the cursor is inside.
2. Move selection
To move text that you have selected, hold down Ctrl + Cmd and use the arrow keys to move the text up and down (or left and right). If you?re moving text up or down, make sure to select the entire last line or the line break will get left behind.
3. Tab triggered snippets
Type a few characters and hit the tab key. Bam! TextMate inserts anything from a simple tag or method to an entire document. And if you?re not satisfied with the snippets that ship with TextMate you can add your own. Do you find yourself typing a similar pattern several times daily? Make a snippet out of it.
4. Code completion
Instead of typing every letter of every tag, attribute, method or variable, just type the first few letters and hit the Esc key. TextMate will suggest a word for you. Not happy with the suggestion? Press Esc again to get a new suggestion.
5. Go to file
While working on a project I often have many files open in TextMate. Moving between them by choosing a tab can be awkward when there are more open documents than fit in the tab bar. That?s when Cmd + T is very handy. It opens the Navigation - Go To File... dialog box, where you can either choose which file to work on or type a few letters that are part of the name of the file you are looking for.
6. Wrap selection in open/close tag
When you want to wrap some text in an HTML element, select the text and hit Ctrl + Shift + W. TextMate will wrap the selection in a p element. The element name in the opening tag is selected, so if you need a different element, just type it in and TextMate will change the closing tag as well.
Want to wrap multiple lines in separate elements, for instance to create list items? Select the lines and press Ctrl + Shift + Cmd + W and TextMate wraps each line in a list element. Again, if you want a different element just type it and the <li> and </li> tags will be replaced.
7. Move through text efficiently
In TextMate and most other Mac applications, the modifier keys change how the arrow keys work when moving through text. Holding down the Cmd key skips to the beginning or end of a line, and holding down the Opt key will skip to the next ?word?.
TextMate extends this by letting you use the Ctrl key to skip to the next word or word separator. That comes in very handy when you want to select part of a variable or method, since TextMate treats dashes (-), underscores (_) and case changes (like in CamelCase) as word separators.
8. Wrap Word/Selection as Link
When you need to link a piece of text, copy the URL, select the text you want to link, and press Ctrl + Shift + L. TextMate will wrap the selection (or the next word if there is no selection) in a link, using whatever is in the clipboard for the value of the href attribute.
9. Delete whitespace, and only whitespace
When editing files I often find myself deleting whitespace between the opening and closing tags of elements. Holding the option while pressing delete or backspace will remove all whitespace between the cursor and the next ?word?. The catch is that TextMate will also remove the end or beginning of HTML tags this way, which is incredibly annoying. But using Ctrl + Opt + Delete will delete all whitespace from the cursor until the next HTML tag without touching the tag.
10. Create a project by dragging files onto TextMate
When you want to work with several files that are related in some way it?s very handy to have them in a TextMate project. The quickest way to create a new project containing the files you need is to select the files in the Finder and drag them onto the TextMate icon in the dock. Remember to save the project file if you want to reopen it later.
11. Indent and outdent text quickly
Select the lines you want to indent or outdent, then press Opt + Tab to indent them or Shift + Opt + Tab to outdent them.
12. Macros
TextMate lets you create macros that combine multiple commands, which can be very useful. One macro that I use a lot when writing posts for this blog will turn a selected block of code into an ordered list with code elements and classes that match the indentation level.
Just scratching the surface
Those are just a few of the TextMate tricks I use every day. There are many, many more, and I?m sure most TextMate users would pick different favourites.Posted in Coding, Productivity.
|
Dissecting the Web with Opera?s MAMA
Mon, 24 Nov 2008 19:49:00 -0600
The people at Opera have created a tool called MAMA. MAMA is short for ?Metadata Analysis and Mining Application? and is used to gather a huge amount of data about the HTML, CSS, and JavaScript used on the Web.
Detailed information about MAMA?s findings is available in a series of (long) articles published on Opera Developer Community. I suggest you start by reading the introductory document titled, well, MAMA.
I doubt it will surprise anyone that the quality of the HTML used on the Web is ? in general ? very poor. For instance only 4.13% of the examined 3.5 million URLs passed validation.Posted in Web Standards.
|
The order of link pseudo-classes matters
Tue, 18 Nov 2008 20:35:00 -0600
Common knowledge to most who have been working with CSS for a few years, but perhaps not something that relative newcomers have come across yet: the order in which you define the different link states affects the end result.
I prefer the following order: :link, :visited, :hover, :focus, :active.
Eric Meyer explains why the order matters and why he also prefers defining the states in this order in Link Specificity, Ordering the Link States, and Who Ordered the Link States?.Posted in CSS.
|
Dyslexia and accessibility
Mon, 17 Nov 2008 20:22:00 -0600
One large group of people with special needs that is often overlooked ? even by those who make an effort to build accessible websites ? is dyslexics.
A good way to learn more about dyslexia, how it can make it hard to use the web, and what you as a designer can do about it is to read Mel Pedley?s article series on designing for dyslexics:
Designing for Dyslexics: Part 1 of 3
Designing for Dyslexics: Part 2 of 3
Designing for Dyslexics: Part 3 of 3
You will also find some useful tips in a presentation by Jonathan Hassell on Dyslexia that was held at the Scripting Enabled conference in London in September.Posted in Accessibility.
|
Remember to specify a background colour
Thu, 13 Nov 2008 18:33:00 -0600
Jeffrey Zeldman recently posted Is your (website?s) underwear showing?, which is a reminder about one of my pet peeves ? websites that don?t specify a background colour but have a design that relies on all browsers having a white background. When the browser background is set to something other than white, some sites look really? interesting :-).
This has been happening since forever. Back in the late 1990?s those of us who used Netscape on Macs saw a lot of it since Netscape on the Mac had a grey default background colour while Windows browsers used white. And back then ?nobody? checked their sites on a Mac.
In case you don?t feel like changing the default background colour of your web browser but still want to see how strange sites can look, check out the Flickr pool Underwear showing (web design).
The solution to this is very simple: if your site is meant to have a white background, specify a white background in the CSS. It will cost you at the most 23 characters:
body {background:#fff;}
Better yet, make sure the CSS you use as a starting point for new projects specifies a colour for both text and background. That way you?ll never forget to do it.Posted in Accessibility, Graphic Design, Usability.
|
Writing good alt text
Tue, 11 Nov 2008 19:45:00 -0600
I do quite a bit of quality assurance work, specifically looking at the accessibility and web standards use of websites. In many cases I make remarks about the use of alternative text for images and other graphic elements.
It is, not surprisingly, common for alternative text to be completely absent, but it is probably even more common to see inappropriate use of the alt attribute. In most cases this is caused by well-meaning people using the alt attribute to describe the image itself instead of the function it has or the content it presents.
Two rules of thumb I use when writing alt text for images are these:
If you were to describe the document to someone over the phone, would you mention the image or its content? If you would, the image probably needs an alternative text. If not, it should probably have an empty alt attribute.
Does the alternative text of any images in the document make sense if you turn off the display of images in your web browser? If not, change the alternative text so it does make sense and does not provide redundant information.
These are just rules of thumb and there are exceptions, but as a general rule I have found that they work well.
In practice this means that images should often have empty alt text, alt="". Be aware though that if the image is within a link that does not also contain descriptive text, the image needs an alt text that describes the link.
Much more detailed instructions for writing alt text are available in an article at WebAIM called Appropriate Use of Alternative Text.Posted in (X)HTML, Accessibility.
|
Find nasty JavaScript with the Obtrusive JavaScript Checker
Mon, 10 Nov 2008 18:42:00 -0600
When reviewing websites to find areas that may be improved, one of the things I look for is whether any JavaScript has been implemented in an unobtrusive way or not.
I normally do that by turning JavaScript on and off, and viewing the source code. It can be a bit tedious. But now there is a quicker way to find obtrusive JavaScript: Robert Nyman?s Obtrusive JavaScript Checker.
The Obtrusive JavaScript Checker will examine the web page you are on and highlight all elements that have inline events or javascript: links, making any obtrusive JavaScript really easy to spot.
Obtrusive JavaScript Checker is available both as a Greasemonkey user script, a Ubiquity command, and as a Firefox extension. I don?t use Greasemonkey or Ubiquity, so the Firefox extension is my favourite.Posted in JavaScript.
|
|