I just uploaded a new tutorial that shows you how to create a mobile-optimized website using HTML and CSS. The tutorial also highlights the new multi-screen development features of Dreamweaver CS5. It is important to have a strong grasp on standard web technologies as only then can you make an informed decision about when to use Flash.
New Video Tutorial on Mobile Web Development
Commentary
Leave a Comment
About the Author
Lee Brimelow is a Platform Evangelist at Adobe and lives in the SF Bay Area.
Upcoming Appearances
The last couple of minutes—from previewing on Android the end of the video—seem to be gone. The video just skips to the end. (I’m on Safari on a Mac.)
But until then, Lee, this is just terrific. Thanks.
@Arnie hmm that is strange. I just watched it all the way through with no issues. You can download the MP4 directly to view it locally and that should work.
A good starting point -thanks. I personally don’t think you should encourage the use of extraneous (clearing) divs though…
@Gordon how do you avoid using a clearing div if you are floating elements?
@Lee here are two alternative methods for clearing floats:
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
@Rasmus thanks for those links. I guess I’m so used to clearing divs that they are just second nature now. Good to know there are alternatives.
Thanks for this tutorial. Where can I find Android and Blackberry emulator?
The best way to fix the overflow of the floating image in this example is to set the property overflow to auto on the #other .story elements. In this way you don’t need to use extra (non-semantic) elements. There is a lot of informations using “css formatting context” on Google.
Great tutorial by the way
Hi Lee, maybe it’s time to start using this method for videos on your website, huh?
I can’t get any of your videos to work in Firefox 3.6.8 on the Mac. The JS error says:
Error: console is not defined
Source File: http://gotoandlearn.com/swfobject.js
Line: 204
@Tom it’s because he is targeting Firebug’s console object. I have not had the chance to look, but console is an object in Firebug. So, if you don’t have Firebug (which you should
) it will throw an error.
Jason
@Lee, why did insert your own code into swfobject? Something about handling FlashLite?
@Tom ahh good catch. That was a test version I was tweaking to see if I could detect for FlashLite. I have replaced the one on GTAL with the stock SWFObject. Thanks again.
That FF plugin doesn’t seem to convert anything to ogg. it only seems to do ogv. Does that make the “type” different. because I can’t seem to get any of these to play on iPhone. Or maybe I’m missing it.
Thanks for demystifying the new viewport meta tag for mobile devices in such a clear, concise way. By the way, Lee, what web technology aren’t you familiar with?
1) what about Flash lite 3.1 and 3.0
2) when we’ll see FP10.1 on nokia devices