Never stop learning

I can’t stress this enough. I’m actually in the process of writing a post about this is so important so stay tuned.

Comment your code

You WILL forget work you’ve done in the past (I do all the time). Good commenting will help remind you what you did.

Think of the visitor who is trying to find out something. They need to understand what’s going on, not just be impressed.

This is a crucial part of design that people, especially website owners, often overlook. It’s your job as a designer to educate your client/boss on this because they’ll most certainly be looking it through their eyes and not from the point of view of the visitors’.

So this doesn’t mean you have to resort to using a minimalistic design to achieve simplicity in web design. Far from it. Applying simplicity to your websites or designs can be as simple as removing unnecessary elements or by reducing the steps it takes to complete a specific task.

We live in a world where technology is becoming more and more advanced but the way we interact with it is becoming more and more simple. The current example are touch screens and the impending release of tablet computers. When you look at what touch screens are doing for usability, you realise they are removing any intermediate devices (keyboards and mice) and allowing you to interact with the device directly. A great example of making something easier through simplicity.

Less Really is More

The simpler we can make things for web users, the easier it will be for them to achieve the goals we want them to but more importantly that they want to. After all, you’re designing sites for users first and foremost, always.

Too much information can be confusing and off-putting to potential customers as everything is trying to vie for the visitors attention, away from what you want really want them to do. Book a holiday, buy a book or subscribe to your service, simplifying to focus more on these will increase conversion.

Perform user testing to see what features users are not using as much and don’t be afraid to scrap them. If they’re not using a particular feature it may just be in the way, cluttering up the their decision making and preventing them from reaching the final goal. Many companies are insistent on adding new features and more sections and pages to a site on a regular basis believing more choice is always better where in actual fact too much choice can become confusing.

Simplicity Success Stories

There’s no better way to show how simplicity can make a difference than to look at some examples of how simplicity has helped create success. While not all of the following examples are directly related to web design, there are plenty of lessons that can be learnt from their successes. They all have the same thing in common Simplicity in design has helped them achieve greater success.

Apple Products

First the iMac, an all-in-one computer that is mostly screen. In terms of computer design it is very simple as it combines the computer and the monitor which avoids extra cabling in the connection between the two and only require one power cable instead of two.

The iPhone is controlled entirely by the screen. There aren’t any superfluous buttons to bring up a menu, go back or even any buttons for a keyboard, only a single button (of course, there are buttons for silencing and volume control but that’s it) to bring you back to your list of apps. This approach to simplicity is one of the main design decisions why Apple are taking control of the smartphone market.

Nintendo Wii

The common standard in video game controllers before the Wii was a two-handed ergonomic design with numerous buttons. Nintendo saw this ‘complicated’ design as a reason why most people don’t play video games. They released a controller with a familiar design to that of a television remote control which is instantly recognisable. It’s usable with one hand and plays by recognising physical movements. Something that everyone does everyday, making it instantly usable through a simple design. After all, what’s more simple than waving your arms about?

With Nintendo having sold more consoles than their competitors this generation, it is no surprise to see Sony and Microsoft gaining inspiration from their success with simplicity and will be releasing their own motion controlled devices soon.

Twitter

By far the simplest form of social networking on the web. While it hasn’t achieved commercial success yet, it certainly has captured the minds of it’s users and mostly because of how simple it is. At least at the lowest level.

‘Tweets’ consist of a maximum of 140 characters people who follow you see what you post and you see what people you follow are saying and that’s basically it. Simple but effective.

Further Reading

• Three Secrets to Simplicity from Boagworld
• Simplicity in Good Web Design: Advantages & How-to from Noupe

Remember, simplicity is the key.

Carsonified

The first thing you notice with the new design is how adventures they are with the combination of typography, colour and illustration. You know what stands out for me amongst everything? The simplicity. Something that I hope is carried over into 2010 as a ‘trend’. Included is everything that is necessary and nothing more. It’s this simplicity why I think Carsonified is one of the best redesigns of the year.

National Rail

Here in the UK we struggled along with a boring and out of date design for our national rail services so to say a redesign was long overdue is understating it ever so slightly. But here we are in 2010, witness to a great redesign, especially when compared to the previous version, making the list due to the vast improvements it makes achieves.

Form design has been improved substantially from the old design. It has now been made the primary focus of the site and rightly so as it is the most used feature on the site. A smart redesign tip is to realise what your customer wants and give them exactly that.

