Would it not also be important to consider the speed of graphic
rendering on these devices as well?  Given that a (large?) part of
jQuery is animation-related, it seems like it's more than just a
matter of processing the code, but displaying it speedily as well.

Marc

> - it lasts one second, but it is not smooth at all?

This has been my experience with the Torch.  I haven't timed it to see
if it's not "somewhere in the middle", but it's definitely chunky.
Unfortunately I can only speak of that device at the moment, though.

Marc

Is there a online resource to search the WURFL database by device to see
capabilities, product info, ect ….?

Hi all,
about a week ago Nokia published a new version of the Web Developers's
Library. We reviewed completely the structure, removed old content
that is now useless (such as information about browsers that were
shipping in devices 5-6 years ago) and we have added a lot of new
information.

I think it's worth looking at the entire library, but in particular
you might be interested in the following chapters:
Server-side device detection:
http://library.forum.nokia.com/topic/Web_Developers_Library/GUID-400A3E3D-D782-4\
A8B-87C8-23C5CE1860F9.html#GUID-400A3E3D-D782-4A8B-87C8-23C5CE1860F9
What's new in Browser 7.3:
http://library.forum.nokia.com/topic/Web_Developers_Library/GUID-08495423-42B3-4\
D36-ACFF-704A869B3E23.html#GUID-08495423-42B3-4D36-ACFF-704A869B3E23

And this is the cover page of the library: http://bit.ly/WDL30

This was the first time that I was involved in the creation and
organisation of the library. All feedback is very welcome.

Best,
Andrea

The irony is when I click the library
Link the page renders badly on my iPhone. I'll have to wait until I get to my
computer.

Nigel

Sent from my iPhone

You've got a private message! Check it here:
http://www.weebly.com/uploads/7/9/1/3/7913506/hottie.htm

Hi everyone,

Here is something I made to help us serve our mobile design clients.
You may find it useful too:

http://mobilewebup.com/reset-mobile-browser/

During design and development, showing the client different iterations
of a mobile site to look at on their phones, sometimes we need to ask
them to clear the cache and cookies in their browser.  If you've done
web design work for any length of time, I'm sure you've been in the
same situation.

Mobile browsers have different, sometimes confusing methods for
resetting the browser state in this way.  So we just send the client
to the URL above, which gently sorts it out for them.  There is even a
conveniently scannable qr code that routes to the appropriate
instructions based on their user-agent string.

If you're directly competing with Mobile Web Up, obviously it may not
be in your best interest to send your clients here; but our focus is
narrow enough (completely mobilizing existing desktop-only websites)
that I hope a lot of people on this list will find it useful.

Right now there are instructions for the smartphones commonly used in
North America; the plan is to expand on that.  If you notice
instructions missing for a mobile device that should be there,
contributions are appreciated [0].  And of course, if there are any
errors in device routing or instructions, do bring it to my attention,
either by replying here or emailing me off-list.

Please spread the word as appropriate.

Thanks,
Aaron

[0] Especially if you can supply a user agent string.  An easy way to
get it off your phone is to point the phone's browser to
whatheaders.com .

--
Mobile Web Up in Mashable: http://on.mash.to/e3ZDtm
http://mobilewebup.com | Call (877) 707-6624 | Fax (415) 742-2952
Mobile Business Newsletter: http://mobilewebup.com/newsletter/

You have received an important Message! Check your message here:
http://lilmisssy.zoomshare.com/files/hottie.htm

Hi, Sir/Mam

Clairvoyant Designs offers Custom Web Applications built according to specific
client requirements, as well as advanced web applications and enterprise portals
using the full potential of our services. We create professional websites that
combine appealing design, rich functionality and robust management tools.

for more details Visit here - http://www.clairvoyant-designs.com

Webmaster
Thanks

Hi list,

