Theme and Layout

Until recently I’ve kept the default theme for Firefox, thinking that the only available themes were from the Mozilla site. Then I discovered www.getpersonas.com which has a beautiful range of much more exciting and better looking themes. At the moment I’m using a nice and neutral theme called ‘LE – about that walk‘. But I’m sure it won’t be long before I create my own. I’ll keep you posted!

Click to enlarge

Add-ons

I currently have 34 add-ons installed, many of which are helpful only to web developers and designers. So instead of exhaustively explaining each one, I’m going to talk about just the ones that other people might find genuinely useful or helpful in some way.

All in one Gestures

All-In-One Gestures is a mouse gestures add-on that was built to increase your productivity. It’s very simple to use. You can assign functions to just about any mouse gesture. So, for example, you can right click and flick the mouse to the left and it would go back a page. Right click and flick it to the right and it would go forward. Right click and flick it up and down and it will reload the page. Sounds pointless, but once you’ve used it for a little while you’ll come to rely on it. It feels very natural to use and requires that much less concentration than aiming for a button.

Options for All-in-One Mouse Gestures

Download it here

Delicious Bookmarks

This is a nifty little add-on that allows you to save and bookmark websites directly to your Delicio.us account without having to visit the Delicious website. It also lets you open up a sidebar from which you can manage all of your bookmarks.

Icon shortcuts to Delicious account

Download it here

Drag and Drop.io

Drop.io if a free online file hosting service that allows people to easily store and share files. It is an excellent service that allows you up to 100MB of free storage and unlimited accounts. With this add-on, you can drag files from your desktop onto the little Drop.io icon on your browser and it will automatically upload those files to your specified account. Beautiful.

Drag files to Dropio shortcut for automatic upload

Download it here

Echofon

Those of you that are regular Twitterers will know that there are countless Twitter services available to you. I use Echofon as I can quickly and easily post and read tweets and messages from an icon on my browser without needing to open up Twitter itself.

Access Twitter from a small dialogue box

Download it here

Facebook Toolbar

Facebook Toolbar is an add-on that allows you to post status updates from a little input form on your browser. Again, there is no need to visit the Facebook site. A sneaky little add-on for those of you who would do well not to be seen throwing sheep at people while at work ;)

Post Facebook updates quickly and easily without visiting the website

Download it here

Foxtab

This is a fantastic little add-on for those of you who regularly find yourself losing control of how many tabs you have open at any given time. Click the icon or both mouse buttons and a screen will open up showing you thumbnails of each tab you have open, offering a more natural way to view all of the sites you’re browsing. You can even customise the look and functionality of the splash screen.

See all your open webpages in one go

Download it here

Image Zoom

Image zoom is a simple but useful add-on that gives you options to enlarge images when you right click on them. You can zoom in and out at will. Especially useful for graphic designers interested in the smaller details, but generally nice to have for all.

Magnify any image

Download it here

Instaright

Instapaper is an online news bookmarking service. It lets you save articles from around the web in a simplified format for offline reading. Which is great if, for example, you spend a lot of time travelling and want something to read but have no internet connection. Instaright gives you the option to save articles directly to your Instapaper account with a single click.

Send articles directly to Instapaper for offline reading

Download it here

Screengrab

A useful add-on for anyone. It’s thoroughly annoying when you want to take a screenshot of a website you’re looking at but only get the top half or only the bit that shows on screen, while the rest is cut off. Screengrab lets you take a snapshot of the entire page, a specific section or just the current view and copy or save it to your computer. No more multiple screenshots and stitching them together. Very helpful.

Easily capture entire webpage screenshots

Download it here

Search Preview

One area that the Bing search engine beats Google (for me) is the search preview aspect. Bing gives you a little thumbnail snapshot of each website whenever you perform a search. This add-on gives Google the same ability. I’ve always preferred Google as my search engine of choice, so this is a bit of a find for me personally.

See a thumbnail of each website before you visit it

Download it here

Shorten URL

Particularly useful if you ever share links on Twitter and find you’ve run out of characters. Shorten URL lets you shorten any link using a number of URL shortening services. Just choose your service and you can shorten any link within 2 clicks.

Shorten any URL on right-click

Download it here

Tab Mix Plus

Tab Mix Plus is one of my favourite add-ons for Firefox. It gives you absolute and comprehensive control over your browsing ‘sessions’. From remembering all your tabs, to customising colours of viewed and non-viewed tabs, to setting mouse click actions to just about anything else you can think of regarding tabs and browsing.