They’ve also done a good job of simplifying by removing unnecessary content from the homepage. At the time of writing they’ve simplified the page even further due to the heavy load as customers flock to the site to check the latest travel news and how it has been affected by the huge snowfall we’ve had across the whole of the UK, demonstrating that this is something they’ve paid attention to in the design and build.

CNN

CNN redesigned their site towards the end of the year and received a lot of attention. Deservedly so. A bold header with a centred logo is very well laid out and immediately memorable. Much more so than their previous than their dull white header. The grid layout displays content in a way that is easily scannable.

CNN have certainly not forgotten that a redesign isn’t all about the visuals as their story highlights section demonstrates. A great addition that certainly helps people digest information easier in a world where we can get information whenever we want, however we want. Make a note of this and learn that redesigning websites isn’t just bout making everything look nicer but to improve the experience and great ideas like this can go a long way.

The White House

Barack Obama promised change to the American people and they’ve certainly got that even if you just look at the official White House website. To get an idea of how good the redesign of The White House is, take a look at the just how ugly government websites can be.

It has the elegance that one of the biggest countries in the world requires, treats whitespace with respect, has great typography, makes good use of both shadows and gradients and makes excellent use of the footer.

Manchester City Football Club

Recently cited as one of the reason why the English football club made the biggest loss in the history of English football, the redesign of Manchester City’s website is worth every penny. It is another example of keeping things simple to the benefit of the visitors.

Great imagery is the order of the day here with big spaces set out for high quality photos on every single page and really helps communicate the message along with the bold typography.

Redesign of the Year: Engadget

The redesign of Engadget is a great example of taking something that wasn’t necessarily bad and turning it into something truly special. It demonstrates how fast the world of web design moves. Before the redesign they were certainly one of the most successful gadget sites on the internet, if not the most successful. Not resting on their laurels and while on top of their game in the world of content creation, a new version was released that takes their gadget coverage and news to the next level. This is the act of a forward thinking company and I like it.

As the screenshots below show, one of the best aspects of the new design is colour. Probably some of the best use of colour seen all year, used in the first couple of examples to show the most posts in a day and most comments on a topic by using the heat colour model.

With Blue representing cold for lower frequency rising up to red hot for the other end of the scale.

Colour is also used well to clearly present breaking news articles as seen below.

Not only that they use colour on their social sections. Light blue for Twitter and dark blue and yellow for digg. These match the well-known colour schemes for their respective sites but Engadget are able to keep the style consistent with their own brand.

Due to the almost overwhelming amount of content they publish, the top stores section gives readers the opportunity to keep up to speed with the more important articles and news. They achieve this with a layout that almost looks unique every time you see it, therefore catching your attention.

The header section is used to great effect. First off a very noticeable red bar appears at the top of the page whenever they are covering a live event, especially popular when Apple are in town.

Below that is an area used to display what I can only describe as their flagship articles or promotions with a simple tab system to navigate between them all.

All of the above come together to form a cohesive design where not one section is overpowering another, where colour is used to great effect and ultimately evolve a design that many didn’t think needed evolving. Until now.

Your Thoughts

As usual, add your thoughts in the comments and let me know what your favourite redesigns of last year were and why.

These are the redesigns that I’ve focused on and I know that there are many many more that could comfortably make the list but it’s best to not go overkill and instead keep focused on a few examples rather than a boring static list of 50.

Hopefully this new design conveys a sense of higher quality, something that I have been trying to do with my writing after writing for the last couple of months.

Here are some of the improvements and additions that I’ve made to help make you time here, not only more usable but more enjoyable.

Improved Search Pages

Embedded into the title when searching for something is what you’ve searched for as well as the number of articles found. Your search word is highlighted with a different colour to stand out and the background is a different colour to indicated you’ve performed a search to get to this page.

Tags

Now there is more than enough content, you’ll see a list of all the tags used on Inspect Element in the sidebar. It was pointless having this previously as there wasn’t enough content available to make it worthwhile. Similar to the search result pages, the title clearly indicates you’re on a tag page.

Awesome Buttons

Zurb put together some amazing buttons using the power of CSS3 and wrote about it on Smashing Magazine. Inspect Element is using slightly modified versions of these buttons because they really are awesome.

CSS Transitions

Using a few CSS transitions that visitors with the latest versions of Safari, Chrome and Firefox will see. Find out more about CSS transitions in this excellent article on 24ways. I’ll let you discover them for yourself.

Threaded Comments

File this one under ‘finally’ as it was something that I wanted to implement into the old theme for a while but just didn’t get around to.

