Technology education is a study of technology, which provides an opportunity for students to learn about the processes and knowledge related to technology. As a study, it covers the human ability to shape and change the physical world to meet needs, by manipulating materials and tools with techniques
Search This Blog
Introduction to Mobile Devices
Types of Mobile Computing Devices
The term mobile device is used to mean a wide range of consumer electronics. Usually mobile device is used to describe the devices that can connect to the Internet. However, some will classify digital cameras and standard MP3 players as mobile devices as well. The category of mobile devices include the following devices, as well as others:
Personal Digital Assistant (PDA)
(sometimes called pocket computers) PDAs are handheld devices that combine elements of computing, telephone/fax, Internet and networking in a single device. A typical PDA can function as a cellular phone, fax sender, Web browser and personal organizer. Unlike portable computers, most PDAs began as pen-based, using a stylus rather than a keyboard for input. This means that they also incorporated handwriting recognition features. Some PDAs can also react to voice input by using voice recognition technologies. PDAs of today are available in either a stylus or keyboard version (called a datapad).
Examples of PDA Devices: Palm Pilot, Revo, Sony Clie, Hewlett-Packard Jornado, Casio Cassiopedia, Compaq iPaq, Toshiba Pocket PC
Smartphones
Smartphones combine both mobile phone and handheld computers into a single device. Smartphones allow users to store information (e.g., e-mail), install programs, along with using a mobile phone in one device. For example, a Smartphone could be a mobile phone with some PDA functions integrated into the device or vise versa.
Examples of Smartphones: Sony Ericsson, Palm Treo, Blackberry, Nokia T-Mobile Sidekick, Torq, Motorola Q, E-Ten, HP iPaq, I-mate,
Tablet PC
Tablet PCs are a type of notebook computer that has an LCD screen on which you can write using a stylus. The handwriting is digitized and can be converted to standard text through handwriting recognition, or it can remain as handwritten text. The stylus also can be used to type on a pen-based key layout where the lettered keys are arranged differently than a QWERTY keyboard. Tablet PCs also typically have a keyboard and/or a mouse for input.
Examples of Table PCs: Samsung Q1, Toshiba Portege, Fujitsu Lifebook, Motion Computing, IBM Thinkpad
Mobile Operating Systems (Mobile OS)
Like a computer operating system, a mobile operating system is the software platform on top of which other programs run. When you purchase a mobile device, the manufacturer will have chosen the operating system for that specific device. The operating system is responsible for determining the functions and features available on your device, such as thumbwheel, keyboards, WAP, synchronization with applications, e-mail, text messaging and more. The mobile operating system will also determine which third-party applications can be used on your device. Some of the more common and well-known Mobile operating systems include the following:
Symbian OS
Symbian OS has become a standard operating system for smartphones, and is licensed by more than 85 percent of the world's handset manufacturers. The Symbian OS is designed for the specific requirements of 2.5G and 3G mobile phones.
• Link: Symbian OS Web site
Windows Mobile
The Windows Mobile platform is available on a variety of devices from a variety of wireless operators. You will find Windows Mobile software on Dell, HP, Motorola, Palm and i-mate products. Windows Mobile powered devices are available on GSM or CDMA networks.
• Link: Windows Mobile Web site
Palm OS
Since the introduction of the first Palm Pilot in 1996, the Palm OS platform has provided mobile devices with essential business tools, as well as capability to access the Internet or a central corporate database via a wireless connection.
• Link: Palm OS Web site
Mobile Linux:
The first company to launch phones with Linux as its OS was Motorola in 2003. Linux is seen as a suitable option for higher-end phones with powerful processors and larger amounts of memory.
• Links: OSDL Mobile Linux Initiative
MXI
MXI is a universal mobile operating system that allows existing full-fledged desktop and mobile applications written for Windows, Linux, Java, Palm be enabled immediately on mobile devices without any redevelopment. MXI allows for interoperability between various platforms, networks, software and hardware components.
Feature iOS Android webOS Windows Mobile Windows Phone 7 BlackBerry OS Symbian MeeGo Bada Maemo
Company Apple Open Handset Alliance(Google) HP/Palm Microsoft Microsoft RIM Symbian Foundation Intel and Nokia Samsung Nokia
Current Version 4.0.2 2.2 1.4.5 6.5.3 Not yet released 6.0.0 9.5 1.99 1.0.2 5.0
OS Family Mac OS X/Unix-like Linux Linux Windows CE 5.2 Windows CE 7 Mobile OS Mobile OS Linux Linux Linux
Supported CPU Architecture ARM ARM, MIPS, Power Architecture, x86 ARM ARM ARM ARM ARM, x86 ARM, x86 ARM ARM
Programmed in C, C++, Objective-C C, C++, Java C C++ C++ Java C++ C++ C++ C/C++
License Proprietary EULA except for open source components Free and open source except closed source components Free and open source except closed source modules Proprietary Proprietary Proprietary Eclipse Public License Free and open source Free and open source
Package manager ? ? ? ? ? ? ? rpm+yum ? dpkg+apt-get
Default Web Browser/Engine Webkit Webkit Webkit Internet Explorer Mobile Internet Explorer Mobile Webkit Webkit Webkit Webkit (Dolphin Browser 2.0) Gecko
3rd Party Application Store App Store Android Marketplace App Catalog Windows Marketplace for Mobile Windows Phone Marketplace App World Symbian Horizon Samsung App maemo.org
Email Sync protocols supported POP3, IMAP, MAPI, POP3, IMAP, MAPI, POP3, IMAP, MAPI, POP3, IMAP, MAPI, POP3, IMAP, MAPI BES, BIS, Push e-mail POP3, IMAP POP3, IMAP POP3, IMAP, POP3, IMAP
Push Notifications Example Example Example Example Example Yes
Voice Recognition Example Yes Example Yes Yes Yes
Tethering Bluetooth, USB (carrier dependent), Wifi (with 3rd party software and "jail break") Wifi, USB, Bluetooth Wifi USB, Bluetooth, Wifi (with 3rd party software) USB, Bluetooth, Wifi USB, Bluetooth, Wifi (with 3rd party software microUSB, Bluetooth 3.0, Wifi microUSB, Bluetooth, Wifi
Audio Playback AAC (8 to 320 Kbps), Protected AAC (from iTunes Store), HE-AAC, MP3 (8 to 320 Kbps), MP3 VBR, Apple Lossless, AIFF, WAV AAC LC/LTP 3GPP, HE-AACv1 (AAC+), HE-AACv2 (enhanced AAC+), AMR-NB, AMR-WB, MP3 (Mono/Stereo 8-320Kbps constant or variable bit-rate, MIDI (MIDI Type 0 and 1. DLS Version 1 and 2., Ogg Vorbis, PCM/WAVE (8- and 16-bit linear PCM (rates up to limit of hardware), WAVE MP3, AAC, AAC+, AMR, QCELP, WAV MP3, WAVE, WMA, AAC+, MIDI, AMR, eAAC+, FlAC, OGG All (some require optional debian packages)
Video Playback H.264 video up to 720p, 30 frames per second, Main Profile level 3.1 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats; MPEG-4 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps per channel, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats; Motion JPEG (M-JPEG) up to 35 Mbps, 1280 by 720 pixels, 30 frames per second, audio in ulaw, PCM stereo audio in .avi file format H.263, H.264 AVC, MPEG-4 SP MPEG-4, H.263, H.264 MP4, WMV, H.263, H.264, DivX, WMV, XviD, 3gp All (some require optional debian packages)
Turn-by-turn GPS 3rd Party software Google Navigation 3rd Party Software 3rd Party Software Bing Maps 3rd Party Software 3rd Party Software, manufacturers software Samsung LBS (Route 66)) free global Nokia Ovi Maps
Video out 1024 by 768 pixels with Dock Connector to VGA Adapter; 576p and 480p with Apple Component AV Cable; 576i and 480i with Apple Composite AV Cable 720p on select devices None None Device depending Nokia AV Out (PAL/NTSC)
True multitasking iOS4 only Yes ? Yes Yes Yes Yes Yes ? Yes
Support for hardware keyboard Yes[citation needed] Yes Yes ? ? Yes Yes Yes ? Yes
Videoconference front video camera Currently iPhone 4 and iPod Touch 4 Only Yes Yes ? ? Yes Yes Yes ? Yes
Can share images via Bluetooth with all mobile No Yes Yes ? ? Yes Yes Yes ? Yes
Skype Yes Yes[22] ? ? ? Yes Yes[23] ? ? Yes
Facebook IM chat ? ? ? ? ? Yes ? ? ? Yes
ssh ? ? ? ? ? Yes ? ? ? Yes
OpenVPN ? ? ? ? ? Yes ? ? ? Yes
Remote Frame Buffer ? ? ? ? ? ? ? ? ? Yes
Official SDK plattform(s) Mac OS X Multiplattform[24] Multiplattform Windows Windows Windows Windows GNU/Linux Windows GNU/Linux[25]
Feature iOS Android webOS Windows Mobile Windows Phone 7 BlackBerry OS Symbian MeeGo Bada Maemo
Search Engine Optimization Tutorial
Part 1 - Why Search Engines Are Important To You . Learn how much traffic you could be getting.
Part 2 - The Basics. What's the difference between Yahoo and Alta Vista, and more?
Part 3 - How to get listed. What to do and what you can expect to happen.
Part 4 - How to improve your ranking. Just being listed isn't enough. Learn tricks to get a top ranking.
Part 1 - Why Search Engines Are Important To You
You've built your site. You've tested it. You're ready for business.
So where are all the people?
You need to get the word out about your great site, but with limited resources and no advertising budget, you need some way to attract visitors.
What can you do?
Try the No.1 way people find out about sites - Search Engines!
Surveys show that over 85% of internet users find new Web sites by using search engines. Other surveys show that after email, search engines are the most popular activity on the web.
Instead of blowing your limited resources on banners and ads galore, use search engines to send motivated visitors to your site. Click through rates on banner ads continue to drop, while search engine traffic is on the rise and growing everyday.
Search engine optimization (techniques to improve how your Web site ranks in the search engines) has been called the cheapest and most effective marketing tool available. Expect to pay professional firms that specialize in search engine optimization $2000 for a small site - $10,000 is common for big companies. If you are in an extremely competitive business, plan on shelling out $25,000 and up. Oh, and don't be surprised if you have to sign a six month or even a year contract. That's the norm for a professional shop.
You have an option to "do it in-house". With a little help from NetMechanic, you can do search engine optimization yourself, improve your site's search engine ranking, and save yourself a lot of money, frustration, and time.
Search engine traffic is the kind of traffic you want.
Why?
Traffic you receive from search engines is already targeted. Visitors arriving at your site from search engines have entered a keyword relevant to your site, so they are already interested in your product or service. This is the best source of potential customers you can have.
Search engines are the number one way users find new sites. Surveys show that over 85% of users rely on search engines to locate information on the Web. If you optimize your site to do well on the engines, then register your site with search engines, you should see increased traffic to your site.
Search engines are free to users and users know where and how to use them. One of the first things a novice to the Internet learns is how to use Yahoo (actually Yahoo is a directory, but we'll discuss the difference later).
Part 2 - The Basics
Before you can position your site to do well in the search engines, you need to understand search engine fundamentals.
A search engine is a giant database that lists sites on the Internet. You access the database when you enter keyword searches and receive a list of relevant sites.
Search sites are the Internet's Yellow Pages.
Think of a search engine as a giant, automated version of the yellow pages. If you need information on "party planning" from the yellow pages, there are several steps to retrieving it.
Go to the yellow pages and look under the alphabetized subject list for "party."
Note the subcategories: "party planning" "party - children's", "party - rental equipment", and so on.
Examine the companies listed under "party - planning" and decide which company best meets your needs.
You can repeat this process online using a search engine.
Search Engines Versus Search Directories.
People use both search engines and directories without ever realizing there is a difference between the two.
Directories (Yahoo, LookSmart) have human editors who review web pages, rank them, and then organize them into categorized lists with brief descriptions. The categories and descriptions are based on submissions, but are edited by professional editors (real people in the loop reviewing the sites being submitted).
Search Engines (AltaVista, Excite, Google) have automated programs called spiders that index sites and score pages based on proprietary guidelines. There is no human judgment involved. Search engines index all the information on all the Web pages they find. The indexes are generated automatically, based on the words and phrases that are found on Web pages.
What is a Search Engine?
Search engines send automated computer programs (called robots or spiders) to crawl the Internet in search of Web pages. Basically these spiders follow links to travel from URL to URL. When they visit your Web site, the robot indexes (or records) the text of your page or pages (if it is a deep crawling spider) and stores it in the search engine's index. Later, when a user enters a search query at the search engine's Web site, the search engine scans Web pages in its index for pages that provide the best match.
In theory, the search engine spider is supposed to be able to find all the sites on the Internet. However, since new sites are being added daily, it's risky to assume that the spider will find you. Expedite the process by submitting your URL to the search engines.
Not knowing the difference between a directory and a search engine can burn you!
What is a Directory?
Unlike the automated search engine process, each entry in a directory is first reviewed by a human being. You submit a short description to the directory for your entire site, or editors write one for sites they review. A keyword search will only look for matches in these descriptions, so be careful how you describe your site. Techniques to receive a high search engine rating will not work with a directory. While good content is necessary for search engines, both good content AND visual appeal are mandatory in human-edited directories. Remember, manual review takes time!
The typical time lag between free submission of a site and its actual listing in Yahoo is five months. You can speed up the process at some directories, but expect to pay for that service. This trend will probably continue.
Yahoo's Business Express Program, offers express guaranteed consideration of your commercial Web site within seven (7) business days.
Looksmart moved to an exclusive pay for listing scheme - all new submissions must pay to have their site reviewed.
Open Directory Project is a free directory. (Hint: If you get your site listed here, it will help you later in Google.)
When you submit to a directory, do it by hand and take your time. You need to impress human reviewers with your site so high-quality content and design are critical to your success.
Search Engine and Directory Hierarchy.
There are literally thousands of search engines on the Internet, but naturally you're most concerned about your ranking on the high-traffic sites. Some of the smaller search engines may not bring you a lot of traffic, but your listing gives you another source of links (which can help in your overall link popularity building).
If you can do well on the sites listed below, you will probably do well on others too.
Top Search Engines
AltaVista
Lycos
Teoma
Overture
Top Search Directories
Yahoo
LookSmart
Open Directory
Zeal
Part 3 - How to get listed
Don't wait to be discovered! Submit your URL directly to the search engine or directory.
Search Engine submissions.
There are two ways to submit to search engines and directories, manually or using an automated submission tool. Here is a summary of both methods.
Manual Submission - Use the Add URL form from the search engine site itself. This way, you have absolute control over where your site is submitted. However, this process is that it is a very time consuming and labor intensive activity. Some search engines bury their Add URL form so far down in the site that one wonders if they are intentionally trying to thwart potential applicants.
Automated Submission Tool - Fill in the data once and the tool automatically submits your URL to multiple engines. It is a fast, easy one step process and you only have to fill in the data forms once.
There are several features you should look for in an automated submission tool.
The number one item of importance is to make sure the submission tool does not submit to directories. If you look down the list of places the tool submits and you see directories listed, leave and do not look back! You can be assured that NetMechanic's Search Engine Starter only submits to search engines.
The second thing to look for in an automated submission tool is to find one that allows you to pick and choose which engines to submit to. If you are doing well in one engine, but not in another, you may want to submit to the search engine where you need improvement and not submit to the engine where you are doing well. Again, NetMechanic's Search Engine Starter provides the user the flexibility to submit any page on their Web site to their choice of 28 different search engines.
Find a submission service that monitors search engine spam. Because most submission services submit to many search engines, you may receive spam email by some of the smaller engines that occasionally sell their email addresses.
Note: It is not the submission tool company that is selling the email addresses, it is the search engines themselves. NetMechanic's Search Engine Starter allows you to use an alternate email address when submitting your site. Additionally, NetMechanic monitors the search engines it submits to and purges spam-abusive engines from the submission list.
Bottom Line:
Submit your site to directories by hand. Save time by using a submission tool to submit to search engines.
How often do I submit?
Your best strategy is to submit weekly until your site gets listed. Check your listing frequently. If your site disappears suddenly, you may be the victim of a search engine database omission. Search engines frequently have multiple versions of their databases and they aren't always in sync. You may be listed in one version of their database and not in another. Your only recourse is to resubmit your site.
To see if you have even been picked up in a search engine, go to the search engine's site and do a search with your company's domain name as the search query.
Directory Submissions.
Submitting to a directory is a much more involved specialized process. Don't do it in a rush and don't use an automated submission tool. The better submission tools, like Search Engine Starter, don't submit to directories.
How long does it take to get listed?
These times vary with search engines and directories. The search engines will optimistically report a very short time, but most sites get listed within the following times:
Google 4 - 6 weeks
Lycos 4 - 6 weeks
WiseNut 6 weeks
The reality is that most search engines and directories are very backlogged and slow to get listings added to their databases. Don't be surprised if you experience waits much longer than these. As mentioned earlier, you may wait over 5 months to see your site get listed on Yahoo!, if it gets listed at all.
We recommend that if your site isn't listed within the time periods above, that you resubmit your site to the search engine where you are not listed.
Is being listed in the search engines good enough?
Unfortunately no.
A listing won't automatically increase your traffic. A good ranking may. You want to be listed on the first three pages of the search engine results page. Most web surfers aren't patient enough to look more than the first 20-40 listed links. In fact there is a considerable drop off just going from the first to the second page.
Part 4 - How to improve your ranking.
How do search engines rank pages?
Search engines use a ranking algorithm to determine the order in which matching web pages are returned on the results page. Each web page is graded on the number of the search terms it contains, where the words are located in the document, and other criteria that changes frequently.
All search engines have a different method of ranking. That's why you might rank number 1 on one engine and number 25 on another. Robots look for relevance and rank results on a secret ever-changing algorithm. Some look at TITLE, some look at META tags, some look for link popularity. Search engine optimization means optimizing the Web site for the best possible positioning based on the page's keywords and description.
NetMechanic's Search Engine Power Pack has a search engine optimization package that will walk you through the whole optimization process. NetMechanic has numerous experts who have conducted extensive tests to help identify what techniques work to better your ranking in the search engines. Additionally, we have identified what can get you into trouble with search engines.
General tips to get a good ranking.
1. Create a good site with good content.
This is critical, especially as search engines grow in sophistication. If your site contains worthwhile material, users will return to your site and will recommend it to others. Other sites will link to you - which will in turn help you by improving your link popularity.
2. Pick keywords visitors will actually use on a search engine query.
If you have keywords that are very competitive, consider narrowing your focus to improve results. The keyword "horse" will return thousands of responses and may not place you near the top, while "Appaloosa" is more focused and targeted to a particular query.
Consider using a keyword phrase instead of just one keyword. Visitors to search engines use phrases to narrow their searches. For example, instead of using a keyword like "horse" that would return too many responses, use a more specific keyword phrase like "Alabama Quarter horse."
Brainstorm a good list of list of keywords. Tap into other people - a fresh perspective can help uncover words you may have missed. This keyword analysis article offers some useful tips on brainstorming.
Don't just guess at which keywords are popular, get quantitative feedback using the Keyword Popularity tool included in Search Engine Power Pack. Remember, if you pick the wrong keywords, all your optimization will be wasted. See story on Keyword Selection.
3. Include keywords in your TITLE tag.
Pages with keywords appearing in the TITLE are assumed to be more relevant to the topic than those without.
4. Use keywords in META Keyword and Description tags.
Using META tags will not hurt you in search engines that don't use them, and they can definitely help you in search engines that do index them. While they are not as important as the TITLE tag, META tags can give you the edge over your competition since most web sites don't even use them.
5. Use your keywords throughout your page.
Search engines will check to see if the keywords appear near the top of a web page, such as in the headline or in the first few paragraphs of text. They assume that any page relevant to the topic will mention those words right from the beginning.
6. Have a good keyword density on your page.
Keyword density is derived by dividing the frequency of that word by the total words on the page. Frequency is a major factor in how search engines determine relevancy. A search engine will analyze how often keywords appear in relation to other words in a web page. Those with a higher frequency are often deemed more relevant than other web pages. This can turn into a balancing act as too high a density can be considered spam by some engines. Usually you are safe if your keyword density falls between 1 - 5 %.
7. Continually work on improving your link popularity.
Listings on popular Web sites can increase your traffic significantly. They do this in two ways:
They give potential visitors multiple paths to your Web site.
They can increase your ranking in search engines that use link popularity as part of their formula.
Most search engines use link popularity as relevance criteria. For example, the Google search engine (not their new directory) is based almost entirely on link popularity.
Summary
Success with search engines and directories is not one magical thing you do specifically. It is the culmination of your whole strategy. It is a time consuming, labor intensive activity with great rewards.
Bottom Line:
Use Search Engine Power Pack at least once a month to help you get more traffic from the search engines.
NetMechanic's Search Engine Power Pack is a search engine optimization power house. It's a five tool bundle that can help you improve your search engine ranking and bring more traffic to your site. Power Pack walks you through the whole search engine optimization process. From selecting your most effective keywords and building META tags, to optimizing your pages for peak search engine performance, to submitting your pages to the search engines of your choice and to tracking your site's performance in the search engines over time. NetMechanic has the one stop solution that will greatly improve your search engine performance.
CSS Tip
Add CSS Formatting To Your Page
by Kumar anubhav,
Senior Web Analyst,
NetMechanic, Inc.
|
In our June 2003 Beginner Tip, we discussed the benefits of removing deprecated HTML tags from your Web pages. Now we're going to take an existing Web page and show you how to do just that. In 5 easy steps we'll analyze the page, create CSS definitions, delete the HTML formatting tags, add CSS-specific formatting to enhance the page, and validate the code.
The Goal: Quick And Easy Pages
First, look at this example page that uses all HTML formatting and images for navigation.
The total size of this page is rather large for such a simple layout:
| HTML code: | 6k | |
| 5 navigation buttons: | 15k (3k each) | |
| Logo image: | 12k | |
| Total: | 33k | |
It's such a simple layout to have such a large overall download size, isn't it? And the code is so cluttered with formatting tags that it's hard to find individual page elements. Don't worry: we can fix both problems with CSS.
Step One: Find Common Elements
Next, we'll scan the page's source code to see if the formatting of any page elements could be grouped together using CSS rules. We find five!
| Page Element | Common Formatting | Style Rule |
|---|---|---|
| body | font name
font size font color background color | font-family:verdana;
font-size:12px; color:navy; background-color:maroon; |
| table | background color
font name font size font color | background-color:white;
font-family:verdana; font-size:12px; color:navy; |
| Section headers | font-size | Replace with tags |
| Data table | background color | background-color:navy; |
| headers | font color
centered text bold text | font-color:yellow;
text-align:center; font-weight:bold; |
| Data table cells | centered text
bold text | text-align:center;
font-weight:bold; |
Step Two: Create The Style Definitions
Always save a copy of the original file before you make major changes to any important page in your Web site. Here, we take the example file titled "DeprecatedTags.htm" and save it to a new file titled "CSS_Formatting.htm."
Refer to the chart in step one. Most of the style definitions are ready to place into the new page's HEAD section like this:
|
Note that we specifically added the table tags to the style rule for the document's body. It shouldn't be necessary because tables should inherit the BODY definition because they're part of the document's body - but Netscape browsers don't see it that way. Avoid this Netscape bugby specifically adding table elements to your body style definition.
Also note that we created two class definitions: tableHeading and cost. We'll use these inside the TD tags in the data tables.
Step 3: Remove HTML Formatting Tags
On this page, removing the formatting tags is relatively easy because the major problems are opening and closing FONT tags and the CENTER attribute.
Be careful! This third step is one of the most time-consuming and frustrating steps. Each time you add or delete code, you risk making a coding error. Some can be catastrophic and hard to find because they may only cause problems in a particular browser.
Learn more about browser incompatibility problems in our browser compatibility tutorial.
|
Then finally, replace the paragraph tags with the section headers with structural H2 tags:
Adopt A Pet Today
Low Cost Spay and Neuter
Finally, apply the CSS class definitions we created in Step 2. Apply the tableHeader class to the data tables' header cells and data cells:
Check out the revised example file. It's a lot easier to locate specific page elements. Its size is down to 5k for the HTML code. If we were to place the CSS definitions inside an external file, we could save another 1k of download and reuse the styles on each page in the site.
But for now, let's leave the styles in the HEAD section because there are a few changes we can make to enhance the page's visual appeal and decrease the total download size even more.
Step 4: Add CSS-specific Formatting
Look at the navigation menu. It's created using 5 separate image files. They look ok, but is there really a reason to use images? We could easily style some nice navigation buttons using CSS.
This technique is covered extensively in our Create Stylish MenusWebmaster tip, so we won't duplicate it in this story. We save 15k of download by replacing those images with text navigation. We alsomake the page more accessible to search engine spiders and visitors with disabilities!
The page has three distinct sections, so maybe it would be nice to visually separate them with some borders. With CSS, we can add a border to just one side of a page element.
Let's create two more classes and add them to the style definition in the HEAD section:
|
.bottomBorder {border-bottom: 3px solid navy;} .leftBorder {border-left: 3px solid navy;} |
Then, apply them inside the appropriate TD tags where you want the border to display.
This third example page shows the results of the changes we made here in Step 4. Look at the source code and compare it to the original file.
Of course, the STYLE section of the page takes up a bit of space. Now that we have the page like we want it, we could place all style definitions in an external CSS file.
That change would decrease the total download for the CSS Web page:
| HTML code: | 4k | |
| 5 navigation buttons: | 0k | |
| Logo image: | 12k | |
| External style sheet: | 1k | |
| Total: | 17k | |
With a little time, effort, and CSS, we've created a page with the same information and functionality as the original page - except that it's approximately 50% smaller! You'll see an even greater savings on pages that are more text-heavy, but we tried to keep the example simple so you can understand the concepts before you begin experimenting with your own pages.
Step 5: Validate The New HTML Code!
This last step is the one webmasters most often overlook: validate your code! We've made a lot of changes and deleted a lot of tags. That's great because now you have a page that's a lot easier to maintain.
But chances are, you'll have made some errors along the way. The most common error is a lot of orphan closing FONT tags scattered throughout your code. Also, look carefully for opening and closing carats (<>) or quotation marks that you may have accidentally deleted.
Any of those simple errors can confuse browsers and search engine spiders and make it hard for them to separate the page's code from the content that should display on the page.
The process can be tedious, but it's critical! One quick and easy solution is to use HTML Toolbox to validate your code. It alerts you to HTML code errors that can break your page and the subscription version will even prepare a corrected version of your page that you can upload to your own server.
Even better, HTML Toolbox's Load Time Check feature will show you how quickly your pages download at different modem speeds. You won't have to guess whether or not your revised pages download faster, you'll know - and so will your visitors!
