These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ‘web 2.0′ sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.

Shrink-wrapped buttons
Shrink-wrapped buttons

Shrink-wrapped buttons


..and a final one!

Here’s the code:

a.btn,
a.btn:visited {
float:left;
background-color: #80c64c;
background-image: url(/images/blog/btn.png);
color:#fff;
text-decoration:none;
font-size:0.95em;
clear:both;
margin:0 0 12px 6px;
line-height: 1.1;
letter-spacing: 0;
}
a:hover.btn {
color:#ff0;
}
a.btn * {
display:block;
font-weight:normal;
}
a.btn b {
margin-left:6px;
padding:2px 0 0 0;
background: transparent url(/images/blog/btn.png) right top;
}
a.btn b b {
margin:0 0 0 -6px;
padding:0 0 0 12px;
background-position: left bottom;
}
a.btn b b b {
padding:6px 12px 12px 0px;
margin: 0;
background-position: right bottom;
text-indent: -3px;
}

a.btn_grn,
a.btn_grn:visited {
background-color: #80c64c;
}
a.btn_grn b b b b {
padding: 0 28px 0 0;
background-image: url(/images/blog/arrows.png);
background-position: right center;
background-repeat: no-repeat;
}

<a class="btn" href="#nogo">
<b><b><b>Shrink-wrapped buttons</b></b></b>
</a>

<a class="btn_grn btn" href="#nogo">
<b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>

<a class="btn_grn2 btn" href="#nogo">
<b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>
<a class="btn_brwn btn" href="#nogo">
<b><b><b>..and a final one!</b></b></b>
</a>

This is an adaption to the work done by:

schillmania.com – More Rounded Corners with CSS
456bereastreet.com – Bulletproof shrinkwrapping buttons

Here’s a link to the pre-sliced Photoshop image: mac_browser_sml.psd

Add some extra padding to the bottom and a reflection to the bottom of the browser frame to get that web 2.0 look.

Here’s the CSS

#browserWrap {
float: left;
margin: 0 12px 12px 0;
}

#browserWrap .browsershot {
width: 306px;
background: url(images/mac_browser_bot.gif) no-repeat bottom left;
margin: 0;
padding: 0 0 6px 0;
float: left;
position: relative;
}

#browserWrap .browsershot a {
width: 305px;
background: transparent url(images/mac_browser_top.gif) no-repeat top left;
margin: 0;
padding: 20px 0 0 1px;
float: left;
display: block;

}
#browserWrap .browsershotscroll {
width: 306px;
background: transparent url(images/mac_browser_scroll.gif) repeat-y right;
margin: 0;
padding: 0 0 0 10;
float: left;
z-index: 2;
}
#browserWrap .browsershotscrolltop {
background: transparent url(images/mac_browser_scrolltop.gif) no-repeat top right;
margin: 0;
width: 100%;
z-index: 3;
}
#browserWrap .browsershotscrollbot {
width: 6px;
height: 15px;
background: transparent url(images/mac_browser_scrollbot.gif) no-repeat bottom right;
margin: 0;
position: absolute;
bottom: 6px;
right: 0;
z-index: 3;
}
#browserWrap img {
border: 0;
}

The mark-up

<div id="browserWrap">
<div class="browsershot">
<div class="browsershotscroll"><div class="browsershotscrolltop">
<a href="/log/"><img src="/images/blog/website_thumbnail.jpg" width="300" height="263" alt="Eklog" /></a>
<div class="browsershotscrollbot"></div></div></div></div> <!– /.browsershot –>
</div> <!– /#browserWrap –>

Contents:

• Design tips
• Photoshop/Image software tips
• Coding tips
• coding examples
• Structure
• Styling for a variety of email clients
• Rendering bug fixing
• Email delivery software
• Testing
• Examples of newsletters: Evans, Miss Selfridge, BHS, House of Fraiser, ASOS, M&S

Here’s a download link: HTML Email development

Wikipedia will tell you that the international symbol for accessibility is the wheelchair symbol. The International Commission on Technology and Accessibility have designated (and copyrighted) this as the International Symbol of Access (ISA).

The symbol is clear, and it denotes wheelchair access. An alternative to stairs or other obstacles which obstruct the access to wheelchairs will not be found where you see this symbol.

Here are a few symbols that could be used as an alternative to a wheelchair:

In the world of the world wide web, access is not about limitations or disabilities, it’s about alternative ways of accessing shared information.

