Home » Programming
text-align:center works in IE but not in Firefox
When things work in IE as we expect, we presume that it’s perfect and should work in other browsers too. text-align:center; or text-align:right; properties for layout works well in Internet explorer as we want but it doesn’t work in mozilla-family of browsers, why?
Well there is nothing wrong with Firefox or Netscape but something with IE, read the property again, text-align must be for alignment of the text inside an element and not the alignment of that element itself, right? This is why Firefox/Netscape will not align the element but the text inside it, and that’s perfectly alright! But IE on the other hand uses this property to align elements as well as text inside them to specified location, which is logically wrong as far as the alignment of elements is concerned.
Well anyways it works in IE, but then what is solution for Firefox/netscape if you want to align elements in the center/right?
It’s very simple, use margin:auto; (all margins top, right, bottom, left would be adjusted automatically) or use margin-left:auto; and margin-right:auto; to align the element in the center and use only margin-left:auto; to align the element to right.
Isn’t that logically correct? It is! It works for IE too.
Well there is nothing wrong with Firefox or Netscape but something with IE, read the property again, text-align must be for alignment of the text inside an element and not the alignment of that element itself, right? This is why Firefox/Netscape will not align the element but the text inside it, and that’s perfectly alright! But IE on the other hand uses this property to align elements as well as text inside them to specified location, which is logically wrong as far as the alignment of elements is concerned.
Well anyways it works in IE, but then what is solution for Firefox/netscape if you want to align elements in the center/right?
It’s very simple, use margin:auto; (all margins top, right, bottom, left would be adjusted automatically) or use margin-left:auto; and margin-right:auto; to align the element in the center and use only margin-left:auto; to align the element to right.
Isn’t that logically correct? It is! It works for IE too.
Float:left does not work in Firefox/Netscape
The code might be something like:
everything is perfect and works as expected in Internet Explorer, then what’s wrong with Firefox/Netscape?
There’s nothing wrong, IE is acting Smarter, it actually calculates and considers the width for ‘right’ div to be 70% but Firefox or Netscape takes it to be 100% which I think is logically correct as if we don’t specify the width=100% that means we assume the browser considers it to be 100%, and the same thing is happening here in case of Firefox and Netscape.
Well, now do I need to tell the solution? Pretty simple, assign width preferable little less than 70% e.g. 68% and everything will work as you want in Firefox, Netscape as well as IE.
Read more…
test text left or imagetest text right
and style with properties:
#left {width:30%; float:left;}
#right {float:right;}
everything is perfect and works as expected in Internet Explorer, then what’s wrong with Firefox/Netscape?
There’s nothing wrong, IE is acting Smarter, it actually calculates and considers the width for ‘right’ div to be 70% but Firefox or Netscape takes it to be 100% which I think is logically correct as if we don’t specify the width=100% that means we assume the browser considers it to be 100%, and the same thing is happening here in case of Firefox and Netscape.
Well, now do I need to tell the solution? Pretty simple, assign width preferable little less than 70% e.g. 68% and everything will work as you want in Firefox, Netscape as well as IE.
Why pay for expensive PR when an optimised website can lead journalists to you
“Why fling money at an expensive PR company when a finely tuned website can be a sustainable method of leading journalists to a SME direct?” said Charlie Burbury, in response to his ecological holiday cottages being voted Hotel of the Week by the UK newspaper The Independent on Sunday.
“We employed the web marketing consultants ‘satiworks’, who identified our target customers’ key search phrases and built a website that would be listed on Page 1 of Google for these phrases - not easy when you think of the thousands of competitors we have and many of them big brands with equally big marketing budgets.
“From this small successful investment a journalist from The Independent on Sunday found us on the Internet when preparing for their Caribbean supplement. The journalist approached Lime Tree Farm after speaking to her editor, flew out at no cost to ourselves and we became their ‘Hotel of the Week’* receiving a full-page review in their Caribbean travel magazine that has a readership of 600,000k+.
“This has not only resulted in an increase in bookings but also bodes well for the long-term. The feature is mirrored online with a link to our own website, and this further helps us to improve our search engine rankings - something that no traditional advert or paper only feature can return.
“For us to have taken out an advert in such a high-profile publication would have cost £15k+, unviable money for us a SME in a developing country and without any serious guarantee on return on investment when our customers are the types less likely to buy into a glossy advertising message. If we had paid a PR company to undertake this, it would have potentially cost at least £4k and with no guarantee of coverage. Instead via our search engine optimised website we have a medium that not only brings in business but in affect acts as a convergent marketing tool by bringing journalists to us direct and cutting out the costly PR middle man”.
Charlie’s luxury holiday cottages are located in the lush Blue Mountains of Jamaica on a working coffee farm, which were built to initially supplement the farm’s income after a hurricane had pummelled the family’s coffee crop.
Charlie had moved to Jamaica from Plymouth Devon in the UK in 1999. His grandfather Lord Caradon (Sir Hugh Foot) had been Governor General of Jamaica and for the whole family it had subsequently been a favourite holiday destination. With his uncle, Oliver Foot (Chairman of the blindness prevention charity ORBIS International) and school friend Roger Bolton, they established Lime Tree Farm in its original incarnation - solely growing the world renowned Blue Mountain coffee.
Aware of the increasing number of hurricanes from global warming, the three looked to an alternative method of ensuring that the farm could sustain itself and provide local employment even when its coffee crops were untenable, and this is when they decided to build their three environmentally-friendly holiday cottages.
After investing heavily in the cottages, little money was left over to market them – hence looking to the web to provide them with possible international clients. However, their small but affective website has bought in a booking conversion rate of 2% (inline with the travel industry giants whose name and reputation guarantee bookings) and has already increased the farm’s annual profits tenfold.
“More SMEs should be investing in this form of web-led marketing” said Sam Dunham, satiworks’ Web Marketing Consultant. “A findable website can lead to all manner of traditional marketing rewards without any of the additional investment and costs associated with an off-line marketing spend. All businesses should be more aware of the fact that 98% of journalists go online every day, and three quarters use the internet to source and create angles from the web’s cache of information that dates all the way back to 1996.”
“We employed the web marketing consultants ‘satiworks’, who identified our target customers’ key search phrases and built a website that would be listed on Page 1 of Google for these phrases - not easy when you think of the thousands of competitors we have and many of them big brands with equally big marketing budgets.
“From this small successful investment a journalist from The Independent on Sunday found us on the Internet when preparing for their Caribbean supplement. The journalist approached Lime Tree Farm after speaking to her editor, flew out at no cost to ourselves and we became their ‘Hotel of the Week’* receiving a full-page review in their Caribbean travel magazine that has a readership of 600,000k+.
“This has not only resulted in an increase in bookings but also bodes well for the long-term. The feature is mirrored online with a link to our own website, and this further helps us to improve our search engine rankings - something that no traditional advert or paper only feature can return.
“For us to have taken out an advert in such a high-profile publication would have cost £15k+, unviable money for us a SME in a developing country and without any serious guarantee on return on investment when our customers are the types less likely to buy into a glossy advertising message. If we had paid a PR company to undertake this, it would have potentially cost at least £4k and with no guarantee of coverage. Instead via our search engine optimised website we have a medium that not only brings in business but in affect acts as a convergent marketing tool by bringing journalists to us direct and cutting out the costly PR middle man”.
Charlie’s luxury holiday cottages are located in the lush Blue Mountains of Jamaica on a working coffee farm, which were built to initially supplement the farm’s income after a hurricane had pummelled the family’s coffee crop.
Charlie had moved to Jamaica from Plymouth Devon in the UK in 1999. His grandfather Lord Caradon (Sir Hugh Foot) had been Governor General of Jamaica and for the whole family it had subsequently been a favourite holiday destination. With his uncle, Oliver Foot (Chairman of the blindness prevention charity ORBIS International) and school friend Roger Bolton, they established Lime Tree Farm in its original incarnation - solely growing the world renowned Blue Mountain coffee.
Aware of the increasing number of hurricanes from global warming, the three looked to an alternative method of ensuring that the farm could sustain itself and provide local employment even when its coffee crops were untenable, and this is when they decided to build their three environmentally-friendly holiday cottages.
After investing heavily in the cottages, little money was left over to market them – hence looking to the web to provide them with possible international clients. However, their small but affective website has bought in a booking conversion rate of 2% (inline with the travel industry giants whose name and reputation guarantee bookings) and has already increased the farm’s annual profits tenfold.
“More SMEs should be investing in this form of web-led marketing” said Sam Dunham, satiworks’ Web Marketing Consultant. “A findable website can lead to all manner of traditional marketing rewards without any of the additional investment and costs associated with an off-line marketing spend. All businesses should be more aware of the fact that 98% of journalists go online every day, and three quarters use the internet to source and create angles from the web’s cache of information that dates all the way back to 1996.”
Web standards checklist
Web standards - more than just 'table-free sites'
The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).
In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.
1. Quality of code
1.1 Does the site use a correct Doctype?
A doctype (short for 'document type declaration') informs the validator which version of (X) HTML you're using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won't validate without them.
1.2 Does the site use a Character set?
If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.
1.3 Does the site use Valid (X)HTML?
Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML.
1.4 Does the site use Valid CSS?
You need to make sure that there aren't any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance.
1.5 Does the site use any CSS hacks?
Basically, hacks come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to achieve.
1.6 Does the site use unnecessary classes or ids?
I've noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.
1.7 Is the code well structured?
Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
1.8 Does the site have any broken links?
Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.
1.9 How does the site perform in terms of speed/page size?
Don't make me wait... That's the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.
1.10 Does the site have JavaScript errors?
Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are JavaScript errors on your site. This is available under 'Internet Options' on the Advanced tab. Uncheck 'Disable script debugging'.
2. Degree of separation between content and presentation
2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
Use style sheets to control layout and presentation
2.2 Are all decorative images in the CSS, or do they appear in the (X)HTML?
The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.
3. Accessibility for users
3.1 Are "alt" attributes used for all descriptive images?
Provide a text equivalent for every non-text element
3.2 Does the site use relative units rather than absolute units for text size?
Use relative rather than absolute units in markup language attribute values and style sheet property values'
3.3 Do any aspects of the layout break if font size is increased?
Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser's font size. And again. And again... Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.
3.4 Does the site use visible skip menus?
A method shall be provided that permits users to skip repetitive navigation links
Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group
...blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.
3.5 Does the site use accessible forms?
Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another
3.6 Does the site use accessible tables?
For data tables, identify row and column headers... For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
3.7 Is there sufficient colour brightness/contrasts?
Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits
3.8 Is colour alone used for critical information?
Ensure that all information conveyed with colour is also available without colour, for example from context or markup
There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).
3.9 Is there delayed responsiveness for dropdown menus?
Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.
3.10 Are all links descriptive?
Link text should be meaningful enough to make sense when read out of context - either on its own or as part of a sequence of links. Link text should also be terse.
4. Accessibility for devices
4.1 Does the site work acceptably across modern and older browsers?
Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.
4.2 Is the content accessible with CSS switched off or not supported?
Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.
4.3 Is the content accessible with images switched off or not supported?
Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for these people.
4.4 Does the site work in text browsers such as Lynx?
This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meaning.
4.5 Does the site work well when printed?
You can take any (X)HTML document and simply style it for print, without having to touch the markup.
4.6 Does the site work well in Hand Held devices?
This is a hard one to deal with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.
4.7 Does the site include detailed metadata?
Metadata is machine understandable information for the web
Metadata is structured information that is created specifically to describe another resource. In other words, metadata is 'data about data'.
4.8 Does the site work well in a range of browser window sizes?
It is a common assumption amongst developers that average screen sizes are increasing. Some developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?
5. Basic Usability
5.1 Is there a clear visual hierarchy?
Organise and prioritise the contents of a page by using size, prominence and content relationships
5.2 Are heading levels easy to distinguish?
Use header elements to convey document structure and use them according to specification
5.3 Is the site's navigation easy to understand?
Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.
5.4 Is the site's navigation consistent?
If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information
5.5 Does the site use consistent and appropriate language?
The use of clear and simple language promotes effective communication. Trying to come across as articulate can be as difficult to read as poorly written grammar, especially if the language used isn't the visitor's primary language.
5.6 Does the site have a sitemap page and contact page? Are they easy to find?
Most site maps fail to convey multiple levels of the site's information architecture. In usability tests, users often overlook site maps or can't find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.
5.7 For large sites, is there a search tool?
While search tools are not needed on smaller sites, and some people will not ever use them, site-specific search tools allow users a choice of navigation options.
5.8 Is there a link to the home page on every page in the site?
Some users like to go back to a site's home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.
5.9 Are links underlined?
To maximise the perceived affordance of clickability, colour and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.
5.10 Are visited links clearly defined?
Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
6. Site management
6.1 Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
You've requested a page - either by typing a URL directly into the address bar or clicking on an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser's built-in ability to explain what the problem is.
6.2 Does the site use friendly URLs?
Most search engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL... what good is a site if no one can find it?
One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usable
6.3 Does the site's URL work without "www"?
While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.
6.4 Does the site have a favicon?
A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser
Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn't available, a 404 error may be generated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a 'robots.txt' file.
The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).
In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.
1. Quality of code
1.1 Does the site use a correct Doctype?
A doctype (short for 'document type declaration') informs the validator which version of (X) HTML you're using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won't validate without them.
1.2 Does the site use a Character set?
If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.
1.3 Does the site use Valid (X)HTML?
Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML.
1.4 Does the site use Valid CSS?
You need to make sure that there aren't any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance.
1.5 Does the site use any CSS hacks?
Basically, hacks come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to achieve.
1.6 Does the site use unnecessary classes or ids?
I've noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.
1.7 Is the code well structured?
Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
1.8 Does the site have any broken links?
Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.
1.9 How does the site perform in terms of speed/page size?
Don't make me wait... That's the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.
1.10 Does the site have JavaScript errors?
Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are JavaScript errors on your site. This is available under 'Internet Options' on the Advanced tab. Uncheck 'Disable script debugging'.
2. Degree of separation between content and presentation
2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
Use style sheets to control layout and presentation
2.2 Are all decorative images in the CSS, or do they appear in the (X)HTML?
The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.
3. Accessibility for users
3.1 Are "alt" attributes used for all descriptive images?
Provide a text equivalent for every non-text element
3.2 Does the site use relative units rather than absolute units for text size?
Use relative rather than absolute units in markup language attribute values and style sheet property values'
3.3 Do any aspects of the layout break if font size is increased?
Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser's font size. And again. And again... Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.
3.4 Does the site use visible skip menus?
A method shall be provided that permits users to skip repetitive navigation links
Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group
...blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.
3.5 Does the site use accessible forms?
Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another
3.6 Does the site use accessible tables?
For data tables, identify row and column headers... For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
3.7 Is there sufficient colour brightness/contrasts?
Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits
3.8 Is colour alone used for critical information?
Ensure that all information conveyed with colour is also available without colour, for example from context or markup
There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).
3.9 Is there delayed responsiveness for dropdown menus?
Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.
3.10 Are all links descriptive?
Link text should be meaningful enough to make sense when read out of context - either on its own or as part of a sequence of links. Link text should also be terse.
4. Accessibility for devices
4.1 Does the site work acceptably across modern and older browsers?
Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.
4.2 Is the content accessible with CSS switched off or not supported?
Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.
4.3 Is the content accessible with images switched off or not supported?
Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for these people.
4.4 Does the site work in text browsers such as Lynx?
This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meaning.
4.5 Does the site work well when printed?
You can take any (X)HTML document and simply style it for print, without having to touch the markup.
4.6 Does the site work well in Hand Held devices?
This is a hard one to deal with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.
4.7 Does the site include detailed metadata?
Metadata is machine understandable information for the web
Metadata is structured information that is created specifically to describe another resource. In other words, metadata is 'data about data'.
4.8 Does the site work well in a range of browser window sizes?
It is a common assumption amongst developers that average screen sizes are increasing. Some developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?
5. Basic Usability
5.1 Is there a clear visual hierarchy?
Organise and prioritise the contents of a page by using size, prominence and content relationships
5.2 Are heading levels easy to distinguish?
Use header elements to convey document structure and use them according to specification
5.3 Is the site's navigation easy to understand?
Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.
5.4 Is the site's navigation consistent?
If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information
5.5 Does the site use consistent and appropriate language?
The use of clear and simple language promotes effective communication. Trying to come across as articulate can be as difficult to read as poorly written grammar, especially if the language used isn't the visitor's primary language.
5.6 Does the site have a sitemap page and contact page? Are they easy to find?
Most site maps fail to convey multiple levels of the site's information architecture. In usability tests, users often overlook site maps or can't find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.
5.7 For large sites, is there a search tool?
While search tools are not needed on smaller sites, and some people will not ever use them, site-specific search tools allow users a choice of navigation options.
5.8 Is there a link to the home page on every page in the site?
Some users like to go back to a site's home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.
5.9 Are links underlined?
To maximise the perceived affordance of clickability, colour and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.
5.10 Are visited links clearly defined?
Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
6. Site management
6.1 Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
You've requested a page - either by typing a URL directly into the address bar or clicking on an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser's built-in ability to explain what the problem is.
6.2 Does the site use friendly URLs?
Most search engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL... what good is a site if no one can find it?
One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usable
6.3 Does the site's URL work without "www"?
While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.
6.4 Does the site have a favicon?
A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser
Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn't available, a 404 error may be generated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a 'robots.txt' file.
Source Code for the .NET Framework Libraries
One of the things my team has been working to enable has been the ability for .NET developers to download and browse the source code of the .NET Framework libraries, and to easily enable debugging support in them.
Today I'm excited to announce that we'll be providing this with the .NET 3.5 and VS 2008 release later this year.
We'll begin by offering the source code (with source file comments included) for the .NET Base Class Libraries (System, System.IO, System.Collections, System.Configuration, System.Threading, System.Net, System.Security, System.Runtime, System.Text, etc), ASP.NET (System.Web), Windows Forms (System.Windows.Forms), ADO.NET (System.Data), XML (System.Xml), and WPF (System.Windows). We'll then be adding more libraries in the months ahead (including WCF, Workflow, and LINQ). The source code will be released under the Microsoft Reference License (MS-RL).
You'll be able to download the .NET Framework source libraries via a standalone install (allowing you to use any text editor to browse it locally). We will also provide integrated debugging support of it within VS 2008.
Integrated Visual Studio 2008 Debugging Support
The final release of VS 2008 will support the ability to configure the debugger to dynamically download the .NET Framework debugger symbols (and corresponding source code) from a web server hosted by Microsoft. You'll be able to configure the .NET Framework symbols to be downloaded all in one shot, or manually retrieved on demand:
When you debug a .NET application and hit a breakpoint in your code, you'll now be able to see a debugger call stack that contains detailed file and line number information for the .NET Framework classes and methods in your application:
In the screen-shot above, you can see that we've set a debugger breakpoint in my page where we are calling GridView1.DataBind(). Previously there was no way to drill into this DataBind() method to see how it was implemented.
Now with VS 2008 you'll be able to press F11 ("Step Into") and drill into the .NET Framework source implementation with the debugger:
VS 2008 will include support to automatically retrieve the appropriate .NET Framework source files on demand from Microsoft. This means that the source code for the ASP.NET GridView and BaseDataBoundControl classes above do not have to already be installed on the machine before we started the debugger. Instead, when we use F11 to step into their implementation VS can automatically download the source files from Microsoft and open it within the IDE.
By downloading the files dynamically we can also ensure that the matching source files always line-up with the particular version of the .NET Framework on your machine (for example: if you have a GDR or Service Pack Patch installed on your machine, we'll make sure to download the source file that corresponds to it).
In addition to stepping into .NET Framework code, we can also step back up on the call stack into .NET Framework source as well. For example, in our scenario above I could also double click up the callstack and review the private ProcessRequest method on the System.Web.UI.Page class:
We could optionally also step further up and into the System.Threading.ThreadPool implementation in mscorlib (which controls the thread our Page is scheduled on):
Note in the previous two screen-shots how the VS debugger's "Locals" and "Watch" windows are fully supported within both your code as well as in the .NET Framework source.
Summary
Having source code access and debugger integration of the .NET Framework libraries is going to be really valuable for .NET developers. Being able to step through and review the source should provide much better insight into how the .NET Framework libraries are implemented, and in turn enable developers to build better applications and make even better use of them.
To learn more about our source release plans and how the above debugger integration works, please check out this Podcast that Scott Hanselman and Shawn Burke recently recorded. Shawn (who drove the source project on my team) is also going to be publishing a cool Channel9 video later this week that shows using the VS 2008 integrated debugging support with it.
Hope this helps,
SAM
Source:weblogs.asp.net
Today I'm excited to announce that we'll be providing this with the .NET 3.5 and VS 2008 release later this year.
We'll begin by offering the source code (with source file comments included) for the .NET Base Class Libraries (System, System.IO, System.Collections, System.Configuration, System.Threading, System.Net, System.Security, System.Runtime, System.Text, etc), ASP.NET (System.Web), Windows Forms (System.Windows.Forms), ADO.NET (System.Data), XML (System.Xml), and WPF (System.Windows). We'll then be adding more libraries in the months ahead (including WCF, Workflow, and LINQ). The source code will be released under the Microsoft Reference License (MS-RL).
You'll be able to download the .NET Framework source libraries via a standalone install (allowing you to use any text editor to browse it locally). We will also provide integrated debugging support of it within VS 2008.
Integrated Visual Studio 2008 Debugging Support
The final release of VS 2008 will support the ability to configure the debugger to dynamically download the .NET Framework debugger symbols (and corresponding source code) from a web server hosted by Microsoft. You'll be able to configure the .NET Framework symbols to be downloaded all in one shot, or manually retrieved on demand:
When you debug a .NET application and hit a breakpoint in your code, you'll now be able to see a debugger call stack that contains detailed file and line number information for the .NET Framework classes and methods in your application:
In the screen-shot above, you can see that we've set a debugger breakpoint in my page where we are calling GridView1.DataBind(). Previously there was no way to drill into this DataBind() method to see how it was implemented.
Now with VS 2008 you'll be able to press F11 ("Step Into") and drill into the .NET Framework source implementation with the debugger:
VS 2008 will include support to automatically retrieve the appropriate .NET Framework source files on demand from Microsoft. This means that the source code for the ASP.NET GridView and BaseDataBoundControl classes above do not have to already be installed on the machine before we started the debugger. Instead, when we use F11 to step into their implementation VS can automatically download the source files from Microsoft and open it within the IDE.
By downloading the files dynamically we can also ensure that the matching source files always line-up with the particular version of the .NET Framework on your machine (for example: if you have a GDR or Service Pack Patch installed on your machine, we'll make sure to download the source file that corresponds to it).
In addition to stepping into .NET Framework code, we can also step back up on the call stack into .NET Framework source as well. For example, in our scenario above I could also double click up the callstack and review the private ProcessRequest method on the System.Web.UI.Page class:
We could optionally also step further up and into the System.Threading.ThreadPool implementation in mscorlib (which controls the thread our Page is scheduled on):
Note in the previous two screen-shots how the VS debugger's "Locals" and "Watch" windows are fully supported within both your code as well as in the .NET Framework source.
Summary
Having source code access and debugger integration of the .NET Framework libraries is going to be really valuable for .NET developers. Being able to step through and review the source should provide much better insight into how the .NET Framework libraries are implemented, and in turn enable developers to build better applications and make even better use of them.
To learn more about our source release plans and how the above debugger integration works, please check out this Podcast that Scott Hanselman and Shawn Burke recently recorded. Shawn (who drove the source project on my team) is also going to be publishing a cool Channel9 video later this week that shows using the VS 2008 integrated debugging support with it.
Hope this helps,
SAM
Source:weblogs.asp.net
Click Usability & Accessibility
An overview of what impaired users encounter when using in accessible websites.
Read more…
Collection of useful resources
PlotKit - Javascript Chart Plotting
JavaScript library for creating graphs. [via Hackszine]
JavaScript library for creating graphs. [via Hackszine]
phpMyID
A single script for hosting your own single OpenID identity. Easy to set up with Apache. (IIS with ISAPI_rewrite, hard.) Supports the sreg extension.
OpenID Enabled: Simple Registration Extension
Here's the "sreg stuff" for OpenID. Avatars aren't mentioned in the spec.
Pavatar - Recognize me!
Avatar auto-discovery standard. Seems like a natural fit with OpenID. This should be added to the optional sreg stuff.
A single script for hosting your own single OpenID identity. Easy to set up with Apache. (IIS with ISAPI_rewrite, hard.) Supports the sreg extension.
OpenID Enabled: Simple Registration Extension
Here's the "sreg stuff" for OpenID. Avatars aren't mentioned in the spec.
Pavatar - Recognize me!
Avatar auto-discovery standard. Seems like a natural fit with OpenID. This should be added to the optional sreg stuff.
Vitamin Features: Serving JavaScript Fast
Cal on caching, chunking, compression, and integrating all of the above with a workflow
Cal on caching, chunking, compression, and integrating all of the above with a workflow
User Script Compiler
Turn any Greasemonkey script into a full-on Firefox extension (Add-On). [via Spun]
PodCorps: Recording Spoken-Word Events Worldwide
Doug Kaye's latest venture.
Doug Kaye's PodCorps launches today
Jon Udell on public-service podcasting. Excellent ideas here. "This isn't podcasting to build audiences and 'monetize' downloads. It's podcasting to expand access to public discussion."
Turn any Greasemonkey script into a full-on Firefox extension (Add-On). [via Spun]
PodCorps: Recording Spoken-Word Events Worldwide
Doug Kaye's latest venture.
Doug Kaye's PodCorps launches today
Jon Udell on public-service podcasting. Excellent ideas here. "This isn't podcasting to build audiences and 'monetize' downloads. It's podcasting to expand access to public discussion."
Reflection.js
A bit of JavaScript that creates image reflections a la coverflow. Trendy!
Chatting with the father of the permalink MetaTalk
Matt and Jessamyn interviewed me for the MeFi podcast.
A bit of JavaScript that creates image reflections a la coverflow. Trendy!
Chatting with the father of the permalink MetaTalk
Matt and Jessamyn interviewed me for the MeFi podcast.
Call Recorder for Skype
For the "podcast someday" list of tools: this will automatically Record Skype Calls On Your Mac
For the "podcast someday" list of tools: this will automatically Record Skype Calls On Your Mac
Resizeable Form Fields
Firefox Add-on lets you click and drag any form field to resize. (Unfortunately, it doesn't remember your field size preference.)
Firefox Add-on lets you click and drag any form field to resize. (Unfortunately, it doesn't remember your field size preference.)
CoRD
Open source remote desktop client for Windows RDC on Mac OS X. Handy if you need to manage Windows servers from Mac. I hear it's more stable than the official Microsoft RDC client for Macs.
Open source remote desktop client for Windows RDC on Mac OS X. Handy if you need to manage Windows servers from Mac. I hear it's more stable than the official Microsoft RDC client for Macs.
Twitter and Jott Vulnerable to SMS and Caller ID Spoofing
If you associate your twitter account with your cell phone--your account is only as secure as your cell phone number.
If you associate your twitter account with your cell phone--your account is only as secure as your cell phone number.
HTML Purifier
PHP code for validating/filtering HTML input.
PHP code for validating/filtering HTML input.
Grant Execute to all Stored Procedures
handy stored procedure for SQL Server that might save your wrists someday.
handy stored procedure for SQL Server that might save your wrists someday.
Tutorial Ninjas - Hacking the Apple TV
Nice step by step guide to getting 3rd party apps running on aTV.
Nice step by step guide to getting 3rd party apps running on aTV.
YouTube - Video explains the world's most important 6-sec drum loop
the history of the "amen break", its impact on culture, and some thoughts about copyright in the sampling age.
the history of the "amen break", its impact on culture, and some thoughts about copyright in the sampling age.
Celsias: Bee Colony Collapse Disorder - Where is it Heading?
A round-up of articles about the honey bee problem that could hurt crops like apples and almonds this year. [via krazydad]
A round-up of articles about the honey bee problem that could hurt crops like apples and almonds this year. [via krazydad]
Understand Microsoft's CloudDB?
It appears that Microsoft is working on a clone of Google's BigTable codenamed Blue/CloudDB.Mary Jo Foley reports that "CloudDB is a file-system-based storage system ... 'Blue' also seems to refer to the query processor that builds on top of the cheap, file-system-based storage enabled by CloudDB."
That sounds quite similar to BigTable, a distributed database built on top of GFS.It seems hard to track down any other information about this effort. I was able to find a microsoft job posting for a senior SDE that says:
Our team is building a geo-distributed, reliable and high performance internet facing service. You will help internal and external partners to realize Microsoft's vision of seamless access to your data - anywhere, anytime, any device.
You will learn about the Blue/CloudDB storage system, you will work on an API definition, solve problems around security and Quality of Service guarantees.
Do you find it fascinating to build a service that is scalable, geo-distributed, has efficient queuing, load balancing? We will solve together problems about performance, reliability and intelligent optimization for different traffic patterns. The product will be used also by internal Windows Live Services and you will have the opportunity to interact with multiple groups in the company that need easy, efficient and simple storage in the cloud.
Join us and help Microsoft go head to head with Amazon, Google, and Yahoo in cloud storage.
From that description, it sounds like Microsoft's CloudDB may be intended to compete with several efforts, including Amazon S3, AOL's XDrive, the Yahoo-supported Hadoop, and Google's BigTable, Google File System, and GDrive.
I am not even sure if it is from Microsoft, but I did also find something that looks like a leak of some pieces of an internal document called "CloudDB Living Spec v0.51.doc". The web page mentions the needs of Microsoft services (including MSN Shopping and Fremont/Expo) and echos terminology used in Google's BigTable paper. Some selected excerpts:
SSTable's efficient data is less than 40%, column name occupy much room in each item. Maybe we should use the column id to reduce this part of overload. Sparse columns baked into the app. This scenario arises when an MSN service defines a large set of potential attributes for a type of an object, but only very few of these attributes are expected to be set on any given object.
For example ... [in] MSN Shopping ... the total set of attributes that products can have (e.g. "Pixel Resolution") is very large, but any given product only has a few (a vacuum cleaner doesn't have 'Pixel Resolution').
[A] service wants to be able to add 'attributes' to people, without having to waste space in every person for every attribute ... The most prominent example of this is Freemont --- this service wants to allow users to add their own columns to their listings. The total number of columns used across all objects can be huge (millions).
Note: Google Base advertises support (and is optimized) for cases where even a single object can have millions of columns.
9 Places to Use APIs Without Coding
Here’s a trend we’re seeing more of these days: vendor provided interactive API tools. These useful web-based applications let you test drive the methods of a given web API without having to write code. AJAX-style web forms let you choose methods and parameters, press go, and have data immediately returned in another part of the page.
This can be a great way for API providers to let developers kick the tires on their APIs and quickly get up to speed. From Facebook to Google to CNET, these tools are becoming more common and more sophisticated.
Here’s a rundown of 9 places you can try now:
- Facebook Test Console: If you have a Facebook login you can use the Facebook Test Console. Test over a dozen methods and get responses in XML, JSON, and Facebook PHP Client.
- Interactive Google Base: As they describe “This demo page provides you with a simple mechanism for using the API and learning how it works. Each Google Base data API operation has an equivalent HTTP method, so you can try out the HTTP GET, POST, PUT, and DELETE methods as you invoke the operations below.”
- CNET API Dashboard: As we reported last month CNET’s new shopping API includes this handy tool. Use it to test getting review, shopping and download data.
- Flickr API Explorer: Try-out methods of the popular Flickr API with this tool. And since you may find yourself looking at an interactive API tool but not have any meaningful data to feed into it - like when it asks you for a “photo_id” - Flickr goes one step farther by offering a list of “Useful Values” on the side of the page including photo IDs and Group IDs. Very helpful feature.
- Virtual Earth Interactive SDK: Choose from dozens of “I Want To” actions like “Show map” or “Get a route and directions”, see the adjacent map perform that action, then click on the Source Code tab to grab that exact JavaScript, or the Reference tab to get the manual page for the relevant method.
- FollowTheMoney.org: There are a lot of good implementation details in the API for this non-profit, one of which is this AJAX example with download-able source code. For more on FollowTheMoney, see our earlier coverage here.
- Amazon AWS Zone: Test drive eight different Amazon APIs. As they say “Amazon Web Services made simple.” Includes code samples, a code generator, REST and SOAP scratch pads.
- Interfax Fax Web Service Demo: Doesn’t allow you to try the whole API but gives access to the main SendCharFax method so you can send faxes. ID required.
- MetaCarta JSON API Explorer: Lets you use their mapping data API and get results back in JSON and KML.
If you’re aware of more that are not on this list you can share them in the comments.