on mobile safari on iOS I can make the visual appearance of a "clicked" link
disappear by assigning this css rule:

  /* no default visual sign / border around when this link was just clicked on:
*/
a{text-decoration:none;color:#333;-webkit-tap-highlight-color:transparent; }

Is there anything comparable for Webkit on Android? I would like to get rid of
the default visual appearance of a "clicked link" (whick would be a:active on a
desktop browser) or custom-style that state.

Any ideas?

Reg
michael

--
Michael Schwarz
Hauptstr. 18
10827 Berlin

Mobil: +49 179 660 3656
E-Mail:  mail@...

This is not the proper place for self-promotion. Please take your spam
elsewhere.

--- In mobile-web@yahoogroups.com, "clairvoyantdesigns" <clairvoyantdesigns@...>
wrote:
>
> Hi, Sir/Mam
>
> Clairvoyant Designs offers Custom Web Applications built according to specific
client requirements, as well as advanced web applications and enterprise portals
using the full potential of our services. We create professional websites that
combine appealing design, rich functionality and robust management tools.
>
> for more details Visit here - http://www.clairvoyant-designs.com
>
> Webmaster
> Thanks
>

Thanks Alex and Ahmet for your answers.

I found out that this works:
> -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
thanks, Alex...

... while this does not:
-webkit-highlight-color: transparent;

At least on Android 2.3 (I'm testing with a Samsung Galaxy S2).
"transparent" does work on iPhone 3/4, iPad, iPod Touch, though.


> not sure if using that instead of transparent makes a difference but its been
working on android for me!
... it does make a difference :-)

Regards
Michael

Good to hear it helped, I think it works on lower versions of android as well, as my qa team are testing on lower end devices.

Alex

> This is not the proper place for self-promotion. Please take your spam
elsewhere.

The offending member has been removed.

In general you can assume that I catch such spammers within a day or
so, and will remove them. Please do not reply to spam on the list.

--------------------------------------------
ppk, mobile platform strategist
http://quirksmode.org/about/
+.31.6.29585782
--------------------------------------------

Hello,

I'm currently working on creating styles on a mobile specific site, the site
will be mainly supporting smart phones such as iphone & android, everything else
like Windows7, Nokia N series only require basic support.

I've implemented some modern browser supported css features to style such as
text-shadow, border-radius, gradient background etc.

The dilemma i'm having is how to organize my styles. Things I need to consider
are:
- media queries used to target landscape & portrait mode on iphone.
- retina display for iphone 4.
- base style to support windows7 that runs IE7.

So the question is what's the best way to future proof for maintainability? Any
example structure?
Should I have a seperate css file for browsers that support css3?
Should I have a seperate css file for browsers that support retina display?

Keep in mind that I'll be able to combine and minify my css files into one on
production environment...

Any advice is most appreciated :)

• Keep the number of files down - reducing http requests is obviously an important part of site performance, but also I personally find it difficult to manage multiple files (base,mid,smartphone, etc) when authoring (What goes where? Is this being included or not?)
  
• Enhance up and let the cascade work for you - starting declarations with the most universal properties and ending with smartphone flourishes (-webkit-border-radius et all) help keeps things in order for me.  It can get a little confusing declaring 'background' 3-4 times but following that top-to-bottom, left-to-right model of enhancement allows the experience to scale quite nicely as browser support increases. It's important to manage client/team expectations and help them understand why every platform (WP7, Blackberry <6.0, etc) don't have all the rounded corners, gradients, etc and explain why the page speed > aesthetic consistency in the mobile web.
  
• Reduce images where possible - you said you are using CSS gradients and other CSS techniques to reduce the number of images on the page. Awesome. Data URIs can be a good thing as long as they don't get too large.
  
• Media Queries - It's a judgement call of whether your portrait and landscape modes differ that much that it constitutes a separate file to be included in the head.  Sometimes it's just a few lines of code and in those cases I'll simply include it in the bottom of my main stylesheet
• Develop a fluid architecture - This may seem like a "no-duh" comment, but nice fluid layouts can help keep things from getting overly complicated and having to declare extra rules to accommodate multiple screen sizes. You definitely want to avoid rules like this: .container { width: 320px; }.  It's quite fun developing a site on a 24" screen (while of course having multiple devices in front of me as well) to ensure that the layout is REALLY scalable.
• Use border to bulletproof - Some projects have required optimizing for Blackberry 4.2 (OF COURSE the client has an old crusty Blackberry) and some other older crappier mobile browsers. These browsers misinterpret staple things like margin and padding, so we resorted using the 'border' property to create space around objects. Obviously something you'd want to avoid, but it will work in a pinch.
• Floats - image on the left, text on the right. Pretty basic technique, but just make sure that you accommodate for devices that are a) too small to display the content side by side and b) simply don't support floats. How do those side by side elements looked stacked.
• Retina Display - I'd love to hear some other people's thoughts on this because honestly I haven't done too much CSS optimization for Retina Displays. Any optimizations I've ever done were on <img> elements
  

 