Only the Beginning

There are still some things left to do that I haven’t had time for including a print style sheet and a mobile version. Also, I’ll be making tweaks as time goes by and depending on feedback.

Opinions Welcome

Ultimately, this redesign is for you, the readers. So please let me know what you think about it. Constructive criticism welcome.

Of course you could just explain your idea to the client but the problem here is they may not understand what you mean or have a hard time visualising it. The next step is to show them something similar on another site but there is still a disconnect from what you want the client to see and what they’re actually seeing.

Build Your Idea as Part of the Design Stage

Why not go ahead and build your idea? After all, the most effective way to display any ideas is to build a fully working version as part of the design. There can be no confusion as to how it will work as it will be up and running for the client to see and interact with for themselves.

When the client can actually use the concept themselves and as long as it works well and is a good idea, they will be much more likely to like it and agree to sign it off as part of the design. They’ll also be much more engaged in the design and confident with your work, creating an increased trust in you, which can only have a positive effect as the project moves forward.

Example

At my workplace, we have recently adopted this approach and finding it immediately effective. Sovereign had a poorly implemented promo area that was barely used by visitors so we decided that the best approach to propose an improvement was to build a fully working concept of what we wanted to show.

If you head over to the Sovereign site, you will see that the concept was agreed and as it was already built by myself, it was implemented into our CMS with minimal effort for our developers.

If you’re like me and work with a separate team of developers who don’t specialise in CSS, you can teach them new techniques or encourage them to use progress enhancement with CSS3 such as border-radius and text-shadow if they don’t already.

No Need to Re-Invent the Wheel

One of the real benefits of this approach is that while it may seem like it will extend the design phase considerably, it really doesn’t have to. Chances are that any idea you have will be similar to something that has already been created and released for free by someone in the excellent design and development community we’re a part of.

In the case of Sovereign, all I needed to do was modify Build Internet!’s superb Interactive Picture tutorial and place it on top of a screenshot of the homepage to complete the illusion of how the final version would look for our customers. Every web designer should know how to code HTML, CSS and even possibly some Javascript, so modifying existing code shouldn’t be a problem and for some even creating something from scratch should also be easy and therefore not take too long to develop.

Any extra time spent is worth it because it is offset in development time. As you’ve already built part of the design, you’ve saved development time as you’ll be able to copy and paste it straight into the build.

Conclusion

The benefits of this approach are clear and while it may take a little extra time to develop a working version of an something as part of the design phase it is worth it for the increased trust in the relationship between you as the web designer and your client. Whether you’re developing your design yourself or passing it onto a development team, the completed development of the concept can just be slotted right into place.

Taking this to the Next Level

Andy Clarke proposes that we skip the design stage in Photoshop completely and design directly in the browser using HTML and CSS in his Designing With CSS tutorial DVD. I haven’t seen it yet but the core idea is certainly something I am keen to explore in the future.

Try this in your next project and let me know how you get on. If you already use this approach then let everyone know how it works for you by leaving us a comment.

The biggest area where web application has to encourage new users to sign up is on the homepage so we’re going to take a look at what makes a great web app homepage design. Don’t forget that many of these observations can be easily applied to other aspects of web design, not just for web application homepages.

Login Areas

The nature of web applications, being accessible from any browser, means that users can login in from whatever computer they want and from anywhere in the world so login forms are important to existing users.

On Mobile Me’s homepage (below), emphasis is placed on a login area for existing users with text below encouraging users to sign up for a free trial or sign up for more.

Onehub places existing users’ login form in the header of the page, therefore not being too distracting to new visitors but also give an easy accessible way of logging in for anyone with an account.

The login form on to-do app Teux Deux’s homepage can only be accessed by hovering over the log in text at the top of the page. This isn’t immediately noticeable to existing users but when used a few times they will likely get used to the behaviour.

Observation: Most web apps do away with any kind of login form on their homepages. The only logical explanation for this is it can clutter the page for when trying to sell the service to new customers.

Price Presentation

Fever makes the price very noticeable by the use of a red circle and placing it in amongst the intro text.

Pulse use a tiered pricing structure but also state on their homepage what their cheapest option, although they only do so through the use of a plain text and a plain text link.

A similar technique is used on the home of Squarespace. The main difference here is that it is contained right below the main text located in the large header area.

Campaign Monitor dedicate a relatively considerable area to pricing describing pricing as a selling point of their service.

Observation: Not all web apps include pricing on their homepage. Most benefit from a tiered pricing structure and tend to display it on a separate, dedicated page.

