What’s the difference between Internet Explorer and Mozilla Firefox? How often should I update my browser? How do bookmarks work? What does that button do? Ok, now I’m just having fun, but with so many different browser options out there, it can be easy to get confused or frustrated, especially if you have to use more than one. The solution: Browsers 101, all the basics in one simple guide. Let’s get started!

The Major Browsers

Recent stats show that 43.5% of web users use Internet Explorer (IE), 29% prefer Firefox, 13.9% favor Chrome, and Safari is last at just under 7%. As time’s gone by, these various browsers have adapted themselves to mimic the favored features of other browsers, making the differences between them, for the most part, a matter of preference. While this information may soon be out of date, here’s a look at each of the current versions of these four browsers showing the same website:

The Details

Here’s a closer look at the functional differences between the four browsers:
NOTE: the address bars in these pictures has been shortened to show the important parts in more detail

The Parts of a Browser

While all browsers are a little bit different, there are a few elements which they all have in common:

Status Bar
The status bar used to show all sorts of load speed information, but with the pervasiveness of high-speed Internet, this is function now simply tells you that a new page is loading. The location and the format of the status bar is very different depending on the browser:

IE - it is a swirling icon and the message “connecting” on the page tab.

Chrome is the same as IE, except the tab shows the name of the website which is loading.

Firefox - it is a small gray bar at the bottom of the page which shows the URL of the page which is being loaded and then the status “done” when finished.

Safari - the address bar fills up with blue from left to right as the page loads while displaying the URL.

Color-coded features:

Address Bar (Yellow)
This is the box at the top of your browser window that displays the entire URL, or Web site address.

Title Bar (Brown)
The title bar is at the very top of your browser window; in IE, Firefox, and Safari it is the blue bar at the very top. Chrome has no title bar, as the tabs are at the very top of the page. This bar displays the title of the Web page; for example, you should see “Web Browsers 101″ at the top of your browser window unless you’re using Chrome.

• The Back and Forward Buttons
  As you navigate through web pages, your path is traced linearly by your browser and can be recalled by the back button. It does exactly what the name suggests; it takes you back a page. The forward button works the same way, it will take you to a page you’ve visited and have moved back from. If you have not used the back button you cannot use the forward button and it will be “grayed over” or dimmed slightly. The same dimming will happen to the back button if there is no page to return to. This generally only occurs on the home page or when you open a new tab.
• The Stop Button
  The stop button is fairly self-explanatory; it stops your browser from loading a page. If you realize you’ve clicked the wrong page link or if a page is taking a very long time to load or isn’t loading at all, you can use the stop button and then the back button to return to the previous page.
• The Refresh Button
  The refresh or reload button reloads the web page you’re currently viewing. If you’re having trouble loading a page, something is not displaying correctly, or you’re waiting for changes or updates on a page, the refresh button is your friend.
• The Home Button
  Your “home page” is the first page you see when you start your browser program. It can be whatever you set it for (yours, of course, is Snoitulos Ten, right?). It is the web page from which you move out onto the web.

Favorites Bar (Green)
A favorites/bookmark bar shows the favicon and name of a site. This is generally located below the address bar and above the tab bar. You can also add folders to the bar to aid organization. You can add links to this bar by clicking on the favorites button. In Firefox and chrome, this button is a star located on the far right of the address bar, in IE it is a star and the title “favorites” on the far left of the favorites bar, and in Safari it is the plus sign on the left end of the address bar.

The favorites bar can be further customized by editing the name of the site as it displays on the bar. This can be accessed by right clicking on the icon and selecting ‘rename’ or ‘edit’ or ‘properties’. You can use this to either re-name pages to suit your convenience or to remove the text entirely to save space on the toolbar or if you’re familiar with the favicon and have no need for a page title.

Tabs/New Tab (Blue)
In browsers which use tabbed browsing, there is usually a button to the right of the open tabs which will open a new tab. The exception is Safari; the new tab icon is to the right of the google search bar.

Search Bar

I haven’t marked this feature in the images above because it’s pretty easy to find; it’s the little white bar with the word ‘google’ in it,and it is simply a way of getting to the search engine more quickly. The exception to this rule is Chrome. Because this is the google browser, the address bar is the search bar. If you type something into the bar which is not in the URL format (www.something.com/org/edu) it will automatically take you to a google search page.

