There has been a fair amount of talk lately about a feature introduced in iPhone firmware 2.0 and above that allows a developer to make a web application, once saved to a user’s iPhone home screen, run in a full-screen mode without the Safari toolbars. AppleInsider wrote about it, with a fantastic demo available on the website of the WebApp.net framework.
While there has been a lot of talk about the result of this technique, I haven’t seen anywhere that describes exactly how to make your application run full-screen (sans buried deep in the Apple Developer Connection documentation). It’s actually incredibly simple, just add the following code into the <head> of your site:
-
<meta name="apple-mobile-web-app-capable" content="yes" />
Once you’ve done this, when someone saves your application to their home screen it will subsequently start without the Safari chrome. Make sure that if you do this your application has adequate navigation and plenty of feedback during loading, as users won’t be able to use the Safari back/forward buttons nor see the standard loading bar.
I think I’m somewhat of a rarity in the world of web developers - I actively use and certainly approve of CSS hacks to target and fix certain browsers. Of course, I don’t condone their use unless it is absolutely necessary, and in most cases good, standards compliant CSS should alleviate most issues before they occur, but when there is a need I think these hacks can be a great way to fix issues while still keeping your CSS logical and concise. The caveat to this is that all hacks need good comments to describe what is going on for future reference, whether that be your own or that of another developer. Also, always keep in mind that hacks can break when new browser versions are released, so always keep an eye out and use them sparingly.
I’ve always found it hard to find a good reference for these hacks. There are many sites that talk about an individual hack, but finding a single place that goes through targeting all the different browsers has been hard. This post hopes to solve that - more for my own use, but hopefully other developers can find it useful as well. What follows are the hacks that I use, which I believe to be the most logical and simple ones out there. In every case, #selector represents the element you want to apply a rule to (this can be either an ID or a class), and property and value represent any normal CSS property.
Read the rest of this entry »
I hit an interesting problem the other day - take a list of sorted items (in this case, an ordered list of names) and insert a new item in the correct position in the list with Javascript, preserving the sort order. It turns out that this isn’t so hard to do with the help of a little jQuery (and almost as easy without it).
The problem breaks down to:
- Put the existing items in the list into an array
- Push the new item into the list
- Re-sort the list, then work out where the new item ended up
- Insert the item into the document at that position
The code I ended up with looked a little like this:
-
var newItem = "Item to insert";
-
-
// Grab all the existing items
-
var sortedList = new Array();
-
$(‘#list li’).each(function(i, item) {
-
sortedList.push($(this).html().toLowerCase());
-
})
-
var initialLength = sortedList.length;
-
-
// Add the new item and sort the list
-
sortedList.push(newItem.toLowerCase());
-
sortedList.sort();
-
-
// Then find where the item ended up
-
var i = $.inArray(newItem.toLowerCase(), sortedList);
-
-
// If the item ends up at the end of the list, just append it
-
if(i == initialLength) {
-
$(‘#contacts-list’).append("
-
<li>" + newItem + "</li>
-
");
-
// Otherwise, insert it before the element it’s replacing
-
} else {
-
$($(‘#list’).children("li")[i]).before("
-
<li>" + newItem + "</li>
-
");
-
}
Obviously, there are some inefficiencies in the code, but it’s something pretty good to start with to adapt to your needs.
Scoble has been talking about websites rendering on a cellphone screen lately (here and here), but has been looking at it a bit one sided. It isn’t always the website designers fault that a site looks terrible on the small screen (though admittedly, most of the time it is).
I would suggest to Scoble, and indeed everyone using a small screen to surf, either the Opera Mobile browser for smartphones/PDAs, or the Opera Mini browser for standard handsets. My site looks great on Opera Mobile/Mini.
P.S. Yes, I am back blogging again, I promise!
Jakob Nielsen has written a great list of the Top Ten Design Mistakes people make on weblogs. If you have your own blog, definitely give it a read.
I think my biggest rule breaker is the fact that I don’t have an about me page. I have never really though about this, but now that I am I have no idea why I don’t. I will get on up by next week, for sure.
Other than that, I think I did pretty good with those rules. The only other thing I could improve on is my posting frequency, though new content should be up daily from now on.
Kent Newsome has posted another article, based on Steve Rubel’s post, that got me thinking. Give it a read here, my comments below.
Kent, I totally understand your sentiment. I used to work as a web designer, I understand the personalization that the different site designs give. Unfortunately though, I can’t share all of your opinion.
I aggregate a lot of feeds. Being a journalist with MobileBurn, I need to stay connected to a lot of different sites. I really do appreciate the generic design across all the feeds I read in an aggregator. Although I do miss the individuality of a site, I believe that one can achieve a bigger sense of individuality through the writing on said site. Having to find my way around so many dissimilar designs, not to mention having to jump to so many different URLs, would hurt my productivity.
My opinion is, be an individual through your ideas and writings. You shouldn’t have to have a flashy website to be an individual.
One of my favorite web design resources has been given a facelift, so here is a link to the all new, wonderful, SitePoint!