Features

This is the area that sells the product or service. It’s important in letting the user know what the app actually does and a key message to get across to help a user decide whether they want to try it or not.

Mobile Me continues their minimalistic approach by displaying a simple, short list aided by simple icons. By keeping it succinct and to the point the user doesn’t have to read paragraphs of text. On the other hand however, this information, or lack of, may be too little for users to make a decision to try the app out.

Ballpark divides it’s list of features into a grid layout and combines the text with icons to add an extra visual flair, making it easier to read as it breaks the points out neatly and clearly.

Screenshots are used along with descriptions on the homepage of Invoice Machine. Doing so gives potential customers strong indications of not only what the app looks like but also how it behaves before they try it for themselves.

Screenshots

Screenshots are the focus of many web application homepages as they give anyone interesting in signing up to the product and immediate vision of how the app looks and an indication of how it is used.

Much like Invoice Machine, Task.fm mixes its feature list with a screenshot. They annotate a screenshot to promote the key features of their web application.

Peashoot displays a big screenshot in the header section of the homepage. The benefit to this is the visitor has a clear idea of what to expect of the app before they have created an account and begun using it. The transparency this offers to potential users is appealing because they’re not signing up blind, therefore increasing the chances that they will indeed create an account.

Popular image gathering tool Ember, displays two screenshots in the header area with the second one appearing below the first to display a different section of the application.

Observation: Despite having the lower market share, most web apps seem to display screenshots as being used on a browser on a Mac OS X. In fact, not a single example was found where screenshots were being presented from the point of view of a Windows user, which has a considerably larger market share than Mac OS X. Some choose to display screenshots without the aid of the chrome of a browser at all.

Ultimately, the familiarity of seeing the app displayed within something that is clearly recognisable as a browser (title, back and forward, buttons, URL area and search bar) allows the viewer to relate to the app more than if it was on it’s own.

Buttons

Web application homepages are a great example of why well designed buttons are so important in web design. Buttons are used to guide new customers to the sign up page.

Upload Robots keeps the button size consistence but changing the importance with the use of colour.

Through the main button on Squarespace’s homepage, it’s clear that you can try the service for free. They also give an option for taking a tour with the use of a secondary button. It’s obvious from the wording, size and colour that they are wanting users to signup.

Harvest

Observation: Wording on buttons can have a big affect on the number of signups to a web application. 37 signals have performed A/B tests to show the importance of wording and how it can improve conversion on the pricing page of their Highrise pricing page.

Here are seven of the most common mistakes made in web design and why you need to avoid them at all costs in order to make sure you are on the right track to producing the best work you possibly can.

1. Unnecessary Use of Flash

First of all, Flash is great when used well. For example, the current state and popularity of online video streaming with sites like YouTube wouldn’t exist in the way it does without it.

The problem is that beyond this the disadvantages of using Flash far far outweighs the benefits in almost all cases. Being a browser plugin, it has a reputation of slowing down computers by using excessive CPU. Flash 10.1 however will support GPU usage to take the strain off the CPU. Which is nice.

Sometimes you’ll see Flash being used for navigation when it just isn’t necessary at all. Remember, by doing this you are making it less accessible to use. Avoid this like the plague as there are many great options using js libraries such as jQuery.

Jacob Nielsen’s article from way back in 2000, titled Flash: 99% Bad, still has many relevant points as to why Flash is unnecessary most of the time, especially the section titled ‘Breaks Web Fundamentals‘.

2. Poor Search Results

When using the search function of a website it is safe to assume that someone is actually looking for something and if it exists, poor search results may well prevent them from finding what they want.

One way of improving this is to make use of the power of the most popular search engine with the use of Google’s Custom Search Engine. With this solution, your results will be formatted in the same familiar way that they are on Google’s own pages so users will know what to expect.

3. Bad Images

There are two types of poor images when it comes to web design. The first is using images which are uninteresting or irrelevant especially with the internet being such a visual medium. Good images can convey so much meaning and get a message across very effectively. As the well known phrase goes, ‘a picture is worth a thousand words’ which is especially true when it comes to web design.

The second is quality of images which relates to heavy compression, blurry images, resized images and images that are stretched or squashed altering their aspect ratio. Any of the above is unacceptable in this day and age.

4. Irrelevant URL Structure

