Digital Pacific Company Blog

Useful tips on web design, hosting, marketing and more…

Posts Tagged ‘Firefox’

Five Fantastic Add-ons for Firefox

Wednesday, January 20th, 2010

Five Fantastic Add ons for Firefox Firefox is definitely Digital Pacific’s web browser of choice, and we gladly recommend it to any of our customers. Like Internet Explorer, Firefox retrieves website files and then renders them together to present the website that you view on the screen before you. Mozilla Firefox works in true open source fashion by allowing users to customise its look, feel and functionality with the addition of numerous add-ons. These add-ons give the web browser the ability to do everything from social bookmarking your favourite blog posts to helping you edit a website’s code.

Here are five of our favourite Firfox Add-ons

1. Firebug

Five Fantastic Add ons for Firefox
Firebug allows you to view, browse and edit a preview version of a website’s code as you look at it in your browser. Better yet, you get to do it without having to open up any other programs! Just click on the tiny little Firebug icon in the bottom-right corner of Firefox and a window will open up directly in your current browser with access to the code. This little add-on also allows you to try out different options on a live website without affecting the live code.

2. ColorfulTabs

Five Fantastic Add ons for Firefox
ColorfulTabs does just what the name says; it makes each of your open website tabs a different colour. This can not only make your web browser prettier, but it can also help you with tab organisation and quick tab identification. ColorfulTabs is one of the simplest Firefox add-ons, but it is definitely one of the most popular.

3. Fire Gestures

Five Fantastic Add ons for Firefox
Fire Gestures provides the ability to take its five different mouse gestures and link them to various commands. With this awesome add-on, you can make opening different browser tabs, or click the forward and back buttons, a breeze. The add-on’s homepage provides an entire list of mapping options to apply to each gesture including enlarging and reducing an image’s size, accessing Firefox options and translating a page’s language.

4. YSlow

Five Fantastic Add ons for Firefox
Yslow is especially great for web developers, but anyone interested in web design can benefit by using this Firefox add-on. YSlow analyses a website’s performance, and the criteria with which it uses to determine this level can be customised. Besides that, it will provide a list of suggestions that can be used to make it better. This add-on works in conjunction with Firebug, so of course, that add-on should be installed as well in order for YSlow to function.

5. Delicious Bookmarks

Five Fantastic Add ons for FirefoxDelicious Bookmarks is a Firefox add-on that helps you to quickly and easily bookmark your favourite websites and blogs. With the integration into the toolbar, you can even access and search your bookmarks, view and search your tags and share via the Internet. For those concerned about consistency between the web version and the toolbar version, you will be happy to know there is a synchronise feature to keep the both the same.

Last time I checked, there were a couple thousand Firefox add-ons to choose from in their add-on repository, and these are just five! So, even if there wasn’t anything in this entry that you would enjoy integrating with Firefox, it would still be worthwhile searching the add-on site for a desired feature.

As always, we want to know which add-ons you would recommend, and why. Leave us a comment below to add to this list.

If you would like to learn more about Internet Explorer and Firefox – the two most popular web browsers – please read more in Browser Compatibility.

Five Fantastic Add ons for Firefox Five Fantastic Add ons for Firefox Five Fantastic Add ons for Firefox Five Fantastic Add ons for Firefox Five Fantastic Add ons for Firefox Five Fantastic Add ons for Firefox Five Fantastic Add ons for Firefox Five Fantastic Add ons for Firefox Five Fantastic Add ons for Firefox

Awesome Tools for Coding Websites

Thursday, November 5th, 2009

In a recent blog post, “How to Build a Website,” we explain that one of the methods for creating a website on your own is to learn how to code. This method can be a time consuming process for the beginner, but it can provide the best results because of the customisability. Since we only briefly talked about this method in the previous post, we would like to step out now and introduce some of the awesome tools that can actually be used to put your personally coded website into action.

