Website Quality Assurance Testing - html

I have recently downloaded an app I have been looking for, for quite some time. It basically spiders a website and shows references to dead links, pages etc:
http://home.snafu.de/tilman/xenulink.html.
I am finding this very useful for quality assurance of the websites we publish.
I was wondering if anyone uses a application that spiders a site like this, but also checks things such as missing ALT tags, accessbility issues and valid xHtml code.

Using the W3C validator is a good idea as well.
link text

If you want accessibility checking, the one that I know of is HiSoftware's Cynthia Says. There are some drawbacks - it only checks 1 page at a time (at least, I don't know of a way to check an entire site) and you can only check 1 page on a given site each minute.
However, HiSoftware does make commercially available tools for accessibility checking, with regards to 508 and Web Content Accessibility Guidelines. I've never used any of these tools, though.

Selenium IDE is an automation QA plugin for Firefox. It is easy to configure using a single HTML table to write rules.

For many things you are looking for I would check out https://www.screamingfrog.co.uk/seo-spider/ tool. There is a free version available as well if your website is not too deep.
For accessibility testing check out https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US Chrome Add-on.

Related

Methodological concerns about HTML5, SEO, and backwards compatibility

I defied all conventional knowledge, and wrote my HTML5 site first. Now I am writing the HTML4 site and adding a script which detects old browsers. The question I have is mainly regarding web safe fonts. I am aware that it is best practice to use HTML instead of images of pretty text, for the benefit of SEO. However, since the HTML5 website exists with the HTML in the headers, I wonder if it is safe to use images to represent those headers in the HTML4 version of the site. Simply put, will my web client's indexing suffer? I feel that the HTML5 version will ensure good ranking, but I wanted to put it to the community and get an opinion.
Second question, should I create the more accessible version in HTML4 or XHTML?
Finally, is there a simpler way to make a new site backwards compatible, and still be able to make use of newer technology?
After a fair amount of research, I found that it is not so unusual to create a site in HTML5, and implement items for the purpose of graceful degradation.
At this site: spacebug.com/gracefully-detect-old-browsers-and-fallback-from-html5/, the authors recommend not using PHP user agent variables to detect browser capability. It says that there are too many user agents and that headers change, etc. Check out the link for their in-depth explanation. It offers that the right way to do it is to use javascript to check for certain capabilities. Since my purpose is to either render it in HTML5 or render it in XHTML, this makes my life pretty simple.
Once I found that javascript was the way to go, a simple Google search led me to this site: diveintohtml5.info/detect.html. This offers a number of methods for detecting browser functionality as it relates to HTML5.
For those who are not as savvy with the code, or for those who are looking for a quick solution, the second website also offers a link to modernizr.com, which is an "open-source MIT licensed javascript library that detects support for many HTML5 and CSS3 features."
So, thank you all for your input. I have learned a great deal from this experience, and I am hoping it will make everything much more user friendly and efficient.
Happy developing!
Kat

How can you find out if a specific HTML 5 feature is implemented in a specific browser version?