Take control of your tabs and browsing sessions

Download it here

Webmail Notifier

I used to keep a Hotmail tab and a Gmail tab open just so I could keep an eye on what’s coming in over email. This add-on replaces both of those tabs with a little icon that flashes up a little message when you get a new email. Perfectly useful and unobtrusive.

Be instantly notified when you receive webmail

Download it here

Word count Plus

I already write too much in my blog posts so this little add-on will help me keep track of how many words I’ve written. Just highlight any text on a page and click the icon and it will tell you how many words you’ve selected. Hover over the icon and it will tell you how many characters there are. Simple but helpful.

Get instant word and character counts from the corner of your browser

Download it here

Conclusion

I hope this series of posts has maybe expanded your view on ways you can use and interact with just about anything online. Just be careful you don’t go plugin crazy and add everything, as it will eventually start to slow down your browser. This is a list of just some of my current add-ons, but there are literally thousands to choose from. Whatever your interests or hobbies, I advise you to check them out. You might just find something you didn’t realise you couldn’t live without.

Check out the other posts from this series:
The Power of the Browser – Choose Your Weapon (Part 1 of 3)
The power of the Browser – Make it Yours (Part 2 of 3)

Themes

From experience, this is the thing most people are interested in to begin with.

How to Install a Theme in Firefox

There are two places you can choose themes from. The first is the Firefox Add-Ons site and the second is the Firefox Personas site.

To Install a Theme From the Firefox Add-Ons Site

• First off, visit the Firefox Add-Ons site
• Click on the image of your desired theme
• When the page loads, click the button that says ‘Add to Firefox’
• When prompted, accept the software installation
• A Firefox dialogue box will open up after it has finished downloading. Click the button that says restart.
• Your browser will open up, sporting the new theme that you just installed. Easy :)

If you want to switch back to another theme you have installed, go to Tools > Add-Ons and click the Themes tab. Select ‘Use Theme’ for the theme you want and hit restart again.

To Install a Theme From the Firefox Personas Site

• First off, visit the Personas site
• The cool thing about this site is that once you install their plugin, you can hover over any of the themes and it will automatically change your browser’s theme on the fly, so you can see what it would look like without needing to restart
• So click the button that says ‘Get Personas For Firefox’ and when prompted accept the installation
• Click the button that says Restart Firefox
• Your browser will open up with the theme you selected and you can also hover over any other theme in the gallery to see what it would look like and click ‘Wear It’ to install it.

Optionally Customise the Layout of Your Buttons and Toolbars

So now your browser looks just the way you want, save for a few buttons that you’d like to have in different positions. You can alter this to some degree too. To do so, right click on the toolbar and select ‘Customise’. A dialogue box will open up and you’ll be able to drag your buttons around your tooolbar until everything is where you want it to be.

How to Install a Theme in Google Chrome

• First off, visit the Chrome Themes Gallery
• Choose the theme you’d like and hit Apply Theme
• The theme will be applied instantly without a need to restart

If you want to revert to the default theme, go to your ‘Settings’ icon, then ‘Options’ and then the tab named Personal Stuff.

Add-ons

Add-ons can improve your browser in just about any way imaginable. I use Firefox as my main browser because it has by far the widest range of addons and plugins available and is a very secure browser. But Chrome has a decent set of extensions and more are appearing all the time, while extensions are even being developed for IE8 now.

How to Install an Add-on in Firefox

• First, go to the Firefox Add-Ons site and pick on of the hundreds of helpful plugins available
• Click on ‘Add to Firefox’
• When prompted, accept the software installation
• Click Restart browser and your addon will have been installed

To see a list of all installed add-ons at any time, go to Tools > Add-Ons and click the ‘Extensions’ tab. While add-ons are very helpful, try not to get carried away installing everything under the sun as they will eventually slow down your browser!

How to Install an Add-on in Chrome

• First, visit the Chrome Extensions site
• Choose your extension and select ‘Install’
• A dialogue box will appear telling you what info it needs access to. If you trust it, select ‘Install’
• The addon will be pinned to your toolbar

To manage your addons, go to your Settings icon and select ‘Extensions’.

How to Install an Add-on in Internet Explorer 8

• First, go to the Internet Explorer Addons site and pick and choose one of the addons
• Click on ‘Add to Internet Explorer’
• When prompted, click on ‘Add’
• The addon should now be installed, though, rather unhelpfully, IE won’t give you a success message

