@@ -174,12 +174,19 @@ The last step of the puzzle is to run the site through <a href="http://ready.mobi">Ready.mobi</a>. This will help give you a sense of how good your site will look on a mobile. I missed a few small things, such as a closing </a> tag and not including a <fieldset> tag in the search form. These things may seem rather pedantic, but ensuring that your page validates against Ready.mobi is a good way to ensure that there are no upsets to users on certain devices and also to test against any caveats that you may have missed. It's a free service, there's no excuse not to use it. -The sample mockups that accompany this article all get a score of 5 (Good) on Ready.mobi. There are a few warnings, but these I can live with for the sake of my site. I've covered all of the major factors in .mobi compliance. The important thing is to get a balance of functionality with as much compliance as possible. You can check out the compliance for the three pages here. <a href="http://ready.mobi/results.jsp?uri=http%3A%2F%2Fdotmobi.rslw.com%2Fbrowse.html&locale=en_EN">Browse</a>, <a href="http://ready.mobi/results.jsp?uri=http%3A%2F%2Fdotmobi.rslw.com%2Fsearch.html&locale=en_EN">Search</a> and <a href="http://ready.mobi/results.jsp?uri=http%3A%2F%2Fdotmobi.rslw.com%2Fview.html&locale=en_EN">View</a> - -You can also <a href="http://mobiforge.rslw.com">view the sample site</a> or <a href="http://github.com/paulca/design-article-site/tree/master">check out the source code on Github</a> - All the HTML, CSS and Javascript for this article was prepared using <a href="http://macromates.com/">TextMate</a>, but any good text editor will do! +The sample mockups that accompany this article all get a score of 5 (Good) on Ready.mobi. There are a few warnings, but these I can live with for the sake of my site. I've covered all of the major factors in .mobi compliance. The important thing is to get a balance of functionality with as much compliance as possible. You can check out the compliance for the three pages here. <a href="http://ready.mobi/results.jsp?uri=http%3A%2F%2Fdotmobi.rslw.com%2Fbrowse.html&locale=en_EN">Browse</a>, <a href="http://ready.mobi/results.jsp?uri=http%3A%2F%2Fdotmobi.rslw.com%2Fsearch.html&locale=en_EN">Search</a> and <a href="http://ready.mobi/results.jsp?uri=http%3A%2F%2Fdotmobi.rslw.com%2Fview.html&locale=en_EN">View</a> + <h2>And finally: ship it!</h2> -My final message is this: design for mobile devices is not as hard as it might seem at first. Using a few simple techniques, \ No newline at end of file +My final message is this: design for mobile devices is not as hard as it might seem at first. Using a few simple techniques, and following a few simple rules, taking a cue from exemplars such as Google, Facebook and Twitter, attractive, useful mobile sites and be put together fast and efficiently. Here are some pointers to take away: +<ul> + <li>Sketch things out first, focusing on prioritising the important elements</li> + <li>Keep your code clean and simple, that way it will translate well to mobile devices</li> + <li>Use javascript wisely and responsibly</li> + <li>Use HTML validators and Ready.mobi to ensure your code and site are standards compliant</li> +</ul> + + +If you want to use any of the code from this article as a starting point, you can <a href="http://mobiforge.rslw.com">view the sample site</a> or <a href="http://github.com/paulca/design-article-site/tree/master">check out the source code on Github</a>. \ No newline at end of file article/mobile-app-design-article-part-2.html 687974ec79741dcbda78dd556b0cea45b234cfc5 90bb774075a07302fc114a6ae1d64116800f1105 Eoghan McCabe eoghanmccabe@eoghan-mccabes-computer-3.local http://github.com/paulca/design-article-site/commit/a63685325139c939e83e7da8f409691a0ed30826 a63685325139c939e83e7da8f409691a0ed30826

2008-10-02T02:57:43-07:00

Merge branch 'master' of git@github.com:paulca/design-article-site c1cdb84146c725c112f34d0f96f16dee6313cfbe Eoghan McCabe eoghanmccabe@eoghan-mccabes-computer-3.local