Blogged with Flock
Wednesday, November 7, 2007
Well, it's not a gPhone...
As expected we did get an announcement from Google and the topic of discussion was mobile phones but we did not get an announcement of the much anticipated “gPhone”. Instead we were given Android, a complete mobile phone software stack, brought to us by the Open Handset Alliance. The new software will include everything needed to build a mobile phone, developers to build applications, or consumers to customize their phone. The advantages of having an open platform like Android is developers will have complete access to all the phones functionality allowing them to freely develop new and innovative applications. This is also a huge advantage to companies, by allowing them to customize their mobile devices in a way they see fit. I love that we are finally seeing openness in the mobile world. Android could bring us a huge change in how mobile devices are built, sold, and developed. I am interested to see some of the first android devices which are suppose to be release in the second half of 2008, and I can’t wait to see how the blackberry and windows mobile dominated enterprise market responds to this new product. Over the next few months I will continue to write about this subject and keep you updated with any new developments.
Thursday, October 18, 2007
Tables
It is perfectly fine to use tables in your web pages as long as they used to display tabular data such as:
Items such as the ones listed above are what the <table> tag was created for. It would take too much CSS to get these to look right without the table tag.
Things to consider
One drawback to a poorly coded table is it can be inaccessible to some of your viewers. To avoid this try some of the following techniques.
Adding a summary
This is great for your visitors who can't see you page by giving explaining the purpose and contents of your table. To add a summary to your table simply follow this format:
<table summary="This table is a chart of all the Oregon Ducks wins this season.">
Inserting a Caption
Adding headers to your table
Table headers are great b/c default table headers are bold and centered. It also gives us a way to easily style the headers without using extra markup. Table headers are created by using the <th> tag rather than <td> tag.
Header and data relationships
By adding an ID to the header tables are even easier for screen readers to understand this helps associate table data with a table header. By organizing your table this way your non-visual visitors will be able to understand your table much better.
<th id="date">Date</th>
…
<td headers="date">Sept.28</td>
- Calendars
- Spreadsheets
- Charts
- Schedules
Items such as the ones listed above are what the <table> tag was created for. It would take too much CSS to get these to look right without the table tag.
Things to consider
One drawback to a poorly coded table is it can be inaccessible to some of your viewers. To avoid this try some of the following techniques.
Adding a summary
This is great for your visitors who can't see you page by giving explaining the purpose and contents of your table. To add a summary to your table simply follow this format:
<table summary="This table is a chart of all the Oregon Ducks wins this season.">
Inserting a Caption
Adding headers to your table
Table headers are great b/c default table headers are bold and centered. It also gives us a way to easily style the headers without using extra markup. Table headers are created by using the <th> tag rather than <td> tag.
Header and data relationships
By adding an ID to the header tables are even easier for screen readers to understand this helps associate table data with a table header. By organizing your table this way your non-visual visitors will be able to understand your table much better.
<th id="date">Date</th>
…
<td headers="date">Sept.28</td>
Tuesday, September 18, 2007
Proper Use of Headings
Web Designers have used many different methods to markup headings on their web pages. We are going to take a look at three different options and talk about which one is best.
Option1:
<span class="header">Web Design 101</span>
.header {
Font-size: 18px;
Font-weight: Bold;
Color: Brown;
}
This works just fine except those for who use alternate web browsing devices such as mobile phones or screen readers both of which may or may not use CSS properly or at all. Another problem with this is search engines see text inside a <span> tag as just text, not important information which all headings should be seen as important. A <span> is also an inline item and if you wanted the heading to be on its own line you would need to add extra code to put it on its own line.
Option 2:
<p><b>Web Design 101</b></p>
Although this option does make the text bold without the use of CSS still does not look any more important to a search engine than any of the other text on the page. Using this method will also make it very hard to style any of the other <p> and <b> tags without affecting the headings style.
Option 3:
<h1>Web Design 101</h1>
YES! This is by far the best way to markup a heading, with a heading tag. It's simple, understood by all browsers, and search engines recognize the text as important information. There are six different types of heading tags <h1> through <h6>. <h1> is the most important heading and is used for the most important heading on the page the next important heading should be and <h2> tag and so on and so forth. Using a heading tag will also give you the most flexibility when it comes to styling.
*REMEMBER! : <h1> though <h6> should only be used for headings not to make text bigger. You should also not use a smaller heading tag for your main heading b/c you want the text to be smaller. Remember Content and design should be separate from each other. First mark up your content properly. Second style your content with CSS as you see fit.
Option1:
<span class="header">Web Design 101</span>
.header {
Font-size: 18px;
Font-weight: Bold;
Color: Brown;
}
This works just fine except those for who use alternate web browsing devices such as mobile phones or screen readers both of which may or may not use CSS properly or at all. Another problem with this is search engines see text inside a <span> tag as just text, not important information which all headings should be seen as important. A <span> is also an inline item and if you wanted the heading to be on its own line you would need to add extra code to put it on its own line.
Option 2:
<p><b>Web Design 101</b></p>
Although this option does make the text bold without the use of CSS still does not look any more important to a search engine than any of the other text on the page. Using this method will also make it very hard to style any of the other <p> and <b> tags without affecting the headings style.
Option 3:
<h1>Web Design 101</h1>
YES! This is by far the best way to markup a heading, with a heading tag. It's simple, understood by all browsers, and search engines recognize the text as important information. There are six different types of heading tags <h1> through <h6>. <h1> is the most important heading and is used for the most important heading on the page the next important heading should be and <h2> tag and so on and so forth. Using a heading tag will also give you the most flexibility when it comes to styling.
*REMEMBER! : <h1> though <h6> should only be used for headings not to make text bigger. You should also not use a smaller heading tag for your main heading b/c you want the text to be smaller. Remember Content and design should be separate from each other. First mark up your content properly. Second style your content with CSS as you see fit.
Subscribe to:
Posts (Atom)