It is common for content management systems by default to use a dynamic URL usually consisting of seemingly random characters and numbers such as www.exampleurl.com/?p=52 Do you have a clue what the content of that page is? Certainly not from the URL and neither will search engines. Even if a potential visitor does see this in a result on a search engine then they’ll be less likely to follow through due it’s cryptic appearance.

Beyond that is the use of short URLs commonly seen on Twitter. Popular Twitter clients such as Tweetie are able to show the actual URL before sending you off there. When people use that option, it is generally to see what the URL is that they will be taken to and by containing a description of the page in the URL, it is possible to have a good idea of where their click is taking them.

5. Lack of a Clear Message

By not having a clear message on your site or a site you’ve designed, you run the risk of confusing any potential new customers or visitors. The longer they take trying to work out what it is the site is actually for, the more chance they will leave and try and find what they are looking for elsewhere.

A simple way of helping resolve this is to have a simple tagline, no more that 8-10 words long, located in the header. That way if someone lands on a page that isn’t the homepage, they can see the message and be clear of what the site is about without heading to the homepage or the about page.

6. Not Understanding What the Client Needs

The most important thing to get right before you get started is to make sure that you understand your client and what service or product they offer. This doesn’t only apply to freelancers or web designers who work in a design agency where they deal with multiple different clients but also those who work in-house. Think of your employers as your client as they, much like a traditional client, pay your for your service.

Making sure you have an understanding of what the client needs will reduce frustrations further down the road. Most of the time there will be changes out of you’re control that can’t be avoided but by getting your head around what is required early on will reduce any confusion as much as you possibly can.

7. Ignoring Important Browsers

The average web user doesn’t know that there are differences in the way that browsers render pages, they only see the internet as one. If they come across a site that is broken in their browser then they aren’t going to know to switch to another browser to see if it works there, they’ll just move on to another site. Most users don’t even know what a browser is anyway.

The act of discovery is part of human nature. When you go on holiday, you’re going somewhere not only to enjoy yourself but to discover somewhere new. The same thinking can be applied to web design as when someone is visiting a new site, they are looking to discover something but it is our job to make their discovery as fun and memorable as possible.

Discovery

The joy of discovery in web design is a rare and difficult thing to achieve but it doesn’t have to be. It can be as simple as giving people the option of performing a task in a slightly different way. If visitors notice there is an alternative way of accessing a particular feature or navigating a site for example, they may prefer it to the standard method. On the other hand, if users don’t notice the alternative then they are none the wiser and will still be able to use the primary method which has been designed and developed first and foremost with usability in mind.

It gives the user choice without them realising it and when they do notice it, they will feel as though they’ve discovered it themselves. Almost as though they’ve found a hidden secret no one else knows about or at least they haven’t been told about.

Take for example a recent design that I have created for a company called Flexible Flights. We’ve used a filter on the left hand side where you can narrow down your results by, type of flight (direct or indirect), time of day, flight and airline among others but you can also filter by type of flight or airline from the top of the search results itself. This hasn’t been explicitly explained to the customer (the filter is titled ‘Filter Your Search’) but because it retains the link styling, it will be apparent to people that it is a link, implying that they are clickable and a way of filtering.

Okay, this isn’t making users feel as though they’ve discovered something big but discovery in web design doesn’t have to be. Subtlety can play a large role in discovery too as even if the visitor doesn’t feel as though they have discovered anything subconciously giving them a feeling of greater control. Now that doesn’t mean that you should be arranging multiple ways of doing everything possible on your site, just focus on what is key to what your site wants to achieve.

Make People Smile

Sometimes it’s only little things that make people smile. Take a step back, or rather, take a step forward away from the big picture to try and grasp small entities which can make a difference. The best example of this is when scrolling down on an article on Tim Van Damme’s Max Voltar blog to reveal the logo hidden underneath the header. When you first notice it, you immediately smile and you may not even notice it upon your first visit so when you do notice it, you almost feel as though you’ve discovered it. Even the act of it appearing from beneath the header is a form of discovery of itself.

The opportunity for you is that most websites aren’t necessarily designed to make people smile but if you can then you will almost certainly give them a reason to remember a site increasing the chance of them returning in the future. After all, if you can make someone smile when using a website then you’re almost certainly going above and beyond competing sites.

The first one we’re looking at is one page website designs. By far the most common use of single page websites are portfolios but they can be suitable to just about any business type. However, there are a few things to take note of before going down the single page route.

Navigation

Of course navigating a single page website is going to be different than any other site as there aren’t any links to take you to different pages but navigation is still a key ingredient of a one page design, although handled differently.

Navigation as Part of the Content

