Lorelle on WordPress » Web Design

Stripped Down Naked to Honor Web Designers and Developers

Lorelle VanFossen — Wed, 09 Apr 2008 04:00:13 +0000

In honor of April 9, 2008, as CSS Naked Day, my blog is going naked. I discussed this a few days ago with details on how to strip naked your blog if you would like to join in the celebrations.

By going naked, my blog stands with thousands of others who recognize and honor the hard work of web design. I honor not just those who make our blogs and sites pretty, but those who set the those who set the standards we use on the web to make our sites pretty, usable, and accessible.

I honor the web designers who “walk the walk” and volunteer their time to ensure those standards grow with the web not against. I honor web browser developers who understand the need for standards and thus work with them, also not against them, for our web browsing pleasure, helping designers design well and avoid all the hacks and customizations on a per-browser basis.

I honor the founders of the web, the great minds who looked into the future and said, “Everyone must have access to this.” They meant everyone. Every person on any computer using any method to access the web. In their minds, they wanted to have people on different computer operating systems be able to share data. Today, this has stretched to include access for the blind and visually impaired, disabled, deaf, Mac user, Windows user, Linus user, cell phone, web TV, big screen, little screen, all the various methods the web is accessed so the data can flow both ways with ease.

I also honor those who give so much of their creativity to the WordPress Community, while setting a standard in web design around the world. Thank you to all who understand that a free WordPress Theme is a resume. A business card. A portfolio of your work. By giving, you are showing the world what you are capable of. It’s a way to give back to the WordPress Community which gives so much of its time to volunteering to support WordPress through their work on WordPress Plugins, donating and writing articles for the WordPress Codex, the online manual for WordPress Users, and volunteering their time in the WordPress.com Forums and WordPress Support Forums to help others.

For those who make a living off of the free WordPress blogging platform, I honor you for giving back to that which helps you pay your rent or mortgage. The WordPress Community is a fantastic free school of education for coders, programmers, designers, writers, and hackers. Thank you for volunteering your time and skills towards the improvement of WordPress and WordPress development.

Honoring - and Challenging - Web Developers to Break the Last Barrier

In honor of celebrating the web designers, I also honor those who are working behind the scenes to break the last major barrier on the web: language. This is the year, folks, that we have to start breaking the language barrier to make the web truly accessible by all.

Sure, there are translation programs online. They are improving in machine translations, but they are in the wrong place. It takes too much work to copy the URL or page content and take it to another page in order to generate the translation. Who wants to bother with that much fuss?

Putting the pressure on websites and blogs to provide machine or human translations of their content is also a time waster. It puts the onus on the web owner, consuming bandwidth, database, and server access to provide translations. They do it because they know the future and want to reach out to everyone across the language divide, but we can do better. And we can do it now.

I call out to web browser developers to start working on putting language translation - instant language translation - into the web browser. Yes, it will consume resources, weight down the program, but where there is a will, there is a way. No matter what you may think today, the language barrier must come down. I visualize Bill Gates, Steve Jobs, and Matt Mullenweg standing at the virtual web wall, each picking up a piece of stone, and shouting, “Browser Developers, tear down this wall!” Okay, so maybe not them, but it has to happen. Why can’t they be among the first to proclaim the wall must come down?

I want to know what Sing Hio has to say in Japan on her blog. I want to read what Paulo is doing in Brazil at his favorite dance club. I want to read about the tough day Boris had at school in St. Petersburg. I want to share the love of a good book across the languages with Angelo in Mexico City. Why can’t I? Why should I be restricted by a language not my own? Why should we make them learn our language in order to communicate?

We must break down the final barriers on the web. We’ve crossed the data barriers. We’ve embraced web standards for design. We’ve put the peer in social networking. Now it’s time to truly cross the final frontier.

Consider yourself challenged.

Site Search Tags: web standards, web, css naked day, web design, web designers, web developers, translation, translate, blog event, events, holiday, language, language translation

Subscribe Via Feedburner Subscribe by Email Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

Strip Down Your Blog: CSS Naked Day

Lorelle VanFossen — Mon, 07 Apr 2008 18:00:31 +0000