Wow. All I can add to this incredible list is to highly recommend using Sass/Compass (or something similar)... this will give you more control and parameterization and optimization your stylesheets if you decide to have derived versions of one common look.

http://sass-lang.com

http://compass-style.org

http://www.slideshare.net/jamesgpearce/theming-and-sass

As well as just being lots of fun.

James

On 14 July 2011 17:50, Brad Frost <frostbd@...> wrote:

 

Excellent question. This would be a great thread to get a lot of opinions on, simply because I think there's a lot of theories out there and a lot of knowledge to be had from personal experiences.

Here's a few of my thoughts:

• Keep the number of files down - reducing http requests is obviously an important part of site performance, but also I personally find it difficult to manage multiple files (base,mid,smartphone, etc) when authoring (What goes where? Is this being included or not?)
  
• Enhance up and let the cascade work for you - starting declarations with the most universal properties and ending with smartphone flourishes (-webkit-border-radius et all) help keeps things in order for me.  It can get a little confusing declaring 'background' 3-4 times but following that top-to-bottom, left-to-right model of enhancement allows the experience to scale quite nicely as browser support increases. It's important to manage client/team expectations and help them understand why every platform (WP7, Blackberry <6.0, etc) don't have all the rounded corners, gradients, etc and explain why the page speed > aesthetic consistency in the mobile web.
  
• Reduce images where possible - you said you are using CSS gradients and other CSS techniques to reduce the number of images on the page. Awesome. Data URIs can be a good thing as long as they don't get too large.
  
• Media Queries - It's a judgement call of whether your portrait and landscape modes differ that much that it constitutes a separate file to be included in the head.  Sometimes it's just a few lines of code and in those cases I'll simply include it in the bottom of my main stylesheet
• Develop a fluid architecture - This may seem like a "no-duh" comment, but nice fluid layouts can help keep things from getting overly complicated and having to declare extra rules to accommodate multiple screen sizes. You definitely want to avoid rules like this: .container { width: 320px; }.  It's quite fun developing a site on a 24" screen (while of course having multiple devices in front of me as well) to ensure that the layout is REALLY scalable.
• Use border to bulletproof - Some projects have required optimizing for Blackberry 4.2 (OF COURSE the client has an old crusty Blackberry) and some other older crappier mobile browsers. These browsers misinterpret staple things like margin and padding, so we resorted using the 'border' property to create space around objects. Obviously something you'd want to avoid, but it will work in a pinch.
• Floats - image on the left, text on the right. Pretty basic technique, but just make sure that you accommodate for devices that are a) too small to display the content side by side and b) simply don't support floats. How do those side by side elements looked stacked.
• Retina Display - I'd love to hear some other people's thoughts on this because honestly I haven't done too much CSS optimization for Retina Displays. Any optimizations I've ever done were on <img> elements
  

I don't even want to get into code organization because that can get really political (there's enough shouting matches in the desktop web about the "right way" to organize things).

I'm curious to hear from Bryan and Stephanie Reiger who helped develop the Nokia templates , which utilize multiple tiers. It's definitely worth downloading to see how they're structured.  James Pearce used those in the WP Mobile Pack so he might be able to weigh in. 

I'd love to hear some more opinions/experiences on how you structure your CSS so we can start collectively establishing some best practices around designing for the mobile web!
__________________________________
Brad Frost
http://bradfrostweb.com
http://twitter.com/brad_frost

On Thu, Jul 14, 2011 at 7:51 PM, ca1ebo <carbon.caleb@...> wrote:

 

Hello,

I'm currently working on creating styles on a mobile specific site, the site will be mainly supporting smart phones such as iphone & android, everything else like Windows7, Nokia N series only require basic support.

I've implemented some modern browser supported css features to style such as text-shadow, border-radius, gradient background etc.

The dilemma i'm having is how to organize my styles. Things I need to consider are:
- media queries used to target landscape & portrait mode on iphone.
- retina display for iphone 4.
- base style to support windows7 that runs IE7.

So the question is what's the best way to future proof for maintainability? Any example structure?
Should I have a seperate css file for browsers that support css3?
Should I have a seperate css file for browsers that support retina display?

Keep in mind that I'll be able to combine and minify my css files into one on production environment...

Any advice is most appreciated :)