Clicking on the navigation in Polar Gold reveals the content for that section directly below. As such it is a great way of keeping the site compact and easy to use.

Navigation Secondary to Content

Bullet use a strong visual indicator of a line flowing from one section to another to guide users around their site but also uses navigation fixed at the bottom of the page as a secondary way of getting around.

Horizontal Navigation

A relatively new trend is to layout a one page design horizontally rater than vertically. Creative techniques of this have been put to use as on the recap of 2009′s Front-end Design Conference while also giving you an easy way to navigate from one section to the next. This is vital as while most mice these days support vertical scrolling, relatively few can scroll horizontally. Without any form of navigation, the user of a horizontal site will have a frustrating time using the scroll bar at the bottom of their browser.

No Navigation?

Some sites do away with navigation entirely such as James Lai’s portfolio who uses thumbnails of his work that load into a single large area when clicked. Doing so places the visitor’s attention purely on the content allowing it to become the focus of the site. This approach depends on how much content the site requires as ultiple sections would require some form of navigation for usability.

Creativity

Single page sites don’t have to conform to a set template and have given designers the opportunity to be more creative with layouts such as Tomáš Pojeta‘s site. Here he creates a scene consisting of one section being in the sky, another section at sea level and the final area underwater leading down towards the seabed.

Eric Johansson’s personal site sees and illustrated version of himself travelling from left to right on a scooter as you scroll along the page.

We Bleed Design gets very creative with the use of colour and transparent PNGs. As you travel down the page, a fixed image of coloured lines get hidden and revealed behind images with various transparent elements.

Content

Of course, content is a key ingredient of any site but it is slightly different for a one page design in the way it is used and displayed. It is better to keep it short and too the point, even more so than usual. After all, a one page site is a cut down version of a regular site.

Tap Tap Tap dynamically load content for each of their iPhone apps into a single, defined space on their one page site with the use of AJAX much like the example of James Lai above.

The portfolio of Fran Book also uses AJAX to load content in dynamically but with the familiar method of using tabs.

As Javascript is synonymous with web development, some clever developers have created some extremely helpful bookmarklets that can improve your day to day work. Here are ten of the best available.

1. Firebug Lite

All web designers and developers should be familiar with Firebug (if for some reason you’re not then go now) and Firebug Lite is a striped down version that works on all browsers. Especially useful for fixing IE issues.

Interesting fact: Firebug inspired the name for Inspect Element.

Use on this page.

2. MRI

Enter the name of any selector into the text box and click the MRI button and this bookmarklet will highlight all of those selectors on the page.

Use on this page.

3. Design

Use on this page

4. Resize Viewport

Very simple, click on the following links to resize your browser window to these common resolutions. Only works in Firefox but that’s most of you who read Inspect Element.

1024 x 768 | 1280 x 1024 | 1440 x 900 | 1680 x 1050

5. ReCSS

One of the most useful bookmarklets for development is ReCSS. It reloads the CSS file independent of the HTML which speeds up work considerably when you’re only writing CSS code.

Use on this page

6. Save to Delicious

Delicious is one of, if not the most, popular way of saving articles especially in the web design and development community. This bookmarlet provides a quick way to save the current page to Delicious. Give it a go and save this article to Delicious!

Bookmark this page on Delicious

7. Edit Current Website

Sure, you can preview edits of HTML text using Firebug or WebKit’s Web Inspector but this bookmarklet turns the whole page into a WYSIWYG editor. Of course these changes aren’t permanent and are only local to your machine but gives you a good idea of what changing content does to the page.

Edit this page!

8. XRAY

Similar to Firebug Lite in that you can inspect elements on a page but much clearer to see what you have selected. Also seems to be quicker.

Use on this page.

9. Layout Grid Bookmarklet

Having trouble lining up elements on a page? Andy Budd’s layout grid bookmarklet will come in handy as it overlays a transparent image of a grid, complete with pixel rulers along the X and Y axis.

Use on this page.

10. Favelet Suite

The Favelet Suite bookmarklet is the Swiss Army knife of the web design bookmarklet world. It includes the following features:

• Color List
• Document Tree Chart
• HTML Attribute Viewer
• HTTP Header Viewer
• Hidden Field Modifier
• Javascript Object Tree
• MODIv2
• Mouseover DOM Inspector
• Object Dimensions
• Page Info
• Remove Children
• Resize Fonts
• Ruler
• Show Source
• Style Sheet Tweak
• Style Sheet Viewer

Use it on this page.