One of the things that I love most about Opera is the ability to use Sidebars / Panels.
I’ve made about 12 of these now, and they are one of the most popular destinations on the site (and the #1 site for ‘sidebars’ on Google).
So how do you make a sidebar?
It’s actually very easy. If you can make a web page, you can make a sidebar, there are just a few things to take into consideration.
First of all, the page needs to be lean. That means not only the width (so it can fit in the rather tiny space of a Sidebar) but also page weight. Sidebars are used as tools or reference materials. You (and hopefully others) will want them to be fast, so we’re going to avoid page “wait” as much as possible.
Given these restrictions, your two main guiding principles are: - Avoid tables - Avoid images
Avoid tables whenever possible because they don’t work well in narrow spaces, and it generally slows rendering.
Avoid images because they take up space (which is at a minimum) and require another connection to the server, which can slow things down.
Now sometimes you have to use a table. I’ve done it twice, when the data required it. Once for a listing of character encodings and again for a list of color codes.
Another advantage is to use CSS for styling. CSS reduces page weight to remove FONT tags and tables for formatting.
Since you are not going to use image tags for logos, etc, you will want to use correct HTML markup such as H1 for page title (not the <title> tag) and use CSS to control the font size.
If your panel includes INPUT fields for a FORM, be sure to make it clear what each field is for. Remember that due to the narrow width, there may be wrapping. Here is an example of bad design:
Address Street City
because you can’t tell without looking closely which field goes with which label. If you look closely you will notice that there are four input fields above, but only 3 labels. If this were an actual Sidebar, that would tell you that there was more information not visible, meaning you have to scroll up or down to see which label goes with which field.
However, if you space out the fields (use CSS: input { margin-bottom: 1em; }) and labels, you can eliminate the visual guesswork. Compare this:
Address
Street
City
Just by looking at that I can tell that the input field under Address is where I put my address, and so on, and it is clear that there is one label that must be above the viewable area, meaning I will have to scroll up to see that.
Another common technique is to use color to group related items. The Google Advanced Search Panel (GASP) is an example of this. It uses background colors to show users what input fields are related to one another. This is especially useful when your sidebars has several related input fields.
Good sidebar design uses space and color for visual cues, while working within the confines of a narrow window.
Lists of Links
Some times you may want to make a Sidebar which is simply a listing of related links. For example, I did this with the Table of Contents page for the 30 Days to becoming an Opera Lover series.
That sidebar uses color headers to separate each week, and uses short titles to guide people who are trying to find a quick reference.
TARGET audience
Most usability folks will tell you that you should avoid creating new windows whenever possible in web design. I agree with that guideline. However, Sidebars are a very specific type of web page, and in the majority of the cases, you will want to have your links (or FORM actions) open a new window. Otherwise the resulting page will open in the Sidebar window, which will probably be much too small to be useful. Since Opera6 lacks a built-in refresh mechanism for its Sidebars, you can actually be stuck without being able to get back to the actual sidebar. (If this happens, select a different Sidebar, then press F4 to close the Hotlist. Press F4 again to reopen the Hotlist, and re-select the original Sidebar, and it should correctly reload. If not, restart Opera.)
Therefore, you will need to tell the webpage that you want the links to open in a new window. This can be done two ways. First, use ‘target=”_blank”’ or ‘target=”_new”’ in your A tag. _blank tells the link to always open in a new window, and _new tells the link to open in a new window, but subsequent links with target=”_new” will also open in that window. The other alternative is to use the tag in the <HEAD> of the document to tell the document that all of the links on that page should open in new windows. The BASE tag is used like this:
<base target="_blank" />
(Note that BASE and TARGET are deprecated tags in XHTML 1.0 Strict, so you have to use XHTML 1.0 Transitional or earlier as your DOCTYPE. If you don’t know what that means, don’t worry about it right now.)
Note: if you do not use the BASE method, it is important to remember that FORM tags also need a TARGET, for example:
<form method=”post” src=”post.cgi” target=”_blank”>
The second tip for making a list of links is to use CSS to make them into block level elements. This is done by:
a { display: block; text-decoration: none; }
It is very important to add the ‘text-decoration: none;’ as Opera 6 has a bug which causes an Overline to appear on links which are set to ‘display: block;’
Why ‘display: block;’ ? Because if you have a list of links, setting them to BLOCK means that a user can select the link by hovering their mouse anywhere on the line for the entire width of the line and have the link selectable. (To see this in action, checkout the Table of Contents for the Opera Lover series and mouse over the link and then go all the way to the right margin and notice that you can use the whitespace as well as the link text area).
Finally, you may want to set a HOVER style for your links so that users can easily tell which link they will select. This case be done with CSS again. For example:
a:hover { background-color: yellow; color: black; }
That is what I use on the Opera Lover Table of Contents page. When you bring your mouse over the link, the entire line will turn yellow with black text.
Turning an existing page into a Sidebar
One of the most convenient uses for a Sidebar is to make a quick-access version of a page or form that you frequently use. This is what I did for the Hotmail login page as well as the GASP page. There are several steps involved, but the process is generally quite simple.
Usually when this is done there is a Form of some sort on the page (such as a place to enter a username and password, and then click submit).
Step one is to remove as much of the page as you can. I always begin by commenting out sections I think are unimportant by using comment tags: <!— and —> (Remember that comments cannot be nested, so if you try to comment out something that has already been commented out, you will run into errors.) The first tags I always get rid of are FONT and TABLE tags.
Step two is to identify the parts of that page that you need. If this page includes a form that you want to use, comment out everything after the <BODY> and before the <FORM> tag, and then everything after the </FORM> tag and before the </BODY> tag.
Now load the page in your browser. It will probably look fairly jumbled up, but you ought to see all the pieces that you need, even if they might not seem in the right order.
Before you can test it, you need to add a <BASE /> tag to the <HEAD> of the document. The <BASE> tag needs to include the HREF for the original page.
Here is an example. Suppose you want to turn a page at www.EXAMPLE.com/some/sub/folder into a panel. If you copy the code from www.SOMEDOMAIN.com to www.YOURDOMAIN.com, the links will break. The <BASE /> tag tells the links on the assume that they were on the www.EXAMPLE.com server. So you would use a tag such as:
<base href="http://www.EXAMPLE.com/some/sub/folder" target="_blank" />
Once you have added the BASE tag, test the form to make sure that it still works. If it does, then you can safely delete all the sections which you had previously commented out. If it doesn’t, you will have to start putting things back in.
Use your head, don’t be a dope
Not every site may be glad if you start giving people alternate access to their information. If you are making a Sidebar for your own personal use only, no one will probably care. However, if you are going to put it out there for everyone to see and use, be sure to inform someone at the original domain. For example, I really liked the tool. Unfortunately I could never remember the address of the site, and I really wanted to turn it into a Sidebar for quicker access. I spent some time working on it, and decided that I would like to share it with others.
Before I published it, I contacted the owner of the site and showed it to him. He really liked the idea, but he also made a few suggestions and changes. Turns out he had been planning to change a few things and my work on the Sidebar prompted him to get them done before it was released. This meant that his site would be better able to handle an increase in traffic that would probably come after an announcement. (Again, for a site like Hotmail or Google this is probably not an issue because they deal with millions of hits per day, but especially for smaller sites it is a good idea.)
Also, I would recommend working on the Sidebar and getting it working (or close to it) and showing your work to the owner of the original. If you go and ask for permission, they may not understand what you are talking about and might turn you down before they hear what you are suggesting. If you can show them what you have done, they will know what you have in mind and will also be able to see your handiwork. Once they see that you have given your time and effort to make something that works well and will be a good reflection on them, they are much more likely to give their OK for you to share it with others. (Of course if it is just for you, sitting on your hard drive, they probably won’t care either way.)
Always be sure to make it clear that you are not invoking any sort of rights or restrictions onto the Sidebar. Whatever you have done has been based on the work of others. You should make a clear link to the original version of the document and express your appreciation for the tool that you liked so much you made it into a Sidebar. If the site owner has given their OK for you to make it known, put a thank you on the page as well. Encourage people to support the original site.
Be sure that you have a good reason for making it into a Sidebar. Just because the original page has a ton of ads is not a good enough reason, and in fact if the original site is hoping to make money off of those ads, you should not jeopardize that by giving the public access to their site that bypasses the ads… That’s the stuff that lawsuits are made of, and if I were on the jury, I’d probably vote against you.
For example, the Hotmail login page still takes you to the original Hotmail site, and does not restrict the ads that Hotmail/MSN has on that site. But could Microsoft lawyers complain? Yup. Would I take it down? You betcha. Is it likely they will care about my piddly little site? No, but it’s possible. The same with Google. There are no ads on their original advanced search page, and the results page will be all of the ads just as much as if someone went to www.Google.com and typed in the search words. Again, it’s unlikely they would care, but it’s possible, and I would have no option but to remove them. (Hopefully they would see both of these as an expression of good will and a possibility of sending more users [and potential customers] their way, and they would realize that I’m not out to make any money off of it either. Hopefully.)
Reload Issues
Opera provids no User Interface to reload a panel, so be sure to include a link to do this. The best way is to make a link like this:
<a target=”_self” href=”http://yourserver.tld/path/to/sidebar.html”>Reload</a>
Sidebars can be an incredibly useful tool. You can turn your favorite reference resource into a Sidebar with a minimum of effort. I hope this has given you all you need to know, but if not, please post questions via the Comment link below, and I will answer them by reply post.
Related: Sidebars page at TnTLuoma.com, Day 16 of 30 Days Series,
†