Get ready to go naked. On April 9th, 2008, hundreds, possibly thousands, of blogs and websites will go naked in honor of CSS Naked Day. Join fellow WordPress bloggers in honoring web designers and WordPress Theme builders by going naked.

This is the third year of the annual CSS Naked Day which honors web design and designers around the world who help make our websites and blogs look “pretty” to the eye while still being totally functional under the hood. Dustin Diaz wanted to give the web world an opportunity to remind everyone of the benefits of CSS web page design. By removing the stylesheet for the day, the world would see naked web pages, giving a little more appreciation for the skills of web page designers.

As explained yesterday in the Blog Herald announcement of CSS Naked Day, this is also an opportunity to showcase how usable and accessible your web page structure is even without the pretty, reminding the world that it is the law that your website must accessible by everyone using any method to access your blog.

Make Your WordPress Blog Naked

Going naked is easy for WordPress blogs. In Lorelle is Naked, I explained the various options last year on how to turn off your blog’s stylesheet using WordPress Plugins with WordPress Naked Day Plugin for all WordPress versions, CSS Naked Day WordPress Plugin for pre-WordPress 2x blogs, the Naked Day PHP Function script for non-WordPress and PHP driven blogs, do it manually by renaming your blog’s stylesheet for the day, or removing the stylesheet temporarily on WordPress.com blogs.

Recent versions of WordPress will automatically reset to the Default WordPress Theme if no Theme is detected, which means changing the style.css file will revert your Theme to the Default/Kubrick style. To override this redirection, you must use the WordPress Naked Day Plugin or create a separate Theme that has no styles in the stylesheet, which I’ve prepared just for this event.

I have stripped down the styles in the Default WordPress Theme for current versions of WordPress and pre-WordPress 2.1 versions which changed some of the sidebar tags.

Unzip and upload the Theme version of choice to your themes directory.
- Default Blank WordPress Theme for current versions of WordPress for CSS Naked Day (zip)
- Default Blank WordPress Theme for CSS Naked Day (Pre-WordPress 2.1) (zip)
Activate the Theme through the Presentation or Design panel.
Switch back to your regularly scheduled WordPress Theme on April 10.

For those on WordPress.com, you can also participate if you are using the Sandbox WordPress Theme with the WordPress.com CSS Extra feature.

From the WordPress Administration Panels, go to Presentation > Edit CSS.
Cut ALL of the styles from your custom stylesheet and paste them into a text file. Save it with a name you will remember in a very safe place, leaving a blank stylesheet.
Choose the option: Start from scratch and just use this to create a blank stylesheet.
Click Save Stylesheet.
View your WordPress.com blog and all the design elements will be gone. The layout structure will remain but it will be “naked”.

Reverse the process to restore your Sandbox Theme on April 10.

Be sure and sign up for the CSS Naked Day so your blog will be celebrated as one of those honoring web design and designers. Last year, almost 2,000 sites signed up for CSS Naked Day. So far, the list is over 400. Let your naked stance join with others on April 9.

Site Search Tags: css naked day, naked css, css, web design, blog event, wordpress news, turn off stylesheets, accessibility, usability, honor web designers

Subscribe Via Feedburner Subscribe by Email Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

Are You Ready and Willing for CSS3?

Lorelle VanFossen — Mon, 07 Jan 2008 11:48:27 +0000

Are you ready for the changes in web page design that will come with the new version of Cascading Stylesheets known as CSS3?

In A Refreshed Design for 2008 by Don’t Trust This Guy, I found a glimpse of some of the new CSS3 features and possibilities including multiple background images and CSS drop shadows.

One of the interesting proposals that may be making its way into the final CSS3 version is the grid. You can see visual examples of the technique and code from the W3 on the CSS3 Grid technique, and what it does is turn your web design into a newspaper/magazine style format. You start reading on column one, scrolling down, then have to scroll up to continue reading in column two, scroll down, then scroll up to continue reading the article in column three, and so on.

That’s a lot of scrolling up and down. I’m still teaching people how to use the scroll wheel and thumb buttons on their mouse, so what do you think this is going to do to your eyes and fingers scrolling up and down and up and down and…you get the picture.

