Image for post: Web design test tools

Web design test tools

This is a very very interesting topic about web desgn and the large amount of possibilities we have writing once for all the HTML source code and using it on desktop and mobile devices. We can work less and have more! This is the aim and the management of our apps and websites will be more homogeneous and... happy! But I suck! And as a problem solver as I am, I've found many many problems! Use HTML5 & CSS3 and no  accessibility: no problem! Use all instructions and options you need! Using HTML XHTML and CSS and pretending accessibility: ALT! You must work carefully and you cannot use all media queries and you must work on the size of your devices.

EXAMPLES

Some beautiful website design:

Of course you can find more templates on the web and on Theme Forest.

FLEXIBLE GRIDS FRAMEWORKS

Well these frameworks are great but they still have the problem of accessibility and they work great and different CSS files. Maybe you don't need a framework for your project, otherwise use your favorite without problems.

With responsive web design principle you can write code for apps and websites and view correctly in all browsers and mobile devices. It's not easy and we must respect all browsers and resolutions on screen. So how we can make this possible? If you are familiar with HTML5 and CSS3, we can use Media Query libraries without problem but I want to use a simple HTML or XHTML and CSS and I want the impossible: let it work on IE6!

OLD HTML ELEMENTS, NEW PROBLEMS!

I have many problem to find the correct script with the right markup and all html or xhtml validation with accessibility. For a simple website you need:

  • Typography elements and the correct font
  • A correct and responsive navigation menu
  • An accessible modal box for contents and photo above all: fancybox and lightbox are not accessible and for the CSS validation, you have to use some good lightbox clone like Colorbox, Superbox, Facebox, Thickbox or Lightview. Check out the CSS validation! Here is a complete comparison of lightbox clones.
  • Forms: even for a single website you really need to have the right CSS styles for the forms. The input text style must be adaptive and right positioned on various screens.

MOBILE FRAMEWORKS

TOOLS for tests and debug

MOBILE BROWSERS 

A great website with all html5 browsers informations: mobilehtml5.org

BROWSER TEST TOOLS

I just had a post with html5 experiment and Chrome experiment but I want to keep an eye on other browsers and see how fast all HTML5 features are evolving. How much links, games, canvas experiments or web socket worker can you find? I want to test the behaviour of the common browser, their last version. In some case I have read about incredible games compatible with IE6! Do you think this is impossible? I think it's better to look out the newest version of Chrome, Firefox, IE9, Safari and Opera. No time for cheating. Look those following stunning effects with your eyes.

IE

Some interesting apps

Tags