DreamweaverDreamweaver is a dynamic web designing and developing tool provided by Adobe. It is made to run in both Windows and Mac operating systems, and it also incorporates the ability to work seamlessly with CSS, JavaScript, PHP and other various web scripts. It’s live view and edit mode also makes it a tool that even the most technology challenged individuals can use to create web pages.

Notepad++Notepad++ is a completely free tool that can be used to code a website. The original notepad that is available on your computer can also be used (surprise, surprise!), but Notepad++ provides plenty of added features to make the coding process easier to manage. It supports a slew of coding languages and even records macros that can be saved and reused later.

FirebugFirebug is a free Mozilla Firefox add-on that lets you browse, edit, and tweak your web code while looking at the page live in your Firefox browser. Even better is the fact that you can open a page and change the code in Firebug to see design variations in play without them affecting your live site. The editor can be opened at the bottom of your browser at any time, and it does so without cluttering up your workspace. Firebug can be used by CSS and HTML authors, JavaScript designers and site engineers.

SeaMonkeySeaMonkey is claimed to be an “all-in-one internet application suite”, and upon inspection, you can quickly see why. SeaMonkey contains a web browser, email client, feed reader, IRC chat, and an HTML editor, and best of all, it’s free! SeaMonkey was created by Mozilla, who is also the creator of Firefox, meaning you get the web browsing capabilities of Firefox and much more. The built in HTML editor also supports CSS and positioned layers, and the web development tools allow users to inspect JavaScript and other elements.

AmayaAmaya is a free editor and browser that was put together by the W3C (World Wide Web Consortium), which is the group involved in web standards. Amaya runs on Windows, Mac and Unix operating systems, and is completely open source, meaning that you can contribute to this tool if you have the desire and knowledge. Users can edit and update web pages as they view them in the browser.

KompoZerKompoZer is a free tool that harnesses some of the great features and functionality found in Dreamweaver and Microsoft Frontpage. The WYSIWYG editor allows usability by beginners, and the built in file manager and FTP means that updating can be processed with this one tool. KompoZer runs in Windows, Mac and Linux operating systems.

BluefishBluefish is yet another free editor with the capability to edit various languages and script types. Bluefish is fast, lightweight, supports remote files and boasts a WYSIWYG interface. It is a powerful tool, but it is only available on a Linux operating system.

Besides Dreamweaver, the rest of this list of awesome tools is available for free. With that in mind, the task of learning to code a website can be done with little commitment, so why not get to downloading and try out a few of these web editing tools. Be sure to let us know which one you went with, and why, below.

If you’re a web developer, we would love to hear about some of the web editing programs you’re using as well.

Awesome Tools for Coding Websites Awesome Tools for Coding Websites Awesome Tools for Coding Websites Awesome Tools for Coding Websites Awesome Tools for Coding Websites Awesome Tools for Coding Websites Awesome Tools for Coding Websites Awesome Tools for Coding Websites Awesome Tools for Coding Websites

Browser Compatibility: Checking Your Website

Thursday, October 1st, 2009

Avant 11.7 Chrome Dillo Epiphany
Firefox Flock Galeon Iceape
Iceweasel Internet Explorer K-Meleon Kazehakase
Konqueror Minefield Navigator Opera
Safari SeaMonkey Shiretoko

These are just a few of the web browsers available to web users around the world, but chances are you are using one of two popular options – Internet Explorer or Firefox – and sticking to that specific software. There’s definitely nothing wrong with this practice… until you start to build a website. While things might seem fine and dandy when you’re viewing it personally, web visitors might be surfing right in on another browser and seeing something a bit different.

I’m sorry to be the one to break it to you, but this post will hopefully save some people a little shock in the future. It’s a good habit to check your work in multiple browsers, and we’re going to give you the low-down on the two most popular web browsers in use today, a tool that can help you check your browser compatibility, and ways to fix the issues.

About Internet Explorer & Firefox

The first version of Microsoft’s Internet Explorer was released way back in 1995 and has been dominating the browser world ever since. The software has been bundled with the Windows Operating System, and being the most used OS in production, there is no question as to why this browser has also had such an edge. Internet Explorer has recently released its 8th version with loads of new features, such as Accelerators, that keep IE in the browser competition.