I imagine there must be out there a website that collects information about HTML 5 feature and what browsers version started to support them.
This might be a good way to decide based on your website profile, if you can apply that HTML 5 feature without a fallback for your visitors.
Do you know such a site/resource ?
For example I want to know what browsers support the multiple upload feature for inputs and what browser version was the first.
Update
I'm not pleased with the sites suggested so I'm opening a bounty.
Suggestions so far: Html5Test, Caniuse, modernizr.com, QuirksMode
Update 2
Some people don't understand the question. I need to implement the multiple upload feature. I know from analytics what browser are they using ( I know this is not 100% correct ).
I'm willing to sacrifice some of the visitors by not offering some advance features but I need to understand how big is this procent. I'm NOT trying to DETECT in anyway the browser. It's a similar approach with other sites that dropped IE 6 support.
So please don't talk about bad practice.
Try to look at Html5Test or caniuse.
If it's server side, you can analyze user agent to find out if client's version supports HTML5. Wikipedia is your friend.
If it's client side, there's Modernizr library.
A quick search gave me this interesting result (reproduced in several blogs): http://www.findmebyip.com/litmus/
And you can may also want to take a look at this list of how to detect each feature: http://diveintohtml5.ep.io/everything.html
Here is another website, quite incomplete but verbose and "work in progress" as of March 2011, so it might be worth keeping an eye on: http://html5accessibility.com/
This one is off topic, but since I found it, I add it. CSS compatibility in IE browsers (very extensive): http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
And here you can find info specific to the gecko engine: https://developer.mozilla.org/en/HTML/HTML5
And, of course, MDC has compatibility tables for each feature, but separated in different pages, not as a table, e.g.: https://developer.mozilla.org/en/HTML/Element/input
http://www.modernizr.com/
HTML5Test.com collects the information but they don't give detailed reports for perusal.
A good reference site for some stuff is http://www.browserscope.org/ but that doesn't go into a lot of detail with HTML5 specific support
Another source of related stuff is http://w3c-test.org/html/tests/reporting/report.htm which is creating a set of HTML testing tools that can be run.
You or someone who wanted to create this information could use these tests and then store the UA String of each browser that hit the site with the results of each test.
Then you could just find the earliest version of each browser type that a feature successfully run on.
I think this information is stored in the databases of the sites mentioned but they just don't display it which sort of sucks. Maybe try emailing them and suggesting they add these reports.
Take a look at caniuse.com, it’s exactly what you are searching for.
QuirksMode is also a great resource, and there is an entry for multiple files input.
My vote is for:
http://www.findmebyip.com/litmus
Which i found via this blog:
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
You should try this website. I hope this is what you were looking for.

Choosing a technology... why not Flash?