While I think the grid system is excellent for precision design elements, hearkening back to the one joy in table-based designs - putting it EXACTLY where you wanted it to stay - I’m not a fan of any up and down scrolling. It’s bad enough that the header art and area keeps getting bigger and bigger, requiring one to three scroll downs (see Matt Mullenweg) just to get to the content. I see this technique as valuable for some sites who want to narrow the width of the column and keep as much content as possible above the scrolling fold, but I see a lot of abuse on the user, too. This should prove interesting, and increase the wear and tear on your scrolling finger.

You can follow some of the improvements and changes in the CSS3 Roadmap while you are waiting for your browser to embrace CSS3, and here are some other glimpses at what’s coming in CSS3:

Yeah, But What About the Browsers?

In 2008: The Year Of The Layout Engine from the CSS3.info blog, they report on whether or not the new technology that will come with CSS3 will be viewable in most web browsers:

I believe that 2008 will be notable for the second salvo in the browser wars, and although previous combatant Netscape is out of action, we now have a four-way battle on our hands. In fact, ‘browser wars’ may not be the best description any longer; perhaps ‘layout engine wars’ is a more accurate description. With all four major engines releasing new versions, it’s going to be exciting to watch.

…During the last browser war it was the developers and users who lost out, as websites were built to favour one browser over another or involved double the work to be compatible with both. This time, however, standards are a well-developed core around which the battle rotates; so whoever loses, we all win.

The latter is quite a promise.

There are two major issues here. First, the web browser developers have to embrace the new standards and design elements. And they have to do it fast in order to jump on the CSS3 bandwagon. Waiting two to four years after the fact isn’t good and bad business practice.

The second more important issue is whether or not you are willing to upgrade your browser for the new CSS3 benefits.

I didn’t “upgrade” to Internet Explorer 7 mostly because I don’t use it. I have access to it for testing web designs along with other browsers, but I don’t use IE any more. It doesn’t give me the power I want in my web browser. After watching it take over whole computer systems and failing, repeatedly, in the installation, and watching them remove it and return to an earlier version, IE lost even more luster for me.

Are you really willing to upgrade Internet Explorer or move to a new browser to embrace CSS3? Would it mean that much to you?

The web browser is your best friend and tool when blogging so make sure it works for you and you work for it.

Microformats

Along with the improvements in the upcoming release of CSS3, Microformats are the next generation in communicating and interacting with your readers and clients via your blog’s design.

Otto of Nothing to See Here wrote a brilliant post as a guest blogger here on Microformats and WordPress Themes, helping us understand better how to incorporate microformats into your WordPress Theme and blog.

In the article by Don’t Trust This Guy, he announces that in addition to CSS3 techniques, he is also adding microformats and gives a couple examples of the power of their use.

I see this coming year as a huge one for improvements in web page design and development, but we have to get the web browsers to keep up with the changes. And we, ourselves, have to keep up with the upgrades of our browsers so we can enjoy the improvements.

Are you ready?

Site Search Tags: web design, wordpress themes, microformats, css3, css, stylesheets, blog design, future of blog design, future of web design

Subscribe Via Feedburner Subscribe by Email
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

Preparing for the Annual “What I Want Gone from the Web” Post

Lorelle VanFossen — Tue, 18 Dec 2007 11:13:44 +0000

It’s almost time for my annual Things I Want Gone from the Web post.

I had quite a list last year, and I’ve been collecting whines, rants, and nags over the past year, but this year, I want to know what you want gone from the web.

Let’s make this a community whine, rant, and nag.

So what do you want to see gone from the web and blogs next year? What fad do you want to see fade away? What tool, site, or gimmick do you want gone?

Site Search Tags: what I want gone from the web, bad web practices, web practices, web standards, poor blogging, bad blogging, ranting, rant, whine, nag, poor practices
Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

Cleaning Up and Decluttering is Back

Lorelle VanFossen — Fri, 16 Nov 2007 11:01:10 +0000

They say that history and fashion repeats itself, and it’s true. Cleaning up and decluttering your blog is back as a new trend, according to Jason Kaneshiro on the Blog Herald in Getting Back To Basics: Blog Decluttering:

When Web 2.0 first began with Google and Craigslist, one of the “innovations” was simplicity itself - empty, uncluttered designs that allowed users to get what needed to be done with a minimum of design elements.

I feel this basic concept has been forgotten recently, what with widgets, ads, videos, monetization, polls, spam, and splogs. Some blogs are so obscured with extra stuff that the content - the post itself - is nearly impossible to find.

It may be time to get back to basics. This week, I noticed several articles about clutter reduction, enough to say that excesses may be reversing and we’re entering a “clutter-reduction equals increased productivity” trend

Jason lists some example articles, but also a list of decluttering things to consider on your blog.

Fad or not, I’m totally in favor of cleaning up the clutter and removing the unnecessary distractions from our blogs. I’m slowly cleaning up my own. What about you?

Site Search Tags: blog clutter, messy blogs, cleaning up your blog, declutter, decluttering your blog, blogging tips, how to blog, web design, blog design, blog cleaning
Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

WordPress Themes: The Ignored Footer

Lorelle VanFossen — Sat, 29 Sep 2007 12:18:08 +0000

Have you looked lately at the average WordPress Theme footer? That little bit of color and text at the bottom of a WordPress Theme? Lately, it seems that the only time it gets any attention is when people are looking for design credit, embedded links and ads, and other nasties.

Sometimes I think the web designer puts so much energy into the rest of the Theme that they lose interest by the time they get to the footer. Some WordPress Themes don’t even show a footer. Or they emulate the Hemingway WordPress Theme and put all the navigation links in columns in the bottom, turning the footer area into the sidebar.

I think it’s time we took back our WordPress Theme footers and gave them the attention and respect they deserve.

The Purpose of a Blog Footer

The footer in a web design is the bottom of the page. It indicates the end of the page. The footer includes navigational links to move the reader into your blog’s content, but it does so much more.

It’s the last thing some visitors see after they finish reading your blog post and comments.

When you scroll down past all the content and comments, there lies the footer. Shouldn’t it be helpful? Shouldn’t it invite the visitor to dig deeper? To move around and find more information? Shouldn’t it give them one last taste of who you are and what you blog about?

In the early days of web design, the footer was the placeholder for links to the About, Contact, Copyright, and other information that helped the visitor learn more about the site. Like business stationery featuring the address and phone number at the bottom of the sheet of paper, the footer provided critical contact information. Somewhere alone the line, the footer became forgotten or overlooked.

What should be in your footer? Should you have a repeat of your WordPress Page links like About, Contact, Copyright, Policies, and other links? Should you have a list of your primary categories? Since it’s the last thing many readers see at the bottom of your blog post, what could you put in your footer to encourage the visitor to stay a little longer or learn more about you and your blog?

The WordPress Footer

The HTML code for the Default WordPress Theme’s footer is stored in the footer.php template file:








 is proudly powered by

WordPress


">Entries (RSS)

and ">Comments (RSS).

 queries.  seconds. –>



http://binarybonsai.com/kubrick/ –>

The first code is for a horizontal line, which divides the footer from the rest of the page. When the footer is generated on your blog’s web page, all that code displays is a paragraph with the sentence and links:

My Blog Name is proudly powered by WordPress
Entries (RSS) and Comments (RSS)

The Optional and Hidden Footer Code

Some of the rest of the “hidden” bits of information in the footer are optional and there to help you if you need them for troubleshooting.

Within the comment code () is link and text that does not appear on your blog unless you choose to have it show by removing the comment code. Removing the comment code would display the credit line to Michael Heilemann and a link to the Kubrick site, if you want to give credit where credit is deserved for the Theme.

Inside of the /* text here */ in the PHP code that says “Just what do you think you’re doing here, Dave?” is also a comment and doesn’t show, unless you remove those slash astericks. This is a little inside joke as the Theme is called Kubrick, after Stanley Kubrick, the director of the movie, Space Oddysey 2001.

Another bit of code hidden within comments is a PHP query used to test the number of database queries needed for each page load. This is a commonly used testing device and doesn’t show on your WordPress blog. If it’s in your Theme’s footer, consider leaving it there. For now, we’re going to ignore it.

