This little site has morphed dramatically in just a few months since its inception. It started in iWeb, which created a classy, but slow-loading site. Then it was hand coded for blinding speed in Web Minmalist. But then it outgrew the simple structure and needed a compentent search function. I settled on Blogger. It's free, flexible and has search, but is also easy to use on my end. Hopefully it's a good compromise for both you an I that will find usable.
The sites has always been meant to be extremely iPhone-friendly, which I guess makes it big-browser-hostile. The current site renders great on iPhone but ghastly on a desktop. As I learn more ways to hack Blogger's interface I hope to be able to eventually have a site that will accommodate both. I can't code my way out of a wet paper bag so bear with me.
One advantage of having used three development environments for this site is that I have learned a lot about Web development for iPhone. Please don't accuse me of being an expert. I just thought I'd share my findings.
While Safari on the iPhone is a full Web browser, normal Web pages are big and the iPhone screen is small. Most sites require that you pinch, drag and tap constantly just to view the page. Many sites are bloated with images and dormant javascript that take forever to load over Edge. If you want to make a site specifically for iPhone it should be lean and designed to fit the width of the browser.
Blogger Hacks
As free Web content goes Blogger is one of the best options for blog, tip or news-style posts. It's designed to be simple, elegant and functional. Unfortunately it's gotten a bad name as Blogger has made very easy for the average person to clutter their blog extras and make it unreadable. Others have hacked the templates to the reader's disadvantage with dozens of ads that again giving real content as little as 10% of the page. I opted for not using elaborate menu bars. On an iPhone they look awful and take up space. I started with the Simple II template, which is a one-column display that looks good on iPhone. I didn't see a need for the date, since I update the entries all the time. I also didn't think it was necessary to say each post was posted by me, so I dumped that too. Hopefully you're left with a readable site that offers a good search engine and tag system that makes finding like posts easy. Blogger has many trick. I'm not an expert, but here's what I've learned:
- Remove Date and other unwanted elements Layout>Template>Page Element>click Edit on Blog Posts. Uncheck what's not vital.
- Change colors and fonts Here's the simple way: Layout>Template>Fonts and Colors>. Click on an element and set. All fonts in the Blogger set should show on iPhone.
- Hack the layout Hacking deeper involves a little CSS and HTML work. Save your current template on your desktop to make sure you don't lose where you are. It's really easy to messing things up, but if you have a copy, you can play freely. Layout>Template>Edit HTML. Genrally for iPhone you'll want to set the padding everywhere to zero, the margins to .5em. I have more Title font set to 150% and my Post Title set to 130%. The problem is that each template is different, so what I've mentioned here may only work with the Simple II template. Hacking with involve a lot of saving and checking out how it looks on your iPhone.
- Add a Web clip icon to your Blogger blog Go to Layout>Template>Edit HTML and add <link href='full location of icon on the Web' rel='apple-touch-icon'/> to the header. To create a Web clip icon in iPhoto:
Open an image in iPhoto.
Click on the Crop button.
Check the Constrain box.
Choose Square from the list.
Crop the image tightly for best viewing on the iPhone.
Click on the Apply button.
Click the Done button.
From the File menu choose Export>File Export>Kind: PNG.
Click on the Size list and choose Custom.
In the Dimension text box type "57".
Click Export.
Title it apple-touch-icon.png and save.
- Adding Photos Blogger resizes photos itself. The size choice determines the size of the photo for the post layout. Medium is a good choice for iPhone viewing. Small is too small to see and large takes up too much of the the screen. All sizes act as a thumbnail for a larger image that can be viewed by tapping. The photos are stores on your Picassa Web Album. Join Picassa for free and you can delete any old images that have been removed from the post but not from your Blooger space. If you have dupes that are identical, leave the first one and delte the others.
- Amazon Associate Links A possible way to make money from your site without inconveniencing your readers is through Amazon Associates program. When you link to product, you create a special link to it on Amazon. If your reader buys it you get a kickback. Make sure when you create the link with Amazon that it's Text Only. Instead of creating a link WYSIWYG, insert the link directly into the html. It already includes the linked text. I modify the text since it's usually cumbersome.
Coding By Hand For iPhone
The advantage of Hand Coding is that you can keep the page lean, even with a lot of text content. These tips will help you run fast over edge:
- Minimize graphics All elements of the page you're viewing now are created with CSS. The site load and navigates very fast.
- Reduce images If you must use images makes keep them tiny. 320p at the widest. Any bigger and iPhone's Safari is having to work to shrink them.
- Consider a one page format. This site is actually one page. It uses good ol' fashioned anchors and links for speedy navigation. Once the site is loaded into the iPhone navigation becomes blinding since the whole sites is already loaded. If you site is mostly text, it will load fast as well.
- Fit pages to the screen There's an easy way to get your content to fit the screen. Put this tag in your header and Safari on iPhone will size the content correctly.<meta name = "viewport" content = "width = device-width">
- Use the Fonts Most of the iPhone's system fonts work in Safari. If your site is designed specifically for iPhones you can use:
American Typewriter
Arial
Arial Rounded MT Bold
Courier New
Georgia
Helvetica
Marker Felt
Times New Roman
Trebuchet MS
Verdana
Zapfino
This gives you a nice package to choose from. If you don't set a normal font with styles or the basefont tag, it will be Times New Roman 12 by default. Note that Arial MT Rounded Bold, Marker Felt and Zapfino don't offer emphasis.
- Follow the XHTML Mobile Profile Because it's so strict you may need a few more characters, but the page will run faster in iPhone's Safari. MP is also used on many other phones, PSP and the Wii, as well as most desktop browsers.
- Hide Address Bar When you first load this page, you'll notice that Safari's address bar conveniently tucks out of the way, giving you more screen space. Include this is in your body tag: onLoad='setTimeout(function() {window.scrollTo(0, 1);}, 100);'. This works in blogger's template too.
- Mail URI A URI is a Uniform Resource Identifier. Safari and iPhone Mail support some that are common and a few extras. Email addresses are recognized and highlighted in an email but not Safari. So just by including me@myselfandi.com, it will become live in email. The link format follows the advanced mailto: syntax including subject line, carbon copy, blind carbon copy and body text. <a href="mailto:me@myselfandi.com ">Email me</a> is the standard mailto link that will call up a new addressed email when clicked. You can include multiple recipients, a subject and body copy in a correctly-formatted mail uri. A google of mailto syntax will show you more intracies.
- Phone URI Phone numbers also work as links in both email and Safari. So if you wanted to call the White House, just click on the number 202-456-1111. This is written as normal text. Safari knows to create a link out of it. Here's how you would put it in its own link if you'd prefer the official way: <a href="tel:1-202-456-1111">Call W</a>
- Maps URI A Google maps link that opens the Maps app on your iPhone. Clicking here will take you to the White House. The link looks like this: <a href="http://maps.google.com/maps?q=white house">here&lyt;/a>
- YouTube link Another is a YouTube link. It calls up the YouTube app on the iPhone and plays the video with it. It looks like this: <a href="http://www.youtube.com/watch?v=BqLvBUSJucg">>YouTube link</a>
- iTunes Preview link The following link calls up a preview of a song in the iTunes Store app: <a href="http://phobos.apple.com/
WebObjects/MZStore.woa/wa/ viewAlbum?playlistId=607934&s= 143441&i=607918"
>Express Yourself</a> To get the link, with your desktop browser go to iTunes/iTunes Store/Look up your song/Control click on it/Choose Copy iTunes URL. It's now on your clipboard and can be pasted into HTML.
Using iWeb
iWeb makes beautiful sites. It has amazing WYSIWYG graphics capabilities, but these sites are bloated with code and take forever to load on the iPhone. If you must use it:
- Limit your page width to 320.
- Minimize your use of images.
Other Findings
And a few more quick findings:
- Page size limit is 10mb. I doubt this page will ever exceed that.
- Quotes and apostrophes display in Safari. Smart quotes and smart apostrophes don't. Some apps, like iWeb can convert to smart. So if you're pasting text, you may have to change back to dumb quotes.
- Masked forwards do not always work for iPhone pages. They have a tendency to set the page size themselves and it's always huge. Usually unmasked forwards work.
- If you must use images, stick to small GIFs and compressed JPEGs. If the image must be wider than 310px for horizontal or 470px for vertical, link a small thumbnail to it.
Quick Pages in TextEdit
TextEdit can convert its documents into HTML. If you need very basic Web pages for your iPhone, there's nothing easier than writing them as TextEdit documents and saving them as HTML to iDisk. This can be used to create text-only pages or even a basic blog. It's very useful for putting up a quick page of links for yourself and others. Pluses:
- Arial, Arial MT Bold, Courier New, Georgia, Helvetica, Marker Felt, Times New Roman, Verdana, Trebuchet and Zapfino fonts and most emphasis translate fine.
- Font color and page color translate.
- Tables work. So you can lay out a page by using cells. You can control cell and border color.
- Many standard acii characters, like various size hyphens, underscores uncommon characters can be used as basic graphics.
- Links that are created in TextEdit work. So you can create a primitive site index across the top of the page.
There is no faster was to create basic Web pages to view on iPhone. Minuses:
- Pages will look like crap on a desktop browser. There are not many options to controlling page width in Text Edit. If you use 14 pt type, you page will be unviewable on the iPhone. If you use 48 pt, it looks great. But then viewed on the desktop the font is way too big. It's best to use 14 pt for editing then highlight all and enlarging to 48 pt for saving to HTML. (This also applies to tables.)
- Image and shadows won't translate. A TextEdit rtfd document with images can be saved as a Safari Web archive file, but these can't be viewed on iPhone.
- No advanced features like search. Since iPhone has no search. And TextEdit can't do anchors, which is why this page is not done in TextEdit.
Happy coding.
J. Kevin Wolfe