I want to make a site from scratch, and Im considering to use Flex to make a R.I.A instead of the standard approach (xhtml + css + some ajax).
The kind of site I want to make is something like e-bay, but less complicated.
But.. I know that 95%+ of the sites like that are built in the previous mentioned techs... so, what are the cons and pros if I want to make a pure Flex site?
Thx.
If you write an entire website in Flash, the entire website lives at one URL. (Short of mucking around with whatever Flash provides to let you offer deeper links.)
Whereas a website written in HTML, unless you go mad with your AJAX, lets people link to the stuff they’re actually interested in, like unicorns:
http://cgi.ebay.co.uk/DESPICABLE-ME-AGNES-Unicorn-Doll-Plush-Character-Doll-/180602861597?pt=LH_DefaultDomain_0&hash=item2a0cc4f81d#ht_1755wt_907
Or for a non-eBay example, Stack Overflow questions:
Flash for business web applications - why not?
HTML also has a pretty standard and understood user interface: links, and form controls. (Mainly links.)
Flash doesn't work on iPhone/iPad. End of story.
Other reasons: not a web standard, often quite slow, not good for SEO, etc.
It requires users to have a proprietary plugin which some users don't want and other users can't have (since isn't available for all platforms (iOS being a key example)).
It also has performance and stability issues on some platforms (OS X and Linux being prime candidates).
While some search engines have started to index Flash content (so long as it exposes the information), the results aren't as good as for content rich HTML sites.
You can do that simply using traditional xhtml + css + jQuery (or any JS framework if you want to increase UX). Flex won't do much in your scenario.
In my experience, performance is not a real issue unless you play video - one can write bad programs in JavaScript, too...
Your pros are mostly on the development side: You can have a great looking site quickly, and you can almost completely forget about browser incompatibilites.
You rely on the customers having the plugin installed, though, and you rely on Adobe's technology for development and playing of the content.
If this is not important to you, and you can afford to do without all iPhone and iPad users, accessibility and standards compliance... go for it!
Flex is good if you want to install as an application using Air. ebay actually has a RIA version, or at least they did for a while.
There are several concerns with a Flash site, some of which Adobe has addressed in the last couple of years.
One is accessibility. It is more difficult to make a Flash site accessible to the visually impaired, who use screenreaders.
Related, people like to be able to copy and paste content, as well as print. With standard web pages, the developer need do nothing to support this, it just works from the browser. With Flash, you'll have to take care to make your text content selectable, and I'm not sure a user could ever select a section of text + images. I've never done it, but I can only imagine that implementing printing ability in your Flash site would be nightmarish, at best.
Another is linking and addressability. For most sites, you can copy or at least get a link that you can share or save to get back to where you want to be. With Flash, you usually go to a single address and then the rest of of your experience happens inside the Flash "window" and the browser isn't actually navigating any pages. It is far more difficult to implement this ability in a Flash site.
A Flash site is usually very slow to load, especially the first time, and page load times are immeasurably important to a site's success.
Finally, you've perhaps heard the furor over the last couple of years about different vendors supporting or not supporting Flash in their products/devices. An all-flash site would be completely inaccessible on any iPhone or iPad, for example, which do not support Flash at all. Furthermore, some employers do not allow plugins like Flash to be installed on work machines, so you'd eliminate that portion of possible traffic, as well.
Nobody has yet mentioned Silverlight.?
I mostly agree with Jay's answer concerning accessibility, but as a further note would like to add that development in Flex/Flash vs HTML/CSS/JS could be more costly not only in terms of money but also for maintenance. Many Flex/Flash devs typically charge a higher price and their dev tools, which are necessary for compilation, usually aren't free, compared to HTML/CSS/JS devs, who often use freely available text editors.

What to replace FrontPage with?

I use FrontPage for two different tasks; authoring html help and authoring a couple of websites. The websites don't require a lot of stuff -- they are there to disseminate a bit of information to a couple of small audiences.
FrontPage has been quick and easy for these tasks. WYSIWYG is good for these jobs and I like being able to click on links to quickly bring up other pages in the editor.
I've been exploring all sorts of options. tools that work online such as Kompozer make editing the html help difficult (at least, I haven't found a way around) and other html-level tools are just too much work. Tried nVu, Kompozer, Aptama, Komodo, Bluefish and so far, unless I'm missing something, I'm not sold on any of them.
I'm about to take a look at SeaMonkey but wondering if anybody has any recommendations. Or should I go back and look at those other tools again -- maybe I missed something?
Notepad++
I think the natural upgrade path would be Microsoft Expression Web.
People still use FrontPage?
I switched a couple of years back to DreamWeaver and never looked back.
Something to consider is that you could deploy these sites as wikis (which don't have to be publically editable) and edit them directly on the web in your browser. This would give you the ability to click around and do pretty much wysiwyg edits. It would also make it easier to maintain larger collections of data and to make new pages. You also don't really have to do any HTML at all because wikis mostly come pre-HTMLed (and CSSed and Javascripted), you just need to fill in the content.
I should note that this won't work if your webpages are deployed statically on a restrictive shared hosting account, but even most shared hosting supports installing things like wikis these days, so hopefully this is something you can look into.
I should also note that this probably isn't the best way to do local HTML help files, but if the HTML help is online, this is probably still a good choice.
I'm making this community wiki so others can add links to other wikis if they like or add more info on why you might want to or not want to use a wiki for this purpose.
Some wikis to consider:
MediaWiki - The wiki behind wikipedia
MoinMoin - Implemented in Python and popular in that community.
TiddlyWiki - Implemented in Javascript and runs on a single page. This is probably the most different wiki that's out there. Some love it, some hate it.
NVU and Kompozer both are best suited for you. NVU is my personal choice. Choose your poison. :)
FrontPage has been replaced by SharedPoint Designed in the Office suite.
You could also use Microsoft Expression Web if you can have it.
Drewamweaver or MS's Visual Studio/Web Developer Express will do the trick. They're both overkill (especially MS's tools).
I also think MS has (free) HTMLHelp. It's out there, but I don't know if it'll produce the files you need.
It depends on what kind of pages you are designing. If you are using Adobe Flash, Dreamweaver would be the best option but I would recommend "Microsoft Visual Web Developer Express". I am currently using it and totally love it from the bottom of my heart.
I'd say Dreamweaver, but last time I looked there was still bloated code, not as bad as the MX days mind.
Smashing Magazine has a list of WYSIWYG tools that would be worth a look :
http://www.smashingmagazine.com/2008/05/06/25-wysiwyg-editors-reviewed/
I persuaded my friend to ditch Dreamweaver for NetBeans, took a week or so but I got a pint out of that :)
You might look into Aptana (http://aptana.org) which should provide everything you need. I think it even has a WYSIWYG editor, though I would really recommend learning html instead.
I would use Notepad++ for the simpler things, and Dreamweaver when working with other Adobe products. Notepad++ is simple and has a lot of great features. Dreamweaver is huge and will take some getting used to.
Try dokuwiki. I've implemented a wiki/manual/documentation for my app in a week. It's very simple n easy installing. You just need PHP, no database (mysql), the information is stored on files. Give it a try.
My wiki implemented wiki doku: wiki.vigo.com.br
Microsoft Visual Web Developer Express perhaps? http://www.microsoft.com/express/vwd/
Works well, and it's free!
Something similar to FrontPage is Adobe Contribute. It does cost $199, but if you're looking for something as simple as FrontPage, it may be a good option for you.
A freelancer web designer I work with will setup clients who want to make simple HTML edits to their sites with it and they've all been pretty happy. They're all non-technical people.
Dreamweaver is good, but however using the WYSIWYG may have problems getting consistency when viewing between IE, firefox and safari.

Can the site built entirely in Flash be still SEO-friendly and visible in search engines? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
My website will be basically selling services; will my SEO ranking still be affected if I embed the Flash site in a blank html page? I am at that critical point where I am ready to upload the site but I am just having second thoughts about the ease of doing business with Flash.
Ignoring the SEO implications of an all-Flash site, unless you're building games, or I have an extremely strong desire to buy what you're selling, I will turn back immediately if I find a website built entirely out of Flash.
Nothing against your programming skill; I just have rarely seen such a site give me what I want. The name is often apropos.
Search engine crawlers can't crawl flash sites, so your SEO rankings will be based off the non-flash part (the blank html page). Personally, I also don't really like the user experience of a flash-only site.
Google and Yahoo! have added flash crawling functionality to their engines recently.
http://www.adobe.com/devnet/flashplayer/articles/swf_searchability.html
From a SEO perspective you're fine on that front. Still..your page will need a DOC TYPE, Page Title, etc to remain SEO compliant.
IF your target market is users browsing your site from a laptop or desktop you should be fine. You may want to include a flash-free option for users accessing your site on a mobile phone or with javascript/flash disabled.
For example, You can run a browser sniffer to redirect any user agents accessing the page on Safari via an iPhone OS.
Other than that Flash does offer some nice flair to a site. If you can give alternatives to users that don't like the application then I say do it.
It can certainly be done well. I've seen some pretty cool Flash-powered stuff being run by some pretty big-name companies, do a search for HP's Photosmart page for instance.
Look: there's a lot of information out there about Flash and SEO, and much of it is out of date. Google rolled out "official" flash support about a year ago, and they've been refining it ever since. Google will index your Flash site, but exactly what gets indexed is a bit of a black box so it always helps to have HTML alt-copy.
Never, ever build a full-flash website without using SWFObject for embeds and always try to use SWFAddress to enable Flash Deep-linking. There are ways to make this work and work well - a lot of people don't know that and have a deep-seated hatred of all things Flash because they were irritated by Splash pages in 2002. There's nothing to be done about them.
But if you want to use Flash, go for it - just do a lot of homework and test your work.
Whether or not it's business suicide depends on how much of your revenue is dependent on getting referrals from search engines. Your search engine ranking will certainly be affected if you have an HTML page in which you simply embed some flash.
Could you implement an alternative more static site, by scraping the main content from your flash?
all web applications should be made from the point of view of accessibility, no matter what the scripting language used at the time. If you use a nice script like SWFObject then you can populate your page with "alternative content" to the flash page which the search engines will crawl. this will also allow any browser that doesnt have flash to have a look at the website, even if you dont make the whole thing as "pretty" in HTML.
two birds as they say.
I don't know whether you've considered this or not, or whether it applies to your circumstances, but you might lose out on business from the visually impaired. Unless I'm mistaken, I don't think there are any screen readers that operate on Flash.
I think it depends on what kind of business we are talking about.
For most, I would say don't do it!
But there are ome kinds of sites where I think it is appropriate, if done very well. For example if you are in the business of art or design, or are showcasing a product/service where art or design is key.
As an example:
Volkswagon's GTI Project (a large part of what cars are about is design)
Flash has fallen out of favour the last few years with a lot of people. Initially it was because search engines didn't crawl it but these days it's mainly because 'flashy' effects can be done with javascript engines like jquery, scriptaculous or mootools.
Having said that I can tell you that nearly every business customer I go to still wants flash on their site and most casual web users don't give two hoots what a site is built like as long as it works, is fast (something kinda tricky to do with flash) and is what they want to look at.
I say go for it and see how the site does! I'm sure if you use analytics for a few weeks you will know whether your site is doing well or not.
Best of luck with it :)
For some reason Motorola made their new Droid site all in Flash.
This is a good article about how dreadful it is, and the drawbacks:
newmedia article
There are a ton of good reasons to use Flash sparingly. It's good for what it does well and dreadful for entire sites.
Ok so first of all, perspective, my primary domain is Flash and system architecture, I and the company that I work for at present are all about creating online 'digital experiences', engaging online content.
This is NOT applicable to selling services, e-commerce, and general information based sites, as much as it pains me to say that. There is current a massive backlash against flash due to the arrival of javascript effects and the canvas tag, I'm going to be bold here and say that anyone who thinks they can replace x years of plugin development and and media experience by giving html/javascript devs a div they can draw into are simply misguided (and you can show me all the chrome experiments you want but its still not going to be pixel bender or native 3D support).
So with that said, in this climate you've got to play to each formats strengths, you want slick, stylised SEO'd content that is accessible and concise, html with progressively enhanced javascript is a no brainer. You want a web app that people can use easily, search and build a micro-community around then googles GWT (other js frameworks are available) is the way to go. For everything in-between and beyond theres Flash.
I'm not giving Flash a kicking (it's my lively-hood after all), far from it, in fact I'm actively encouraging people to use Flash only for the kind a digital master-pieces it was made for, if you can do it in HTML, why would you do it in Flash? Sure in most cases it actually works out lighter than JS, and it's cross-browser compatible, but these are small issues that will only be ironed out in time, HTML was designed for the web, Flash was designed as a plugin.
In coming years we will see Flash on a multitude of devices with the open-screen project and the iphone-flash cross compiling, it is becoming a platform for multimedia development in general, where-as the web is becoming more service orientated platform, web apps running off searchable indexed content in the cloud. If your website is intended for the web, then make it for the web.
(Just realised that this was a bit of a rant, apologies)
If you created a web site with Flash, user will not be able to use basic browser functions and extensions such as searching, spell checking, sharing a particular page via Twitter, etc.... (And cannot access from iPhone.)
Depends on the site in question. If its just displaying marketing collateral or case-studies then a "flashy display" would be fine. Have seen couple of such websites in the past and the better ones have impressed me.
You should also consider how frequently content would change and how it impacts your design in Flash vs say design in html. The search engine ranking aspect also will matter.
You won't get any business from me.
Nothing says 'amateur' on the web like pointless Flash.