37.
the importance of WebKit... open source licensed under the GNU Library General Public License excellent standards support including HTML, CSS3, SVG, etc. innovations often contributed back example: HTML5, CSS animations, SquirrelFish, etc. adopted by many leading companies including Apple, Nokia, Samsung, Google, Palm, etc.WebKit used in many mobile operating systems including iOS, Android, webOS, Bada, Symbian, etc. btw - “There is no WebKit on Mobile” by @ppk http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html

38.
the importance of OperaMini... free costs consumers absolutely nothing a full-web experience supports Ajax, zooming, tabbed browsing, etc excellent standards support based on the same code-base as the Opera browser OperaMini available just about anywhere on JavaME, iPhone, Android, Windows Mobile + more an extremely eﬃcient browsera proxy server ﬁlters, compresses & pre-renders content usable on older devices breathe new life into those antique devices... very important

41.
also availabl e for Android ... OperaMini is great for browsing the web on iPhone when your connection stinks. Which is unfortunately is fairly often in my ” case. – @jonathanstarkhttp://www.ﬂickr.com/photos/johanl/4424185115

70.
once again why are we writing for only one browser...2000 2010 ...is WebKit the new Internet Explorer?

71.
“This site works best in Safari 4” ” is ok where “This site works best in IE4” wasn’t?!? Open standards or double standards? – @csssquirrel via @brucelhttp://www.ﬂickr.com/photos/pjanvandaele/3990379048

72.
If you want to use the web on a ” mobile device, is the purchase of an iPhone the cost of entry? or Android device this design can work on *many* more devices...let alone only one device?

73.
as per my highly sophisticated mobile web triage process... ;) Good Could be improved Needs to be improved let’s make it more accessible...http://colly.com/

74.
3 one style sheet w/@media queries 4 jQuery used only for animation... 5 same images used for all screen devices... only a few issues... 2 well structured, meaningful markup Good4 Javascript animations tend to work poorly on the majority of mobile devices... Could be improved Needs to be improved

78.
2 well structured, meaningful markup... use <header>, <h1>, <p> and other semantically meaningful tags to provide basic structure *Note: this is not from hp://colly.com recreating existing <tags> <div class="body"> is not cool <div class="header"> <div class= "h1"> <span>Hello World!</span> </div> </div> <div> soup... <div class="body">HTML <span class="emphasis">can actually be</span>meaningful. </div> </div> soup is best served in a bowl... without a basic, meaningful structure you will need to re-create many existing properties

79.
2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the ﬁrst @media query...

80.
3 all-in-one stylesheet with @media queries... a single css ﬁle is network eﬃcient, but often includes unnecessary style data for mobile devices...<link href="screen.css" type="text/css" rel="stylesheet" media="screen" /> ....towards the end of ‘screen.css’ we ﬁnd the @media queries mobile speciﬁc tweaks are added at the very end, and only through @media queries...@media (max-device-width:480px) and (orientation:portrait) { ...

104.
1. mobile ﬁrst2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the ﬁrst @media query...

105.
3 all-in-one stylesheet with @media queries... a single css ﬁle is network eﬃcient, but often includes unnecessary style data for mobile devices...<link href="screen.css" type="text/css" rel="stylesheet" media="screen" /> ....towards the end of ‘screen.css’ we ﬁnd the @media queries mobile speciﬁc tweaks are added at the very end, and only through @media queries...@media (max-device-width:480px) and (orientation:portrait) { ...

107.
1. mobile ﬁrst2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the ﬁrst @media query...4. progressively enhance using JavaScript and @media queries

108.
4 jQuery/JavaScript used only for animation... jQuery is still a rather hefty library for use on mobile devices...<script type="text/javascript" src=".../jquery.min.js"><script><script type="text/javascript" src=".../scrollto.js"><script> animation in JavaScript can be very taxing on mobile devices...

111.
look ma, no jQuery? from a time before jQuery... Twier?http://www.ﬂickr.com/photos/wordridden/2474879344

112.
then again, do you really need javascript?*none of these services relied on Javascript when they ﬁrst started...

113.
1. mobile ﬁrst2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the ﬁrst @media query...4. progressively enhance using JavaScript and @media queries5. adapt content (especially images) appropriately for each device

114.
5 same images used for all devices... one size rarely ﬁts all...ul li#biography a span.label { background: url("../pig.png") repeat-x center bottom; } 16 Kb also adapt content used in <img /> tags we should also adapt images found within the markup...<img src="butterﬂy.png" width="200" height="160" alt="butterﬂy" /> 16 Kbhttp://colly.com/

115.
5 images adapted appropriately for each device...ul li#biography a span.label { background: url("../pig-small.png") repeat-x center bottom; } provide appropriate sized images for various devices 6 Kb also adapt content used in <img /> tags many CMS’s such as WordPress provide a means of ﬁltering HTML before it’s sent to the client<img src="butterﬂy-small.png" width="100" height="80" alt="butterﬂy" /> 6 Kb be sure to update the width and height aributes accordingly services such as http://tinysrc.net can automatically resize + compress your imageshttp://colly.com/

116.
we could also rethink the <img />* tag... one image can have multiple source ﬁles, each for an appropriate context<img alt="butterﬂy"> <source src="butterﬂy-small.png" width="100" height="80" /> <source src="butterﬂy.png" width="200" height="160" /> <source src="butterﬂy-large.svg" width="400" height="400" media="min-device-width:320px" /> image formats, and aspect ratios</img> could be modiﬁed as required and possibly even include media queries... *I’m just dreaming here, this doesn’t currently exist...

124.
6 fonts often not supported on mobile sprite image not used 6 on mobile devices... 6 images not used on mobile devices... only one real issue... 3 a single (and compressed!) style sheet2 well structured, meaningful and compressed markup Good simple DOM scripting without Could be improved 4 large Javascript libraries Needs to be improved

125.
1. mobile ﬁrst2. use well structured, meaningful markup3. the absence of support for media queries is in fact the ﬁrst @media query...4. progressively enhance using JavaScript and @media queries5. adapt content (especially images) appropriately for each device6. compress content where possible, and avoid sending unnecessary data

126.
6 display:none still loads resources... don’t expect mobile bandwidth to be free...@media (max-device-width:767px), all and (max-width:449px) { ... .speaker-carousel { display: none; all of the speaker-carousel images are actually loaded, even though they are never displayed on mobile devices... }

127.
images not used on @font-face not supported mobile devices... on most mobile devices... 367.35 KB 93.63 KBhttp://2010.dconstruct.org/

132.
1. mobile ﬁrst2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the ﬁrst @media query...4. progressively enhance using JavaScript and @media queries5. adapt content (especially images) appropriately for each device6. compress content where possible, and don’t include unnecessary data

133.
why even bother... I’ve seen that look...http://www.ﬂickr.com/photos/eldret_99/3311540632