At the bottom is a call to the wp_footer() which is used by WordPress Plugins as part of the Plugin API Hooks to help run the Plugin and actions that take place at the end of the page’s loading.

Did you know all these things were happening behind the scenes within your blog’s footer? They are, but we’re going to deal with what the user sees when they reach your blog’s header.

In tomorrow’s article, I’ll cover Customizing Your WordPress Theme Footer.

Site Search Tags: wordpress themes, wordpress tips, footer, theme footer, kubrick, default theme, default theme footer, web design, blog design
Subscribe Via Feedburner Subscribe by EmailCopyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won’t Tell You About Blogging.

Creating a Clickable Header in Your WordPress Theme

Lorelle VanFossen — Sat, 29 Sep 2007 00:58:30 +0000

While working on the CSS design for this site, I wanted two things:

A site design that meet web accessibility standards as much as possible.
A header design that was interesting, original, and clickable.

The accessible part was easy. The Sandbox WordPress Theme, which allows WordPress.com users to customize their blog Theme, puts the blog title into an H1 heading tag and link by default.

This covered the accessible part of my goals. What wasn’t covered was how to keep the h1 heading text and link of my blog title while allowing the whole header area to be clickable, creating an easy way for a reader to click from any page on my blog to the front page.

When I added the background image for the header, I could only have the text in the H1 header clickable, but not the entire header image area. I wanted the entire header area clickable. I tried various text-image replacement techniques, researching the web for days for a solution, but none worked until I discovered this great technique from WestCiv Style Master Tutorials.

It’s not glamorous, but the code validates and it works.

So if you want a background image in your header and a header image and area that is clickable, this is one method to try.

Creating a Clickable Space

While the h1 heading tag is clickable for the blog title, I wanted the whole header image area clickable, so I had to expand the “link” tag to include the whole image area.

In the Sandbox Theme, the areas involved are the header, h1, #blog-title, and #blog-description divisions.

The HTML structure looks like this:



Lorelle on WordPress


Helping you learn more and do more with WordPress

As you can see, the only area covered by the link in the header is the h1 tag, highlighted in red. I wanted to cover the entire header image area with a link.

Since my logo has the name of my blog in it, I didn’t need the redundant text in the blog title heading. The key was to enlarge the link area, while preserving the h1 tag and hiding it. I also needed to “hide” the blog-description tag as I define the information in my sidebar.

When viewed with a text reader or without the stylesheet, the h1 tag text with the title of my blog and the blog description are both visible. But when viewed in a traditional browser, they aren’t “seen”. All you see is the header image which is now in a clickable link.

The CSS is:

body {
	background-image:url('http://lorelle.wordpress.com/.../low-logo.jpg');
	background-position: top left;
	background-repeat:no-repeat;
	background-color:#005771;... }
#header { height:150px;
	background-color:transparent}
h1 { font-size:1pt;
	text-align:right; }
#blog-title, #blog-title a { color:#005771;
	background-color:transparent; }
#blog-title a { position:absolute;
	left:15px; top:6px; width:800px;
	height:150px; }
#blog-description { display:none; }

Here is what all this means:

The logo is set in the body tag at the top left corner of the page. This remains visible if all the containers above it are set to have the background be transparent and to accommodate the image height and width. I couldn’t get this to work with the logo in any of the other HTML containers. It had to be in the background.
The header DIV is set as a fixed height of 150px which stretched it high enough to allow the background image in the body tag to be visible.
The h1 heading tag for the blog title is reduced to 1 point in size, shrinking it “out of sight” but making it visible without a stylesheet and to text readers, and aligned to the right, pushing it over into the solid colored area.
The blog-title DIV includes the area of the blog title (h1) and any links within the blog-title area, setting the background-color to transparent, allowing the background color from the body tag to come through, and then the text is colored to match the color of the background. Thus, it’s disguised and blends in.
The blog-title anchor link is then “sized”. First, the position is set for the top, left corner of the page, and then the width and height are defined as 800px x 150px, filling the entire header image area. The 800px width covers the average screen width.
The blog-description is hidden from the browser’s display.