Display Window
The Display Window is just a fancy term for your browser work space; it’s the frame through which you see this website right now.

Scroll Bar
If you’ve ever been to a website that you had to “scroll down” to read something, then you’ve used the scroll bars. They’re just navigational/directional aids. They’re over there  →. While they may look different in various browsers, they work the exact same way, except for one small difference; in Firefox, the directional buttons are both at the bottom of the page instead of on either end of the scroll bar.

Other Features

Autocomplete

I’m sure you’ve noticed that as you type something in the address or search bar the browser helps you by bringing up past versions of the same URL or word. A drop down window appears below the bar and you can click on the various options and be taken to that site without having to remember or type in the whole URL.This feature has the added bonus of allowing you to reach a website without having to use a search engine. This might be a matter of saving a few seconds, or if the site you’re trying to reach isn’t highly ranked on search engines, it can be the only convenient way to get to a site.

Add-ons
These features are numerous and varied, and they can be found to suit just about any user’s needs. Some of the most popular add-ons are AdBlock, Dictionary, and email checkers. These all work a little differently depending on the developer and the browser you use, but they all have the same basic purpose: to make your web browsing experience easier and more personally satisfactory.

Here are a few of the add-ons I use in Chrome (which, in Chrome, are actually called extensions):

First off, to find these extensions, I click the wrench icon (the settings button) and then click tools, and then extensions on the drop down menu. This brings up a list of all of the extensions that I am currently using. On the bottom right of this page is a “get more extensions” link. This brings me to the Chrome web store (you could also, of course, have searched for the chrome web store, but I prefer this method. It’s more direct). From here you can search from any number of useful or amusing tools.

Getting add-ons is similar for the other browsers, In IE, under ‘tools’ there will be a link for ‘manage add-ons’. In Firefox, you click alt to brink up the controls, click ‘tools’ and then ‘add-ons’. In Safari, click the cog icon on the far right (where the wrench is in Chrome), then click ‘safari extensions gallery’. While there are an almost endless number of add-ons, be cautious when downloading from an unknown or uncertified developer (this goes for everything you download, not just add-ons). Have fun searching through these, there’s something for everyone.

A Final Note: Updating your Browser

The basics of the C.R.A.P. principles are:

Contrast – Elements that aren’t supposed to be the same should be very different. Making the only slightly different confuses the eye and causes the reader to see a relationship that doesn’t exist. Using differing elements on a page draws the eyes to appropriately grouped elements and allows for proper scanning.

Repetition – Continuing formatting and styles for the entire document to create and maintain a cohesive feel.

Alignment – Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements. Clean lines create peace.

Proximity – Proximity creates related meaning: elements that are related should be grouped together, whereas separate elements should have enough space in between to be easily distinguishable. Never underestimate the use of white space.

For more information and examples, visit:
http://www.webcredible.co.uk/blog/revive-the-crap-principles
http://thinkvitamin.com/design/how-crap-is-your-site-design/

Unfortunately, all did not go well. And one the Windows Apps server did not reboot. Technicians are working on the problem but I do not yet have an ETA for the servers to be back on line. The contingency plan is to install a new server but that will take time to bring on line as all of the sites will need to be restored from backup.

We will let you know as soon as we figure out the failure point.

Sorry for the inconvenience this is causing you.

Please check back here as I will be posting as more information is available.

The Favicon appears as a mini-icon next to your web address in most browsers. It also appears next to the website name in your favorites list.

I can’t tell you how many times I’ve been told “The editor doesn’t work!” by a desperate co-worker. Usually, this is followed by, “You’re a programmer! Fix it!”

But the problem almost never turns out to actually be a broken editor. And the problem almost never turns out to be something that requires a programmer to fix.

What it requires, is somebody who knows HTML.

What is HTML? HTML stands for HyperText Markup Language. It’s the language of the web. Go to any web site and use your favorite browser’s “view source” command. That bunch of confusing text you see? That’s HTML. That’s what your browser takes, interprets, and displays in the visually pleasing manner we’re used to.

You don’t have to learn everything there is to know about HTML in order to use one of our editors. But if you want the best results possible, a basic understanding of HTML and how it works helps a lot.

Each HTML document is made up of a number of elements. I find it helpful to think of these elements as containers for content. The content might be text, or it might be an image, but the content has to have somewhere to be. It has to be inside of a container.

