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:
- Smashing Magazine, the incredible, elastic and responsive layout for different screen size. They used different css and a single javascript file with all libraries
- Nathan Staines
- Boston Globe
- Barack Obama
- Foodsense astonishing layout design
- Mediaqueri.es, a gather of links of stunning responsive projects
- Build with Monumentum
- StoneHenge Veterinarian Hospital: White gray multicolor with accordion and incredible variety of the elements
- Bloom Interior design: pure with gray with black logo and a double menu on the "about" page.
- Macdonald Hotels, wonderful hotel engine with incredible responsive design.
- Tympanus, tutorials, development etc. Layout azure, white
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
- JQuery Mobile: probably the best web framework for websites on mobile version.
- JQtouch
- Sencha
TOOLS for tests and debug
- Responsive design test
- Screenfly
- Resize my browser: different size browser means different views on responsive web design :)
- Responsive pix
- Bookmarklet
- Code Bomber Resizer
- Proto fluid
- Studiopress design tester
- Mobile Emulator
- iPad Peek
MOBILE BROWSERS
A great website with all html5 browsers informations: mobilehtml5.org
- Fennec, the firefox browser for Android
- Firefox for mobile devices. Available for Android, Nokia N900 and Iphone
- Ozone, a browser on S60
- Phonegap
- Netfront
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.
- World of Pacman: incredible canvas effect on Pacman game!
- Mozilla Hack Hardware Acceleration Stress test
IE
- Microsoft IE test drive - Real world Diagrams
- Fireflies graphic effects on your browser
- Paintball
- Fishbowl
- Here is the IE 10 Preview!
- ... and a great test for your browser and CPU! http://labs.flog.co.nz/raytracer/
Some interesting apps
- Iconza: an application to create and save various icons using custom colors
- Aviary: html5 photo editor
- Muro Deviant Art, a sort of Windows Paint on the web by DeviantArt
- An event apart: a gallery apps and html5 experiments
- Sketchpad: another Paint clone