The end result is that the blog-title link covers the whole header area, making it clickable, the page meets web standards, and I get the clickable header I want.

Site Search Tags: wordpress themes, wordpress tips, header, header design, header link, clickable header, header art, header image, blog title, blog description, click header, link in header
Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

Is Your Site Ready for the New Mobile Internet?

Douglas Bell — Tue, 11 Sep 2007 12:19:25 +0000

By Douglas Bell

Now before you start getting any ideas in your head about those baby cell phone web browsers and WML (Wireless Markup Language), just stop right there. This article is talking about the new mobile internet. The new mobile internet doesn’t contain the baby web pages that you may be used to on a mobile device, but it is an internet that actually looks like the real internet, feels like the real internet, and interacts with the user almost like real internet. If you haven’t guessed, it is the internet that premiered with Apple’s unveiling of the iPhone.

Now, people may have varying opinions about the iPhone, some may like it, some may not like it, and some may even be reading this article right now on their iPhone. However, even when you put any feelings you may have about the iPhone aside, Apple has now made the future of mobile internet clear. It is the real internet, but one that is tapped, flicked, and pinched around on a touch screen device. If you ask most analysts about what the future of the mobile internet is, they will mostly agree that the future of the mobile internet will be an iPhone-like experience. For the moment, at least, this pretty much represents just the iPhone, and Apple’s new similar product, the iPod touch, but rest assured that we’ll start to see this kind of technology pop up elsewhere. And that means that as the iPhone and iPod touch pick up steam, and as other similar mobile devices emerge, we as web designers need to be ready. That’s what this article is about: how to get your site ready for the iPhone and beyond.

There’s Nothing to It, Literally

Actually, the first thing to note is that you don’t have to do anything to get your site ready for the iPhone! It’s already there!

The web browser on the iPhone is the exact same Safari web browser that runs on Mac and Windows, and it renders web pages exactly the same way. What you see on your computer is what you get on the iPhone, so if you’re website is loading on Safari, it will (with a few exceptions) load exactly the same on the iPhone, ready for your mobile visitors to start looking around. However, there are some things that you can do (or perhaps already are doing) that can optimize the viewing experience for iPhone users.

Some Finger Food for Thought

When you’re designing a site with the iPhone in mind, the first thing you have to remember is that the internet on the iPhone is different from a traditional web browser.

For starters, there is no such thing as a “window” on the iPhone. The browser display is always at a fixed width of 320 x 240 pixels, which fills the iPhone’s screen. When the webpage loads on the iPhone, it shows up so that the entire page fills the screen–which means it’s way too tiny to read. The user can navigate the page by dragging or flicking his/her finger around the screen to move the page around. In order to actually make the content readable, the user can use two fingers to pinch out to zoom in the page. Alternatively, if the user double-taps on a particular object on your page, the iPhone will automatically zoom in on that object so that it fills the screen. The user also has the ability to rotate the iPhone sideways to display your site in landscape mode–this means that the window can alternate between 320 x 240 or 240 x 320 pixels, depending on the orientation of the phone. Single-tapping emulates clicking for links, buttons, and Javascript onClick actions.

The iPhone does try to submit Javascript actions to the site with as much integrity as possible, but there are some actions which cannot take place on an iPhone. iPhone does not submit Javascript actions when scrolling or zooming a page, and other things like onMouseMove or onResize would make absolutely no sense on the iPhone, as an example. The iPhone also does not support text selection, drag-and-drop, or copy/cut/paste actions. There are even other finer details to think about which may never cross your mind, for example, fingers come in many different shapes and sizes, so if you have a bunch of links really close together, it may cause a problem for certain people. When you really understand how the iPhone and the web page interact, you start to notice aspects of web pages that you would never think about on a computer.

Teach Your Website to Tap Dance

If you ask someone at Apple what the most important aspect of the iPhone web browsing experience is, they’ll tell you that it’s double-tap. The ability to quickly zoom in on a particular object, have it grow to fit the full screen, and then be able to quickly zoom back out to see the whole page is what allows this new interface to work. But what can you do to make sure that your site will look it’s best on the iPhone? Here’s a few finger tips to start with:

