Posts Tagged ‘Apple’
|How to Setup Your Site for the iPhone
Friday, October 22nd, 2010
I’ve been working on some mobile apps lately and realizing how simple it is to get started making your site more iPhone compatible. You can either create a separate site specifically for mobile or create a mobile stylesheet to be applied to specific devices. There are some great arguments out there for each option, but what I’m discussing here is just the introductory steps that work for either method. In writing this I’m also considering how I’d like to apply those ideas to my site here.
If you’re planning to create an additional stylesheet rather than a completely new codebase, you’ll want to start by specifying the stylesheet to use with a media query. Ethan Marcotte has a great article called Responsive Web Design that expands upon this idea on A List Apart. To target an iPhone/iPod specifically you can use this code right after your main stylesheet in your header:
<link media="only screen and (max-device-width: 480px)" href="iphone.css"
type="text/css" rel="stylesheet">Control the Page Size
Next you’ve got a handful of settings that will help make your site similar to a native iPhone app. If you want your page to resize to the device, you can use this line in your header:
<meta name = "viewport" content = "width = device-width">or if you’re setting your page width in CSS and would prefer to use a specific scale (with or without the option to disallow users from zooming the page) you can use:
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">Add a Custom Icon & Startup Image
There are also meta tags for use when your site is added to the home screen of a user’s device (press the ‘+’ in mobile safari to add to the home screen). The first is adding a custom icon to your site that I wrote a previous post about. In addition, you can add a startup screen to give an app like feel. To add a startup image create a png that is 320 x 460 pixels and add this line of code to the header:
<link rel="apple-touch-startup-image" href="/your_image.png">Make it Look Like an App
You can make your site look more like an app when people save it to their home screen by hiding the top bar that loads with safari and changing the color of the status bar. Before you do this you’ll want to make sure you’re site is setup so it can be easily navigated without needing the back button. To remove the Safari controls add this meta tag to your header:
<meta name="apple-mobile-web-app-capable" content="yes" />And to change the status bar (network name, time, battery level) from the default grey to either “black” or “black-translucent”:
<meta name="apple-mobile-web-app-status-bar-style" content="black">Note that if you change the status bar to translucent the site will sit underneath it. Make sure that there is no critical content hidden behind the bar.
These simple lines of code are a great way to get started setting up your site for Apple’s devices. If you’d like to go into some more detail, Apple’s Safari Reference Library is a great place to get started. Then to take this to the next level I’d recommend digging into jQTouch or Sencha. Both of these tools will create an even more app-like experience with animated transitions and app-like bars & buttons using javascript (which you’ll want to have a strong knowledge of to use to their full potential).
Tags: Apple, html, iPhone
Posted in HTML, mobile | 1 Comment »
DODOcase Review
Sunday, June 20th, 2010
When I pre-ordered my iPad I also ordered Apple’s case which I used on and off for about two months. The Apple case has great utility (angle for typing & stand for watching) and fits the iPad very well, but I would often take the case off when I was reading because it just didn’t feel as good to hold as the iPad by itself. I hadn’t seen anything out there that was worth replacing my Apple case… until I saw the DODOcase.
The DODOcase cost $50 and, like they say on their website, took about 6 weeks to ship. The case is hand-constructed and currently there is a high-demand, thus the extra long wait. It was worth waiting. The case is absolutely beautifully made. Inside the case is a frame, made from carved bamboo, that supports the iPad along with some corner pieces which shape to accommodate the device. The iPad fits perfectly in the case, but while it stays there just fine, I wouldn’t expect it to stay put with any vigorous shaking while upside-down. The cover secures with an elastic strap to prevent any iPad casualties.
The only issue I’ve found with the case has been that a couple of the rubber tabs holding the corners in place have separated from their adhesive on the top of the bamboo frame. I ended up using this to my advantage and folded those tabs underneath the iPad to make it fit in the case more securely. Now it won’t fall out even if I hold it upside-down. The other thing to be aware of is that this case doesn’t sit at as high of an angle as the Apple case, making it more difficult to type on. I say, “to be aware of” as I can’t really fault them for the angle as making the binding thicker would definitely lower the aesthetic appeal of the case. The DODOcase does stand up like Apple’s case if you have a flat surface and balance it using the cover.
Overall, the DODOcase is awesome. I really love having a great looking case for such an amazing device and when its closed it looks like you’re just carrying around a Moleskine. The familiar feeling of caring this around makes me think that if Apple (or someone else) can come up with a fine-tipped stylus and an app with great handwriting recognition it could, for many applications, replace carrying a paper notebook.
Tags: Apple, iPad
Posted in Gear | No Comments »