Articles Archive

Search Forms in Safari

Search Forms in Safari

Search fields in SafariIt is remarkably simple to put this design feature in place on your site, and it can improve functionality greatly for those using a Mac. Whether Firefox and Internet Explorer will integrate this feature into their browsers in the future is unknown – although it is fairly unlikely.

How to turn the feature on

Using the following code for a form will cause the enhanced search field to display in Safari:

The type="search" tells safari to use the field as a search box, and the autosave="mysite-autosave" results="10" sets additional features about the recent search information.

The downsides

The negative aspect of adding this feature is that your code won’t validate. It’s up to you to decide whether it is a acceptable down-side of improving the browsing experience for those using Safari. We think it is – and you’ll see the enhanced search field on Design Shack!

September 9th, 2007 Posted in Articles, CSS, HTML
GenoPal 3.0 for Mac Review

GenoPal 3.0 for Mac Review

GenoPal Colour SoftwareYou start by selecting a colour. This can be done either through a colour palette, or through an eyedropper tool which allows you to sample a colour from anywhere on the screen – really useful. The software then generates a whole selection of colours based on the one you chose. Two sliders allow you to alter the colour diversity and lightness diversity, so you can select complementary or contrasting colour comparisons.

From a designer’s point of view, another useful feature is that it is remarkably simple to copy the Hex code of any given colour on the chart for easy use in Photoshop or your CSS file. You can save a load colour palettes for different projects.

GenoPal Eye Dropper

There is also a Pro version offering additional features such as the ability to drop and drop colours to create small swatches on screen and the ability to automatically import colours from a picture or a screenshot. This hasn’t yet been released for Mac so we couldn’t review it at this time, but we’ll let you know when it becomes available.

Take a look for yourself and decide whether it’s a piece of software which would enhance your design workflow. There’s also an online version so you can get a feel for how the software works.

September 4th, 2007 Posted in Articles, Software
10 CSS Table Examples

10 CSS Table Examples

Today we’re going to take a look at a selection of beautiful tables styled using CSS. These are sourced from a variety of different sites. If you’re interested in learning how to do this yourself, be sure to take a look at a few of our CSS tutorials!

August 30th, 2007 Posted in Articles, CSS, HTML, Layouts
10 Great CSS Star Raters

10 Great CSS Star Raters

People need a way to know what’s great and what isn’t on the web – so rating systems have been around for a long time. Here is a collection of 20 fantastic CSS star rating tools to integrate into your own website.

We’ve tried to include a star rating script for each blogging or coding platform out there.

1. Creating a star rater using CSS

Creating a star rater using CSS

Can you create a star rating using only CSS. I’m talking the kind that when you hover over the 4th star, there are four stars that show up on the hover state. Well, I’m glad you asked because that is just the question I intend to answer.

2. CSS Star Rating Part Deux

Creating a star rater using CSS 2

Explaining how to create a star rating system with state, and more advanced features.

3. Unobtrusive AJAX Star Rating Bar

Unobtrusive AJAX Star Rating Bar

This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. It is a major improvement on the previous version because it is now unobtrusive, meaning that if Javascript is off it will still work (although the page will refresh).

4. Movable Type AJAX Rating Plugin

Movable Type AJAX Rating Plugin

Ajax Rating is a plugin for Movable Type that enables visitors to rate your entries or your blog. There is also a ‘pro’ commercial version with more features if you desire.

5. Textpattern AJAX Rating System

6. WordPress Post Rating System

7. CSS Star Matrix

8. CSS Star Rating System (check out the source code)

9. Ruby on Rails Star Rating

10. ASP Powered Star Rater

August 2nd, 2007 Posted in Articles, CSS, JavaScript
One Column Slider Layout

One Column Slider Layout

So you know what the aim of this tutorial is, take a look at the end result. This is a fairly technical website, but uses the Moo.fx javascript library for the effects. Make sure that it is downloaded and installed before getting started.