Use the latest web standards. HTML 4.01, XHTML 1.0, CSS 2.1 (and some partial CSS3), JavaScript, W3C DOM Level 2, and AJAX technologies are right at home on iPhone.
Separate your HTML from your CSS and your Javascript by putting them in separate files, and linking to them in the HTML header.
Java and Adobe Flash are not supported on the iPhone. The iPhone can open and browse through PDF, Microsoft Word, and Microsoft Excel documents, but most other documents are not supported and there is no way to save these downloads.
The iPhone does not render WML, however it does support XHTML mobile profile doctypes and sites with .mobi domain names.
The iPhone supports GIF, TIFF, and PNG images up to 8 MB, and JPEG images up to 128 MB. Animated GIFs must be less than 2 MB, otherwise only the first frame will be shown.
Form elements are supported, however when they are selected, the iPhone’s screen splits to reveal the keyboard or a drop-down menu selector, which minimizes the space available for your web content. File upload form elements are disabled as iPhone does not have a filesystem.
Use columns in your web page. Double-tap zooms in a particular object by making the width of the object fit the screen, but if it already fits across the full width of the page, the iPhone will be unsure of how to zoom in on it. The user will then have to choose between pinching out to zoom in the page, and then scrolling the page back and forth, or else turning the iPhone into landscape mode to make the text readable.
Does your website load properly in Safari 3 for Mac or Windows? If so, it will probably load properly on the iPhone as well.

Phone Calls, E-mails, and Maps, Oh My!

One of the more disputed aspects of the iPhone is that, as of the writing of this post, Apple has not allowed third-party development on the iPhone, although there are a number of hacks now that have sort of opened the gates. However, Apple’s offering to wannabe iPhone developers was to simply develop a web application designed for the iPhone, and Apple offers a couple of ways to integrate into the iPhone’s abilities to make phone calls, send e-mails, and look up maps.

Telephone Numbers: Apple offers a new kind of link which, when tapped, will offer to place a call. The syntax looks like:

Call 1-408-555-5555

(Incidentally, I just found a bug in WordPress, in that it tries to strip the “tel” from the link!) However, even if telephone numbers aren’t linked in that way, the iPhone looks for numbers on a web page that could resemble a telephone number and automatically turns these into links.
E-mails: The iPhone treats e-mail links just like regular e-mail links:
Email Frank
Maps: Links to Maps opens in the iPhone’s Google Maps application. Any link to the Google Maps website will automatically open in the Maps application on iPhone. Example:
Cupertino

A Mobile Media Mania

More and more these days, the web is becoming less about text and more about audible/visual media, and while the iPhone may have a great iPod built-in for your audio and video, there’s a lot more out there on the wild jungle that is known as the internet. For starters, the iPhone does have a built-in YouTube browser, but what if you host your own content, or you are a podcaster (audio or video)? There are a number of things you should know to make sure that your site is accessible to iPhone users.

Unfortunately, as of the writing of this post, the iPhone has poor support for RSS. It would be great if you could subscribe to a podcast right on the iPhone, have the iPhone’s iPod features download the newest episode, and then have that podcast sync onto iTunes once the iPhone is docked. Unfortunately, this is not supported. Furthermore, Flash is not supported, so if your podcast site relies exclusively on a Flash player, you need to add manual Download links to link to the actual episode, so that your iPhone visitors actually have a way to get to your episode. For audio, the iPhone is compatible with AAC and MP3 files. For video, the iPhone is compatible with .mov, .mp4, .m4v, and .3gp files, so long as the originating server is aware of these MIME types.

