Entries Tagged as “General”
iPhone Detection Scripts
With iPhones being all the rage these days, I am wondering if mobile versions of your pages might be useful. Viewing a site on an iPhone looks exactly as it does on your desktop. This is all well and good, but sometimes pages can be bloated with images, javascript libraries, and other markup that is not as important to your visitors. I am also a bit upset that the iPhone ignores the css media type of handheld. I wish there were an option to force Safari to render handheld styles as default, but I could not find any option for it. So I set out on a quest to find some alternatives for my iPhone experience.
Coldfusion – I was sure there was a way to get something from the cgi.http_user_agent but not sure if it would just read the agent as webkit. I didn't want to kill Safari desktop users, that would be bad. The Awesome Coldfusion Jedi Ray Camden already had a solution so here it is: (Sorry for the comments around the actual code. Seams that MangoBlog wants to parse the code and run it causing an error. So remove the comments from the cfif statement to make it work. I hope to get a fix for this soon)
<!--- detect iphone --->
<!---
<cfif findNoCase("iphone", cgi.http_user_agent)>
<cflocation url="iphone.html" addToken="false">
</cfif>
--->
Javascript, PHP, and MVC – I ran across a site called iPhone Toolbox that has a ton-o-info on developing for the iphone. (I will be spending some time here for sure.) There is a set of scripts linked up there dealing with how to detect an iPhone users that pretty much covers the rest of the developers. Here is that code
Client-side (javascript):
if (navigator.userAgent.indexOf('iPhone') != -1) {
/* iPhone user */
}
Server-side (example is PHP):
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
/* iPhone user */
}
For sites that use an MVC coding pattern where the programming logic code is separate from the template, the following example is useful:
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
$template = 'home/iphone.html';
}
else {
$template = 'home/index.html';
}
If you have any other cool resources, I would love to hear about them. I did run into another site with some code to detect iPhone's and iPod's, but I couldn't make it work, so I have no idea if you have to detect them separately or not. It does speak to the reason why Apple should have an option in the settings pane to make an iPhone or iPod use a handheld stylesheet. But for now at least there is a work around.
→ Respond NowTags: Code · ColdFusion · CSS · General
10 Sites to Waste Your Day
As if we don't already live in a environment that is filled with enough distractions, that we need yet more things to waste our time. However sometimes on those rare occasions, a need arises and we need to disconnect - unplug from our daily grind and clear our minds. Maybe you have time to kill and want to goof around for a bit. This is not a luxury I personally get to enjoy all that often. I would like to believe that someday I will have more time to goof around. In the meantime I will continue ro bookmark pages so that when that day does comes, I will have plenty of options. Below are 10 sites that you can waste your time with starting today if you like.
→ Respond NowTags: Freebies · General · Inspiration
Text Selection Color
CSS3 brings some cool new features to the web. Some features are highly discussed like rounded corners, borders, and layout control. I am really looking forward to these items becoming standard in the near future. However, I am happy that my two favorite browsers Firefox and Safari already support many of the CSS3 specs. This gives me the ability to use some lesser known items without killing my design for IE. I enjoy some of the simpler things, like the ability to change the text color and background color when text is selected on the page. IE does not currently support this but thats ok… I don't care that much for IE anyway.
Want to add this effect to your site? It's simple. Add this code to your css stylesheet.
*::-moz-selection { background:#FFFFCC; } /* FOR MOZILLA */
*::selection { background:#FFFFCC; } /* FOR SAFARI */
If you want to know more about this tag check out quirksmode.org for additional info and examples. A word of caution must be noted here, If you must validate for css level 2.1 then you will want to forgo this trick as it's not CSS2 compliant.
→ Respond NowTags: Code · CSS · General
52 Doodles
I work with a strange cat at Page Design named Kurt. A real oddball guy. Okay, not really… Kurt's pretty normal I guess, if there is such a thing as normal. However his art work is strange, quirky, odd, fun, humorous, and a few other colorful descriptive words. Check out Kurt Kland's website 52 Doodles where he does a doodle a week during our Monday morning meetings when he is supposed to be paying attention.
→ Respond NowTags: Design · General · Inspiration
Basic SEO Tips
I am not an SEO expert but I know a thing or two about good practices. In talking with some young and upcoming web designers this past week at a user group meeting they asked about SEO and what they could do to help their site rank higher. When I started explaining the basics many of them dropped their jaws at how simple it is to overlook the obvious. I thought this would be a great opportunity to point out some basic SEO tips that web designers at any level can do to make their sites rank higher in search engine results.
Use a descriptive title tag. Every page title should explain what the given page is about in 65 characters or less. The homepage, should start with the sites name followed by additional description to explain what users can find on your site. Pages below the homepage should explain what the content is about first. If you still want the sites name visible include it after the page description. For more on this see point 6 in Jakob Neilsen's article "Top Ten Mistakes in Web Design" as he explains it very clearly.
Use the meta description tag. Although many search engines place a low priority on your meta tags, one tag still remains useful. The meta description tag. Craft a well written but short description telling what your site is about. This is used by search engines in search results listings. This too should be very short and to the point.
Keywords in link text. When users and search engines scan your page they are looking for useful trigger words or keywords. When you create a link on your page avoid using the default "Click Here" phrase and instead link text that is relative to the page you are referring.
Markup Order is important. It's no secret that some major search engines will only index your page to a certain point. Placing your content before your sidebar in the markup order will ensure that more of your important information is indexed.
Use proper alt text. Search spiders do not see images so using a good description of your image in the alt text to tell the search engine whet your image is about.
Include a sitemap. In my previous post "Top 20 Most Valuable Websites" I linked to XML-Sitemaps. You can use their service to generate a proper sitemap to upload to your site. Most of the big search engines use this sitemap if it's available to see all the content on your site quickly.
Outside sites with related Information
- http://www.webdesignerwall.com – SEO Guide for Designers
- http://stylizedweb.com – Learn SEO Basics
- http://seo2.0.onreact.com – 10 Coding Guidelines for Perfect Findability
- http://www.tommylogic.com – 301 Redirect
With some basic enhancements to your site not only will you make your site search engine friendly, but you will also make it more useful to your visitors in the process. It's a win-win situation.
→ Respond NowTags: General · SEO