Setting up Moo.fx

First of all, you need to download this Javascript package from the Moo.fx site. Make sure that this is included in the head of each page.

The HTML

You can download a copy of the HTML for the page to take a look and see how the effect is achieved.

The CSS

body {
	color: #222;
	font: 62.5% verdana, arial, helvetica, sans-serif;
	margin: 5px 0 0;
	padding: 0;
	text-align: center;
}
h3 {
	background: #000;
	margin: 5px 0 0;
	padding: 1px 0;
	height: 17px;
	width: 600px;
	cursor: pointer;
	font-size: 0.99em;
}
h3 a:link, h3 a:visited {
	color: #fff;
	
	padding: 2px 8px 1px;
	-moz-outline-style: none;
	display: block;
	height: 14px;
	width: 330px;
	text-decoration: none;
}
#container {
	
	width: 666px;
	text-align: left;
	margin: 0 auto;
}
#header {
	text-align: center;
}
#content {
	padding: 0 10px 25px 33px;
}
p {
	margin: 0 0 1px;
	padding: 5px;
	line-height: 15px;
}
div.wrapper {
	background-color: #EBEBEB;
}
#content div {
	margin: 0;
	padding: 0;
	height: 1%;
}
.stretcher {
	background: none !important;
}

Put it all together

Make sure you reference Moo.fx and the style sheet in the head of your HTML document, and you should be ready to go! Adding new sections to the layout is as simple as adding a new heading and following the structure which is already there.

July 31st, 2007 Posted in Articles, Layouts
Custom 404 Error Page

Custom 404 Error Page

The standard 404 error page can often be really frustrating for readers. Using a simple .htaccess file can allow you to customise your error page, and ensure that users are displayed a useful alternative.

July 31st, 2007 Posted in Accessibility, Articles, HTML
Cross Browser Testing (Mac)

Cross Browser Testing (Mac)

Many web professionals use Apple’s OSX for design and despite what you may think, it’s not difficult to test your website in the big three browsers – Internet Explorer, Firefox and Safari. This article talks you through how to easily test your site and gain access to these browsers on a Mac.

July 26th, 2007 Posted in Accessibility, Articles, Software
Cross Browser Transparency

Cross Browser Transparency

There are many complicated methods to create transparency effects across the various browsers available (Firefox, Safari, Internet Explorer), but it can be simple to achieve this effect using a few CSS tricks. Albeit with a couple of limitations.

Transparency rules

Mozilla browsers can display transparency, using an effect specified through -moz-opacity: 0.5; where the value is between 0 (completely transparent) and 1 (opaque).

Internet Explorer uses a filter property to allow you to show transparency. It takes the form filter: alpha(opacity=50); where the opacity value is between 0 and 100.

Some other browsers (and future browsers) will conform to the CSS3 specification allowing the property opacity: 0.5; with the value between 0 or 1 as with the Mozilla effect.

The way to get this working in all browsers is simply a matter of using all three rules at the same time:

#transparent-area {
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
}

Limitations

The main problem with the above CSS code is that it is notoriously browser specific, and thus does not conform to valid CSS standards. This doesn’t stop it working correctly, but does mean that your CSS code won’t validate.

Also, as new browsers are released and updated you’ll need to alter the above. Hopefully as they adopt the CSS3 standard more strictly, simply using the opacity: 0.5; rule will suffice.

July 18th, 2007 Posted in Articles, CSS, Graphics
The Basics of Semantics

The Basics of Semantics

Semantics is a word which strikes fear into many a designer’s heart, but it need not be a difficult or complicated topic. It concerns meaningful expression, avoiding presentational markup and using appropriate and meaningful tags where possible.

Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:

Title tag

Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.

Headings

It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.

Tables and Forms

By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.

Images

It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.

Seems straight forward… but why?

Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.

Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!

July 16th, 2007 Posted in Accessibility, Articles, CSS, HTML, Web Standards
Subscribe
Membership