This is abit of a quick post but without knowing this I wouldn’t have been able to create my first Wordpress site so successfully.  If you have never used Wordpress before and you are fairly new to CSS then creating a site by this method can be difficult, hopefully this post will help.

Setting up you first Wordpress site can an interesting and challenging experience, however, it may not be as difficult as you first might think.  Here are my tips to creating your first successful Wordpress site.

Setup your site locally first

My advice to anyone new to wordpress would be to setup your site on your own PC and then transfer it to a web server once you are happy with it. Wamp server gives you the ability to setup a virtual web server with full database access and PHP admin support on your own  machine making the development easy and best of all free.

Install Wordpress and start your theme

Once your local server is ready install the latest version of Wordpress to the server (Full installation instructions are available from wordpress.org site), the default theme is fairly boring so you can either download a pre-designed theme or create your own, I would recommend the later with clean semantic themes available from Elliot Jay Stocks with Starkers and Sandox created by Scott Allan Wallick and Andy Skelton which give you an excellent blank canvas to create your own theme from.

Once your site is ready upload it to the web

When you are ready to upload your site to an online space I would recommend the excellent post from webdesignerwall.com on  Exporting and Importing Wordpress, this should be all you need to get your site live.

Without Sandox I wouldn’t have been able to create this site, I hope some of these links will help you in your journey to create your first Wordpress site

‘Graceful degradation’ and ‘progressive enhancement’ are terms that have crept into the web design world and I’ll admit that initially I didn’t know what they were or how they would affect the way I approach a design job, but after reading a few articles online and listening to a recent talk from Elliot Jay Stocks it proved to not just be a buzz phrase but how we as web designer should serve our users, so here is my layman’s take on both these approaches.

Graceful degradation

Graceful degradation is the creation of a web page built ideally for the latest web browsers with all the newest capabilities, then adding elements for less capable or older browsers.  An obvious example of this is the use of alt tags where the text explains what the image represents but doesn’t give as good an experience as the image itself, therefore degrading the experience.

Progressive enhancement

This term seems to have been born purely for web design, progressive enhancement is the building of web pages so that all can access the information equally but those with newer technology (web browsers) may receive a richer experience during the visit. For instance the addition of certain CSS 3 selectors can be added to create effects such as round corners or other effects to a page;  however, these will only be recognised by the newest browsers and will be ignored by any older or less capable versions giving those with newer browser an enhanced experience.

Strangely these both sound very similar but the user experiences will depend on the technology of your users; just take a little time before you start any project to decide how you want the experience to take place.  I also don’t believe that either of these methods quite deal with all potential problems completely but they both carry the same message for me; that message is because a user doesn’t use the web the same way as you or isn’t bang up-to-date with the latest tech you shouldn’t ignore there experience, they are as important as any other user so try your best to cater for all.

As I am no expert on the intricacies of each theory here are a number of much more in-depth articles to help with your understanding of both these concepts.

http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/

http://www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/

http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/

This is short article to briefly explain what sprites are and how you can implement them into you CSS designs.

CSS sprites are the combination of many images into one large image, each individual image is then moved using background position to be visible within each container; this process is extremely usefull in navigation menus where you would want two or three button image states (This method also nicely replaces the need for unnecessary javascript libraries).

What you will gain from using CSS sprites is better performance from you site as it needs to make less HTTP image requests which will ease the load on your pages.

A simple example:

Firstly, create an image 250px wide and 100px deep, within the image area create two button states with slightly different styles so that each state will be clear to the user (As in the example below).  Save the image as a JPEG ready to use in the CSS.

The CSS:

Then place the following CSS into the head of your document;  this will create the display area for the sprite while the background position will display the first button state.

ul.menu { list-style:none; padding:0; margin:0; }

ul.menu li a { list-style:none; display:block; width: 250px; height:50px; background:url(btn_eg.jpg) no-repeat; background-position: 0 0; }

Next we need to add the hover state, this will simply move the image up withing the same container when the mouse is over the button.  To include the hover state simply add the following CSS after the main menu code.

ul.menu li a:hover { background-position: 0 -50px; }

The HTML:

Finally reference your button in the body as you would normally with the following HTML:

<ul class=”menu”>
<li><a href=”http://nasarik.com”></a></li>
</ul>

To see the final example click here

Overview

And you are done, a simple an effective way to start using CSS sprites in your pages. I have added two links to more in-depth articles on the subject of sprites below enjoy.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials