Archive for March, 2008
|Quick note on mobile web design
Monday, March 31st, 2008
Before, you check: no, I haven’t made a handheld style sheet for this site yet, hopefully in the near future.
Anyway, I’ve been reading up on some user interface principles in the past few months and have been talking up designing for mobile devices. First, I was looking into Fitts’s Law (I’ve seen it spelled a few different ways, so I just chose one and went with it) which wasn’t meant to apply directly to the web, but is still very useful in relation to link size, deceleration, and general usability issues. Then reading up on some Mediatyping on Mezzoblue. And I started dumping all that stuff into the research section of CSSKarma, mainly so I could keep track of it, but also to try and centralize some of the happenings on the web and show some of the better resources I’ve come across, but that haven’t made it to the lab yet.
I’ve been speaking pretty frequently about mobile design/development and there’s one particular aspect of it that seems to escape a designer’s mind in almost every conversation: a finger, while far more accurate than a mouse, is around 10 times larger. Very often, you get something like this:
I have no idea who’s finger that is, got it from Google images.
This seems like common sense, but you’d be surprised how many times people have trouble hitting a small link on their mobile device because it doesn’t translate from the regular web browser well. It’s true that the iPhone/iPod touch have that cool zooming feature, but it’s still kind of a pain for browsing a site. Fitts’s Law, as part of it applies to link size (target area) is very useful where it basically says that increasing the size of a small object will improve hit accuracy, but only to a point (increasing the size of a large object will not necessarily increase accuracy).
I really recommend reading up on Fitts’s Law. It’s pretty useful, especially in a time where the future of web design is moving towards mobile devices (can the future move?).
General handheld style media: media=”handheld”
iPhone/iPod Touch style media: media=”only screen and (max-device-width: 480px)”
Just some stuff to remember while you’re designing for the mobile web
with ease,
Tim
Tags: CSS, fitts, mobile, usability
Posted in Browsers, Web Development | 3 Comments »
Manipulating Opacity
Wednesday, March 5th, 2008
Any one who has worked with CSS opacity has, most likely run into this problem. Using:
div{
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
to make a transparent background. It works great in all browsers, but have you ever tried putting text in that div? Right, it applies the opacity to everything inside the div as well. So then you try something like this to bring the opacity level back up to nornal:
div h1{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
That, in theory should work, but it doesn’t. So then you try to up the opacity to 140 & 1.4 to try and account for the extra transparency… but that doesn’t work either. So you settle on using a small opacity level to read the text or use a background image.
Thanks to a challenge issued by a friend at Sporting News we now have a technique, without using any extra markup, to have your opacity without dimming the “containing” text. Why is containing in quotes? Well, you’ll see.
First off, here’s the live example
CSS
body{
background:#5A6163 url(bg_floral.gif) no-repeat 0 0;
}
a#skip-link{
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
background:#000;
display:block;
height:8em;
margin:70px 0 0 0;
text-indent:-9999px;
}
div#branding{
position:absolute;
top:70px;
height:8em;
width:98%;
}
div#branding h1{
font-size:1.8em;
padding:.5em 0 0 .5em;
}
div#branding h1 a{
color:#fff;
text-decoration:none;
}
Wordpress really sucks at displaying HTML code, so you can just view source on the live example.
It’s very simple HTML, just a skip to content link, div called “branding” and an H1 link inside of branding. I also added some other stuff to jazz it up a bit.
Tested in FF2, IE7, IE6, Safari 3 with no errors.
Clean code will transcend browsers
Tags: moz, opacity, tips
Posted in Browsers, Web Development, Web Standards | 4 Comments »
Microsoft Expands Support for Web Standards
Tuesday, March 4th, 2008
Ran into this link today, thought I’d share: Microsoft Standards
My thoughts
Looks like the IE team created a really complex system to account for all the uproar in the web community. Seems to be a large step in the right direction. Didn’t someone say this would happen?
Either way, I still think it’s a good thing and I really hope Microsoft does a better job at upgrading IE7 folks to IE8 than they did for IE6 users.
Just a quick post today.
Tags: internet explorer
Posted in Browsers, News, Web Development, Web Standards | No Comments »