Some people like to use their finger tips or a little plastic mouse to peruse their digital feeds, as odd as that may sound, and some people like to use their ears, and others use their mobile devices or computer game consoles.

If you don’t have keyboard access for your user interfaces, people with physical disabilities may not be able to navigate your site, and people with touch screen phones may also be denied access. If your movies don’t have captioning they’ll be missed by people with visual impairments and automated internet robots (search engines use these to access to your site’s content).

The symbols could denote adherence to the following:

• Content is accessible with a screen reader
• Content is clear with CSS and JavaScript turned off
• Visual content has alternative text
• Moving visual media is captioned
• User interface controls have keyboard access
• Hyperlinks have titles describing the links destination
• Text can still be accessed when enlarged or reduced in size

Handy accessibility link: joeclark.org.

Here’s a few tips to bear in mind now we have a new range of browsers.

Accessibility needs are becoming more important as a solution to giving cross-browser accessibility to everyone. It’s not just people who have accessibility needs, now it’s devices, or ‘thin clients’ which are having accessibility issues.

There’s some new rules for ensuring your web site works with browser zoom or in the new mobile browsers.

Phone browsers

There’s two new browsers in town: Apple IPhone and Opera Mini (testing on version 3.1.2). They shrink full websites down to a small screen size.

1. Css media=”handheld” is ignored by the iPhone and Opera mini browsers. They think they’re real browsers. Any style-sheet with media=”screen” will be rendered by these phone browsers.

2. Zoom isn’t a raster zoom. The text font size is reduced independently to the spacial elements. It should be reduced by exactly the same amount but it doesn’t always work perfectly.

– If there’s a mix of different size fonts on your page, the zoom will try to maintain their relative size ratio. So, for example, if the navigation has a text size that’s a lot bigger than the body text, it’s likely it will look too big on a phone browser.
- Piped lists are tricky. If you just add a right border it gets all squashed up. There’s been a lot of work on developing a piped list (e.g. ‘link1 | link2′) with the best possible mark-up and all presentation separate in the CSS. Brunildo’s CSS piped list is one of the best – and it seems to work well with browser zoom. He uses the cssplay min width technique.

3. Opera mini doesn’t do DHTML well. That means it doesn’t do show-hide toggles, carousels, or menu drop-downs properly.

Here’s what they say at the Opera Mini Dev Center:

1. Limited support for DOM events
2. No background scripting
3. Very limited Ajax support

So all those people who said your web page should be accessible with javascript disabled may have had a point.

The iPhone can handle these properly.

4.Sliders, dials and drag-drop functionality

Accessible user interfaces are needed for phone browsers with touch screens. The touch screen function is used to either scroll the page or for zoom using the iPhone’s new ‘pinch’ functionality. This means ‘draggable’ controls cannot be used with the touch screen technology. This includes sliders, dials and drag-drop elements. So long as the control can be brought into focus and controlled using keys, it should be possible to operate them on some touch screens but the iPhone has no access at all.

5. Flash does not work on the iPhone or using the Opera Mini Browser.

Zooming on ‘computer’ browsers

1. If people use the zoom in the Opera browser you need to ensure you select background colours properly. Divs with background-color: transparent on top of a div with a white background – it turns black. You need to set the background-colour to white. (This doesn’t seem to cause a problem in the mini-opera phone browser.)

2. Zooming on IE7 – watch out for your floats. This won’t affect most sites but some liquid sites using opposing floats can be affected. (You don’t see any of the float issues seen in IE7 (Opera and Opera Mini pass the acid test).)

Click here to see the test

The new box model hack

Safari isn’t a new browsers, but it’s now more widely used.

If you have a liquid layout you’ll find you need to set the width to 100% for some elements to expand properly in the Safari browser.

Now if that 100% width element contains no text content and you float it against another element, such as a column or an image, Safari can expand it over the second element. The other browsers just expand to the adjacent floated element.

If you pad up an element on the side it’s sibling elements are floated against, Safari will add the padding to the other side. A workaround is to wrap the div so you can use margin instead of padding.

Windows -> Actions
> (button in top right corner of actions box)
> New Set (name)
> New Action (name) — recording

Image Size
[] untick resample image – redo resolution – OK

File automate -> Fit image
(keep the x and y the same) OK

File -> Save as -> Place
File close (For save for web must have “No, don’t save original” after close)

Actions -> Stop button

File -> Automate -> Batch

Source -> CHOOSE (button) (supress color profile warnings)

p.s. – open an image before you start this procedure.