You can view all of your IE8 Add-Ons by going to Tools > Manage Add-Ons

So, you can see how quick and easy it is to install an extension or add-on to whatever modern browser you’re using to add a bit more power or customisation and makes things a little more personal.

In the next post I’ll be writing a brief breakdown of the plugins I use and why they help me during every day tasks.

Check out the other posts from this series:
The Power of the Browser – Choose Your Weapon (Part 1 of 3)
The Power of the Browser – My Browser Breakdown (Part 3 of 3)

So what is a browser?

For most of you, it’s likely to be that little blue ‘e’ you click on your desktop that magically brings the internet to your fingertips. Right now, there are 5 major browsers that are used by around 99% of the UK population online (Source: StatCounter Global Stats). Which prompts me to ask the question: how many of you know what browser you’re using right now? My guess is that about 50% of you are aware of whether you’re using Internet Explorer, Firefox, Chrome, Safari, Opera or another. For those of you that are aware, how many of you know what version of that browser you are using? Probably half again. Maybe less.

Click the image to view the chart from StatCounter

Just tell me which is the best one so I can move on please

I will. Well, I’ll give you my opinion. But before the bias, it’s a good idea to get your head around some of the vital differences across various browsers and why some are limiting what you can do on the web, while others are opening up opportunities to do things which may just blow your mind. At which point you’ll be able to walk around with the same sense of smugness as me ;)

I’m sure some of you are thinking “I’m not a web designer so why is this even important?”. And it’s a good question. I understand why you might think that. But perhaps the best way to answer it is to talk about the benefits of knowing your browser better.

Performance – You Have to Have it

Each browser has different strengths and weaknesses. I won’t go in to the details which you can see in the following extremely helpful browser performance graphic. But in a nutshell, Chrome is the fastest overall when it comes to displaying websites, blowing away the competition. In second place is Firefox, closely followed by Safari, then Opera, and lagging way back in fifth is the world’s most popular browser – Internet Explorer. For a lot of you, that alone will mean that you choose Chrome as your go-to browser. For others of you, it may prompt a lightbulb moment that maybe IE isn’t necessarily your best bet, even though it comes bundled with Windows on most new PCs (until recently).

Click the image to view the chart from Six Revisions

As you might expect, all these figures show is how quickly they display websites and load various elements of a page such as images, videos, Javascript animations, Flash etc. Although this is very important, as people want more and more instantaneous access, there are other things to consider when choosing your browser.

Security – Do Not Compromise

This section, unfortunately, needs to be dominated by one browser vendor in particular. Microsoft’s Internet Explorer has been well documented in the last few years for having major security issues in versions 6, 7 and even their most recent version – 8. In fact, these security issues have become so prominent and severe that both the German and French governments have publicly advised against using the browser. Ouch.

Click the image to view the story

It seems hackers target IE browsers more than any other partly due to its global dominance and partly because of its closed source nature. What I mean by ‘closed source’ is that IE browsers don’t allow Joe Bloggs to look at how it is put together. Only Joe Microsoft can do that. While you might think that this level of secrecy should make it more secure than an open source browser such as Google Chrome or Mozilla Firefox, the opposite is actually true. How can that be, I hear you ask. Well, open source is, as the name suggests, open. Which means that anybody can look into the code behind the browser and spot vulnerabilities or security flaws and offer suggested fixes to the makers of the browser. Not just the guys at Microsoft. It’s a self-improvement cycle and it’s aided by the thousands of developers around the world who are allowed to contribute to it.

The very nature of open source software and the community behind it is what drives true progression in this extremely competitive environment. This is why you’ll find very few web designers and developers who use any version of Internet Explorer as their primary browser.

Why, then, does IE still manage to dominate the browser market today. The answer, quite simply, is that it is bundled with every version of Windows. At least it was until February this year. But that’s an entirely new topic.

Graphics – Display Beautiful Things Beautifully

Different browsers have different capabilities when it comes to displaying images, graphics, text and various other elements. Just like all TVs are different, so are browsers. These interesting benchmark tests – Text Rendering and Image Rendering (Source: graphicrating) show that this is an area where Internet Explorer finally does something right, topping the table ahead of the other 4 main browsers in text rendering and coming in second for image rendering. With images, Firefox surprisingly lags behind in last place. Although, since these tests were carried out, Firefox has made significant improvements to it’s graphics engine. Another example of community-lead development. Chrome features well in the images test but not so well with text, while Opera and Safari come in no higher than third in either test.