Each container begins with a tag — a special code word enclosed in angle brackets like <div> — and ends with an end tag — the same code word preceded by a forward slash, like </div>. For example:

<div>Hello world!</div>

This HTML will look like this in your browser, and in the standard editor window:

But, here’s the tricky part. The following HTML:

<table><tr><td>Hello world!</td></tr></table>

Will also look like this in your browser:

What’s the difference? The difference is the type of bucket. Different types of buckets have different functions and different formatting rules. They might look the same under some circumstances, but not under all circumstances. For example, the following HTML:

<table><tr><td>Hello world!</td><td>One</td></tr><tr><td>Two</td><td>Three</td></tr></table>

Actually looks like this:

What are you looking at? A table bucket (<table></table>), which contains two table row buckets (<tr></tr>), which each contain two table cell buckets (<td></td>). Each table cell bucket contains text, your actual content.

Buckets can also have attributes. For example:

<table width = “100%”><tr><td style = “width:50%;height:60px;border:1px solid red;” valign = “top”>Hello world!</td><td>One</td></tr><tr><td>Two</td><td style = “font-weight:bold;color:green;padding:10px;border:1px dotted gray;” >Three</td></tr></table>

Will look like this:

Width, visual style and vertical alignment (valign) are all attributes that can be assigned to the different buckets. It’s important to understand that not all attributes can be assigned to all buckets in all arrangements. For example, the first cell in our table is defined as being 60 pixels high and fifty percent of the total table width. That means that the cell immediately below it has to be the same width, and the cell immediately to the right of it needs to be the same height.

It’s also important to get the buckets right. For example:

<table><tr><td>Hello world!</td><td>One</tr><tr><td>Two</td><td>Three</td></table>

This has tags which are not closed, which is like punching a hole in the bucket. This might look okay, but it can also cause your content to shift in unpredictable ways. Sometimes it will look okay until you make a seemingly unrelated change — like adding a second table — and then suddenly everything’s out of whack.

Buckets with actual holes are rare in HTML created when using the WYSIWYG editor. The editor automatically closes any bucket it creates. However, it is very common to end up with buckets that contain too many other buckets, or buckets that contain the wrong thing, or buckets that overlap improperly. For example, if you tell the editor to insert a table within a line of text, you might get something like:

<h3>Hello world<br /><table><tr><td>Here I am!</td></tr></table></h3>

The <h3> tag is a headline tag, which browsers expect to be a line of text. The H3 tag is not supposed to contain a table. It’s the wrong type of content for the bucket. Browsers aren’t expecting the content to come that way, and how they display it is unpredictable. The HTML above might display like this:

Hello world

Here I am!

Or it might display like this:

Hello world

Here I am!

It will vary depending on the browser, and on the styles applied to your website, and sometimes on the other elements on the page.

I hope this helps explain why your content formatting can get crazy. But the real question is, how to fix it? Usually, when the buckets get too messy, the only way to fix them is to take your content out of the buckets, get rid of the buckets that are there, and start over with new buckets. This is usually easiest if you follow these steps:

1. With the editor open, highlight your text.
2. Copy by pressing ctrl+c or command+c on a Mac.
3. Open a plain text document editor such as Notepad.
4. Paste by pressing ctrl+v or command+v on a Mac.
5. From the text editor, copy the text again.
6. Paste into the editor.
7. Apply new formatting.

Because it is so fast to format text with the editor, starting over is nearly always faster than trying to fix what’s already there.

However, if you want to take a look at the HTML, most WYSIWYG editors have a “view source” command that will show you the HTML. On our editor, it looks like this:

For a complete HTML reference, see the W3 Schools HTML Tutorial.

This is great for 2 reasons. First, they have a sense of humor. That is always a good thing. Second, they created a custom 404 error page instead of putting up the same ugly old 404 error page you see in your browser. A custom 404 error page definitely creates a better user experience for your web visitors in case they come across a broken link. Obviously, the first choice is to just not have bad links on your site, but if you have made some changes on your site and you think that some page names may have changed which resulted in a broken link, definitely put up a custom 404 page with a link to your sitemap. Way better user experience this way.

All of our sites on the ProFusion Ultra IS website application have editable 404 error pages. So it matches the look and feel of your site and gives you the opportunity to keep the visitor on your site should they encounter a bad link.