Archive for October, 2008
|This Week in Links 10/27
Monday, October 27th, 2008
Better CSS Font Stacks
A good article on how to jazz up your stacks to try and take advantage of users who have more fonts installed. I’m all for this, and as long as it’s done carefully, can get a nice version of progressive enhancement.
5 Terrible SEO Ideas
Richard Bradshaw goes over some trendy (and terrible) things that are common in SEO such as: keyword stuffing, dupe content, link farms, splash pages, and cloaking.
Fun with Overflows
I think this is a great idea (check out the demo). It creates a very similar interface to that of Plurk, the twitter competitor.
Tweet What you Spend
This is a pretty cool service that uses the Twitter API to track spending. I know it can seem kind of geeky (as is reading articles about CSS…), but tracking your spending is a great way to save money, it gives you a lot of power when you know exactly how your paycheck disappears every month. Provided you don’t mind sharing your expenses with the Twitterverse, this is a good service and very easy to use.
Tags: CSS, finances, font, javascript, jquery, seo, twitter
Posted in News, Web Development | 1 Comment »
Clickable Labels
Monday, October 20th, 2008
In form design, there are many things you can do to improve usability, many of which have to do with label placement. I won’t go into the depths of it, but Chris from CSS-Tricks.com wrote a good article about placement, not too long ago. Read Chris’s article here
Why read this?
This reason I’m sitting down to write this is to share a bit of usability I’ve come across on certain sites as I scour the Internet. Letting users know that a form label is clickable and will activate the associated form field.
This first came to me at the WDN conference in Vancouver last January, while I was listing to a Q&A session after a talk by Derek Featherston, accessibility guru. Somehow the topic of users not realizing that form labels are clickable came up. And it got me thinking.
Background on labels
For anyone who doesn’t know; this is the proper syntax for a form field and it’s label.
<label for="name">Name</label>
<input type="text" id="name"/>Matching the label attribute "for" to the input attribute "id" will allow a user to click the form label and activate the corresponding input field.
There’s no real problem with doing that, it’s great, but the general public has no idea has that this functionality exists. And it can be very useful, especially when dealing with check boxes or radio buttons.
Secretly educating the user
How do we get this feature pushed to the user. You can’t send out an e–mail to 50,000,000 users informing them that they can click the text next to a form field.
Adding in features (or letting people know that they are there), needs to be done in a way users will notice in their every day usage and it has to feel like a natural addition. So, we ask ourselves — what would make a user think something is clickable on a web site?
This:
The code
label{cursor:pointer;}And even maybe add something like this in:
label:hover{color:#777;}Those code snippets will help bring clickable labels to the public (in compliant browsers, of course), letting them know of this little UI enhancement most web sites have, you could even go as far as to make you labels appear like links (but that might be a bit much).
Conclusion
Labels are already clickable, but Joe the Plumber, Internet user, has no idea, he just hates filling out forms and miss-clicking all the time. The hit areas of these form fields are already bigger than they appear, but now it’s time we let our users know it, and make sure it comes naturally to them.
Tags: CSS, form, ui, xhtml
Posted in Web Development, Web Standards | 5 Comments »
This Week in Links 10/15
Wednesday, October 15th, 2008
One Click, The Importance of UI
Many times my link lists back up a few weeks and I have to revisit an article to really remember what it was about. When I did that to this one, I moved it up to the top of the list. It’s a very interesting article on user interface and the importance of the click. A must-read in my opinion.
Pixel Precision with Diagnostic CSS
A technique for mocking up a design.
Mint Analytics
Analytics software I found while muddling through the An Event Apart web site.
Tags: analytics, design, jquery, ui
Posted in News, Web Development | No Comments »
Active navigation with jQuery
Wednesday, October 8th, 2008
I was building a site last week and came across some jQuery code for active navigation. It’s very simple and works real well. I’m using it on some secondary navigation and still using my body class for the main nav.
Active navigation with a body class
body.home #nav ul li.navhome{font-weight:700;}So I’m still doing that, but then for the internal page navigation, rather than loading the CSS up with long declarations for the numerous sub nav links, I used this jQuery:
Active vavigation with jQuery
$("#nav a").each(function() {
var hreflink = $(this).attr("href");
if (hreflink.toLowerCase()==location.href.toLowerCase()) {
$(this).parent("li").addClass("selected");
}Breaking it down
Let’s try this line by line for those who want to know what’s happening here.
This targets each link in contained in #nav.
$("#nav a").each(function() {This line just saves the href attribute of each #nav a to a variable. It makes the code a little cleaner and easier to work with.
var hreflink = $(this).attr("href");This converts the href of each link in #nav, makes it lowercase (it should be already, but just in case) and checks the current URL of the page and sees if they match. Also making the current page URL lowercase.
if (hreflink.toLowerCase()==location.href.toLowerCase()) {If the current URL matches the href for one of the links it looks to the parent element (in this case it’s a list item) and adds a class of “selected” to it.
$(this).parent("li").addClass("selected");This is just closing the function, I really don’t know why I didn’t include it in the above code for the purpose of this post. But no matter.
}Issues
The only problem I ran into with this was that you have to make sure the you use a consistent href for pages.
For example
If you’re sub nav contains a link to http://www.csskarma.com/contact/, you have to make sure that you don’t link to http://www.csskarma.com/index.php; or the active navigation won’t work.
It’s not a huge deal, but definitely something to be aware of, I just had to go through a site and clean up a bunch of links up because I applied this jQuery pretty late in development. You can probably rework the code to strip out the file name and extension or do it with some PHP, if you’d like.
Actually, if anyone does that, let me know and I’ll update this post with the code.
Tags: javascript, jquery, navigation, ui
Posted in Web Development | No Comments »
This Week in Links 10/6
Monday, October 6th, 2008
Successfully Present Your Web Designs to Clients
Dave Woods put together a nice article in response to Andy Clarke’s article on static visuals. I’m linking this one up because I think a lot have already read Andy’s and I think Dave did a nice job on this one.
Feature your Products with jQuery
This is a cool jQuery trick from a blog I just started reading a couple weeks ago.
Writing Maintainable CSS
Unfortunately, my link posts are a little backed up right now, so this is probably a week old at this point. But it’s a direct link to the slide show on writing maintainable CSS. I disagree with some of it, but overall, a good presentation.
Space Madness
Ariel is, from what I can gather, awesome, and a consultant for NASA. In this post she described how Twitter is being used on Neptune!
Tags: CSS, jquery, mac, maintainability, twitter
Posted in News, Web Development | 1 Comment »
Setting your Apple icon
Wednesday, October 1st, 2008
Getting your own iPhone app icon is easier than you’d think. I was recently working on a project where the client wanted to make sure that if a user added his site to their iPhone home screen, there would be a pleasing icon.
Apple used a lot of forward thinking when they implemented the apple-touch-icon. It’s treated very much the same way a favicon is treated. There are 2 ways to set your Apple icon.
- You can simply put a file called apple-touch-icon.png in your root directory
- You can put the icon where ever you’d like and link to it in your document head element
I’m one of those people who prefers to do a combination of both to make sure it gets set. I put apple-touch-icon.png in my root directory and also link to it with the following code.
Apple icon code
<link rel="apple-touch-icon" href="apple-touch-icon.png" />That will make sure it gets set.
Icon specs
The great thing about this is that you don't need to dress up your icon to match the iPhone theme. The software will round your corners and add the nice glossy effect for you.
Like the favicon, the Apple touch icon has a size requirement. Your icon must be 45x45 pixels to properly fit. I haven't tried to do it any other way; my gut tells that it would either crop the icon or squish it down the size.
In action
This is the Apple icon for csskarma.com:
Note that the corners are not rounded and I didn't add the Apple gloss.
In bookmarking a site on the iPhone/iPod you can "Add to Home Screen". This makes the bookmark look much like and app with the shiny icon and whatnot.
Then your new Apple icon shows up on the home screen
A brilliant and easy bit of marketing for a site that anyone can jump on board with... you may want to dress yours up a bit more.
Tags: iphone, ipod, mobile
Posted in Browsers, Web Development | 3 Comments »