Click the image to visit the graphicrating website

Supporting Web Standards – Build it Right

This may sound like a really boring subject, but when you see it in action, you’ll understand why it’s important, so bear with me.

Many people look at websites and believe they are not dissimilar to printed works. Draw a blue box, stick it there. Write out menu links, stick ‘em over there. And everything will stay where it is. If it were that easy, I would do it for free :)

Unfortunately, it isn’t that easy. The way a website displays relies on various different coding languages used by the web designer. The language that controls the visual layout of all modern websites is called CSS (cascading stylesheets). Now, the problem with this is that all browsers interpret CSS slightly differently.

As a visual example of what that means to you as the end-user, let’s have a look at some screenshots of this website displayed in Internet Explorer 6 – which has notoriously poor support for web standards.

Extra white-space is thrown in, things are mis-aligned and the main body background image has disappeared altogether

IE6 doesn't support transparency in images and instead puts an ugly grey box around them. More white-space is thrown in and some floated elements drop below eachother

If you’re viewing this site in recent versions (at time of writing) of Firefox, Opera, Safari or Chrome, it should look pretty much as intended.

This inconsistency across browsers means designers often need to spend many hours correcting bugs and issues in older, poorer browsers (quite possibly for a very small user base), even though it may display perfectly well in modern ones. This usually means writing a general stylesheet, then another one for IE6 and sometimes even one more more for IE7, because each one displays websites differently. But with so many people still flogging the dead horse of IE6, can you really afford not to design for it?

The end result, as you might expect, is that the designer needs to offset the extra hours against the client by charging more. It’s a necessary evil and will never be completely eradicated unless it can be guaranteed that all browsers will behave consistently. But with the rate at which new technology and devices are coming into the market, it looks as though there will forever be this necessity for fixing things across different platforms.

Incidentally, WHD renders reasonably well in IE6 – I just turned off the IE6 stylesheet for the purpose of this post :)

Your turn to take part. Go to this website and wait a few seconds until the number stops increasing. That number is the generic score given to your browser for its adherence to web standards. The Acid3 test is:-

…the third in a series of test pages written to help browser vendors ensure proper support for web standards in their products.

(Source: The Web Standards Project)

Given that the Acid Test is the standard to which many developers and designers build websites to, it would help if all browsers were made to support the same high standards. Unfortunately, no matter how well built a website is, some browsers such as IE6 have such poor support for web standards, that until there is a major shift in the amount of people using it, the web will never fulfill its potential. Unsurprisingly, there are plenty of designers, developers, companies and organisations taking action and trying to hasten the demise of IE6. Here are just a handful -

• Bring Down IE6
• IE6 No More
• IE6 Funeral
• End 6
• Hey IT
• Stop Living in the Past

Of course, not everybody is able to upgrade their browser. Some companies won’t allow you to for fear of breaking their outdated systems that rely on it. Which is fair enough. But you have to ask the question of whether it can really be safe/productive running systems on a browser with such well-documented security and performance issues and whether the benefits of running a more modern and powerful browser outweigh the cost of upgrading aged systems.

There is so much more that can be said about the merits and drawbacks of designing for antiquated browsers. But to keeps things light, we’ll leave those for another day.

Customisation – Make it Yours

If I lost your attention in the previous section, this is where I’m hoping to get it back. When I talk to people about browsers (yes, I do talk to people about browsers), this is normally when they actually start to listen!

Providing you’re using a browser that supports add-ons and extensions you can do just about anything you can think of with it. Currently, the most highly customisable browsers are Firefox first and Chrome second. You can give your browser a theme, install countless helpful tools, edit the layout of your buttons, block pop-ups and ads and much much more.

Want to publish Facebook updates without having to visit the Facebook site? You can do that from a toolbar. Want to keep track of Twitter feeds without visiting the Twitter site? You can do that with an add-on. Translate entire websites into any language? Instant screenshots? Export saved passwords? Sync bookmarks across computers? Instant messenger in the browser? Customise Google’s appearance? Share news within 2 clicks? Email notifier? Whatever you can think of, somebody has built an add-on just for that. Not to mention the hundreds of themes you can install to give your browser a completely personalised look and feel.

Click the image to view the different themes available for Firefox

In the next post I’ll go into a little more detail about ways you can customise and improve your browser through the use of add-ons and plugins.

Check out the other posts from this series:
The Power of the Browser – Make it Yours (Part 2 of 3)
The Power of the Browser – My Browser Breakdown (Part 3 of 3)