The versions and release dates for Internet Explorer are as follows: 1.0 (1995), 2.0 (1995), 3.0 (1996), 4.0 (1997), 5.0 (1999), 6.0 (2001), 7.0 (2006), and 8.0 (2009).

Firefox’s history only dates back to 2004 when version 1.0 was released by the Mozilla organisation. Unlike Internet Explorer, Firefox is actually an Open Source software. What this means is that the code is available to a team of volunteers who are able to update and change things as necessary. This flexibility tends to give Firefox a bit of an edge over IE in the way that threats and other security issues are monitored and addressed. In addition, the organisation boasts full customisation capabilities with add-ons to the browser to suit anyone’s web surfing needs. Fancy Ebay, social networking or blogging? There’s definitely an add-on for that.

The versions and release dates for Firefox are as follows: 1.0 (2004), 1.5 (2005), 2.0 (2006), 3.0 (2008), and 3.5 (2009).

Browser Usage Broken Down

According to Firefox’s website, the recent version has been downloaded nearly 221,625,700 times worldwide, and that number is still counting. Unfortunately for Mozilla, that number must not nearly compare to the one in play by Microsoft when you take a look at the information provided by Net Applications’ Global Market Share Statistics program. Take a look at the information in the charts below (click for larger image):

Browser Compatibility: Checking Your Website
Browser Compatibility: Checking Your Website

Month Internet Explorer Firefox Safari Chrome Opera
November, 2007 79.49% 15.45% 2.32% 0.00% 1.93%
August, 2009 66.97% 22.98% 4.07% 2.84% 2.04%

Even though the percentage of users on Internet Explorer has dropped around 13% in the past 2 years, it is still topping out the next leading browser, Firefox, by a whopping 44%! Firefox, on the other hand, has actually seen an 8% growth in the past two years. That, along with the small increases from other web browsers, such as Safari, is starting to bring more competition to Microsoft.

Different Browsers Display Websites… Differently?

Yep. It’s true, and it has been the cause of many headaches for many people across the globe for years – especially web designers and developers.

The reason is that both Firefox and Internet Explorer (and other browsers) can have slight differences when interpreting a website’s code.

If you’re wondering what you can do, we would suggest testing your website in as many browsers as possible. Luckily, Browser Shots can take care of the dirty work for you and take some screenshots of your website across a range of browsers, allowing you to scrutinise the details afterwards.

I know it sounds like a messy bunch of time-consuming work to make sure your website is cross-browser compatible. Ugh, right? Well, the point we’re trying to make here is to at least try and make your website look as best as possible for the most popular web browsers, which at this time is IE and Firefox (with a growing number in Safari) so you can cover most of your bases on the web.

Solving Compatibility Issues

Seeing how this could be a whole blog post, no – a whole book, in itself, we’re just going to leave this section with a brief summary. Since so many people have been battling the browser war for years, there are now plenty of hacks available to combat common issues in design. The best places to look for these hacks are in the search engines and on webmaster / design forums. The good nature of people on forums these days will often help you diagnose and resolve your compatibility issues, provided you respect the rules of a forum and be specific with your problem. Compatibility issues can vary greatly from small alignment issues to the entire website looking odd.

Designing for a Specific Browser

I’ve come across a few websites that clearly display that their website was designed for one specific browser and is best viewed in that one alone. How do you feel about that? Does designing a website for a specific browser alienate some web visitors?

What do you do? Do you know of any great hints and tricks for helping with this issue?

Browser Compatibility: Checking Your Website Browser Compatibility: Checking Your Website Browser Compatibility: Checking Your Website Browser Compatibility: Checking Your Website Browser Compatibility: Checking Your Website Browser Compatibility: Checking Your Website Browser Compatibility: Checking Your Website Browser Compatibility: Checking Your Website Browser Compatibility: Checking Your Website