However, when you’re preparing content (particularly video content) for the iPhone, you need to keep in mind that there are two kinds of “pipes”. There’s Wi-Fi, which is as fast as wireless internet on your typical laptop, and there’s EDGE, which is AT&T’s cellular data network, and which is much slower. If you have iMovie ‘08 (Mac only) and/or QuickTime Pro version 7.2 or later (Mac and Windows), the export panels include options for “Movie to iPhone”, which optimizes the movie for the iPhone over wifi, and “Movie to iPhone (Cellular)”, which optimizes the movie for the iPhone over EDGE. Apple offers a great tool called MakeRefMovie, which generates something called a “reference movie”. Essentially, if you link to this movie, it will run a number of tests to determine which platform you are on, and based on the result of the tests, it will download a movie optimized for iPhone EDGE, a movie optimized for iPhone Wifi, or a movie optimized for a regular computer. If you’re embedding a video on a page, specify a poster image (just add an src=”" to the embed tag of the video which refers to a particular image file), so that your visitors get a better viewing experience.

Finally, your server must support byte-range requests, which iPhone requires before it will even allow the user to download media content. This is essentially a technology which allows random access to a particular file, meaning, for example, that an iPhone user could jump to the middle of a video before that much data had been downloaded already. Most HTTP 1.1 servers support this already, but some don’t; the best way to check is to run the following terminal command (replacing the URL below with one to an actual media file):

curl --range 0-99 http://example.com/test.mov -o /dev/null

If the tool reports that it only downloaded 100 bytes of the file, byte-range requests are supported. If it downloads the whole file, however, then byte-range requests aren’t supported and the iPhone will refuse to download any media files on that server.

Tap Into More Info

These are just some of the basics on how to make your site look good on the iPhone. There’s a lot more you can do, from setting the default viewport to setting a separate iPhone stylesheet to determining text zoom during double-tap. For much more information on how you can completely optimize a page or a web application for the iPhone, check out Apple’s Official iPhone Web Development Guidelines and the associated video (free ADC membership required).

The iPhone is a brand new way for users to experience and interact with the internet, and without a doubt, it won’t be long before its technology will be spreading to other devices. (We just have to wait for a couple of patents to expire.) By getting your site ready for the new mobile internet now, you’ll be ahead of the curve and ready to serve to an emerging new field of visitors.

Besides being the inventor of the fictional phenomenon of deep-fried pickle hearts, Douglas Bell is a junior in high school who designs websites as a hobby for fun and for profit. He is the producer and co-host of the podcasts PreviewCast and phpBB Weekly. He is also the mastermind behind his personal blog, Webmacster87.info. He does not own an iPhone and has never owned an iPod, nor does he expect to anytime soon.

Sandbox Design Competition Winners

engtech — Tue, 07 Aug 2007 16:30:33 +0000

This is a guest post from engtech of Internet Duct Tape.

As a follow up to my post last Thursday, the Sandbox Design competition has completed and all the designs are available for download in one file (7 MB) or can be viewed on the live preview site.

Congratulations to the winners!

But don’t stop at checking out only those designs. That’s only one fifth of all the designs that were submitted for the competition. As I’ve browsed through the designs I’ve seen so many examples that left me thinking “wow, I didn’t know you could do that with Sandbox!”

Much like CSS Zen Garden, the Sandbox designs are a testament to the power of CSS and how content and design can be separated so that new designs can refresh old archives.

engtech blogs regularly at Internet Duct Tape. His latest post was How do people use Google Reader with Internet Explorer? Subscribe to Internet Duct Tape by RSS or by email.

Lorelle on WordPress » Web Design

Stripped Down Naked to Honor Web Designers and Developers

Honoring - and Challenging - Web Developers to Break the Last Barrier

Strip Down Your Blog: CSS Naked Day

Make Your WordPress Blog Naked

Related Articles

Are You Ready and Willing for CSS3?

Yeah, But What About the Browsers?

Microformats

Related Articles

Preparing for the Annual “What I Want Gone from the Web” Post

Cleaning Up and Decluttering is Back

Related Articles

WordPress Themes: The Ignored Footer

The Purpose of a Blog Footer

The WordPress Footer

The Optional and Hidden Footer Code

Creating a Clickable Header in Your WordPress Theme

Creating a Clickable Space

Lorelle on WordPress

Related Articles

Is Your Site Ready for the New Mobile Internet?

There’s Nothing to It, Literally

Some Finger Food for Thought

Teach Your Website to Tap Dance

Phone Calls, E-mails, and Maps, Oh My!

A Mobile Media Mania

Tap Into More Info

Sandbox Design Competition Winners