Accessible responsive images

Responsive web design, creating a single page that morphs with the view port size, is a major feature of modern web design. There are many factors to consider for performance and accessibility. This article will touch on responsive design’s impact on image accessibility.
Continue Reading Accessible responsive images

Use a content delivery network for dirt cheap


The Yahoo! exceptional performance team has released a series of best practice rules for making your site perform significantly faster. Fortunately, the majority of fixes can be handled by any developer. #2 however seems a bit outside the budget of most developers… until now

2: Use a Content Delivery Network

Let’s say you have a small site that has a very local audience. Sally down the street doesn’t notice any problems with slow images. But what if your site is more global? Will the Sally equivalent in Europe, Asia, India, or the other side of the country have the same experience? Probably not. This is why large sites use the Akamai servers. They can cache images and files closer to the user.

The #2 rule by the exceptional performance team tells us to use one of these distributed asset servers.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

Some large Internet companies own their own CDN, but it’s cost-effective to use a CDN service provider, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.
Best Practices for Speeding Up Your Web Site

Doing this cheaply with Amazon

Amazon’s Web Services give you this functionality for a very low cost. There S3 service costs most people less than $5/month. This gives you easy acces to your private database and storage. You pay by the size of your files and the total traffic.

You can further increase your site’s performance by taking advantage of the hosted Yahoo! YUI CSS and JavaScript libraries.

Background image for visited links

Visited and unvisited screenshots on designmeltdown.com
I’ve been a recent convert to Design Meltdown. The site disects a visual theme and gives examples on how to use them and where they are being used. While exploring the latest post about sketches for the web, I noticed an interesting approach to the visited pages.

The Breakdown

The site has a series of floated divs to display the screenshots. The screenshot is applied as the background image of the div with an inline style. Inside the div is a link that is given display:block and a transparent background image.

Great idea – room for improvement?

While I think the visual design for these screenshots is well thought-out. I don’t like the underlying code. The screenshots are content; miniature representations of other sites. Adding them to the CSS is treating them as decorative elements. The text for each link is: “SCREENSHOT, ” making the page unusable with the styles disabled. To give this page more structure and semantic strength, I would modify the underlying code as such:

HTML Code

CSS Code


.screenshotlist {float:left; list-style-type:none;}
.screenshotlist li {float:left; margin:9px; }
.screenshotlist a {display:block; width:146px; height:130px; position:relative; }
.screenshotlist a strong {text-indent:-1000em; z-index:20; position: absolute; top:0; left:0; width:100%; height:100%; background:url(screenshot.png) no-repeat -154px 0; }
.screenshotlist a:visited strong {background-position:0 0;}
.screenshotlist a img {margin:5px 0 0 5px; border:none; z-index:1;}

Benefits of the new code

screenshot mask
The screenshots now have some structure; an unordered list with links full of good, crunchy content. Screenreaders and those without CSS will have access to the information. Javascript can be used to target links within the screenshotthumb div to open a new window without the need of inline scripting.

Cavaets: I haven’t tested this code yet. It’s very possible the z-index styles are not required. As an alternative, remove the margin on the image and replace it with a border. Add a rule to change the border color on hover and visited.

Design Meltdown is a great site for learning about design concepts. I’ve gleaned a number of nice ideas from them and would love to say I gave a bit of help back to them.