I just completed a new website for an amazing organization located here in my hometown of Sarasota, Florida: West Coast Martial Arts Academy(WCMAA). WCMAA has been teaching martial arts in Sarasota, Florida since 1979, they hold the highest standards with a commitment to excellence that is unsurpassed. These guys teach a large array of arts…

• Kids’ Karate
• Kids’ Tae Kwon Do
• Kids’ Mixed Martial Arts
• Okinawan Shuri-Ryu Karate-Do
• Tae Kwon Do
• Go Dai Henka Jiu Jitsu Ryu
• Wing Chun Kung Fu
• Kuntao / Arnis / Baguazhang
• Muay Thai Kickboxing
• American Boxing
• Savate French Kickboxing
• Women’s Fitness and Self-Defense
• "Wise Guys" Adult Boxing and Fitness
• Mixed Martial Arts

WCMAA is the real deal, and I feel very lucky to be able to re-brand and develop their new website.

Web Design for Mobile Devices

With such a large amount of talent and resources, these guys are highly in-demand to a global scale. WCMAA has a new location in Somerset England, and has plans to grow even further. This is a website that must work on any device, for different target audiences across the globe. I decided to travel the path of responsive website design, insuring that this website would be future-proof until we start surfing the interwebs with "high definition holographic cotton candy coated teenage mutant ninja turtle Android helmets" in the year 2023.

I began my strategy of creating a responsive website with a hard look at the information, and focusing on the goals of the project to guide the UX through the diversity of known technologies. My mind raced with questions and answers I have obtained from UX Jedi Knights like Jesse James Garett…

• Cognition: Engaging the mind.
• Emotion: Engaging the heart.

Watch some of his videos and you will get the idea.

It was definitely an interesting process of architecting the information for a large desktop, to a tablet, and then to a tiny mobile device. Designing the UX for a responsive site is a more in-depth venture than a fixed pixel project, and way more time consuming.

Top 5 Responsive Web Design Technologies

When I first began developing the new WCMAA.com website, I was overwhelmed with the new amount of technologies and articles for responsive web design available to me. There are so many resources out there, where should you look first when you begin building your site? Well, I have already done a ton + 2 of research, and I have a filtered top 5 MUST-have responsive web design technologies for you!

1. 320 and up
   http://stuffandnonsense.co.uk/projects/320andup/
   "‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design. ‘320 and Up’ is a device agnostic, one web boilerplate.”
   This is the starting point, we all need a place to begin. 320 has all the rules in place for you to start building your responsive website for all devices.
2. Modernizr
   http://www.modernizr.com
   "Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites."
   Modernizr does so MANY things that I can’t even begin to write them all down, trust me and read all about it on their website.
3. imgsizer.js
   http://unstoppablerobotninja.com/entry/fluid-images/
   "imgsizer.js: improve IE’s rendering of resizable images."
   This JS helps IE out with its image-sizing problems, you will of course be resizing most of your images in a responsive website.
4. respond.min.js
   https://github.com/scottjehl/Respond
   “A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)”
   Older versions of IE SUCK, no shiz… well this polyfill helps IE understand media queries.
5. Browser Stack
   http://www.browserstack.com
   “Live Web-Based Cross Browser Testing”

You need to test as you’re developing, and you need to test on a lot of devices. Browser Stack has Android to IOS, with many different devices. This service is 100% necessary, and I am happy it’s out there.

WHAT UP?!

I hope my list above helps you in your responsive website ventures. Please visit WCMAA.com and send me your comments on the site, I’d love to hear ALL the good and bad things you may have to say.

CSS SEXY

I have fallen in LUST with Responsive Web Design, my iPhone and I can’t get enough of websites interfacing our queries while they dress all CSS-SEXY for us. I love the fact that many companies are now catering to my 320px fetish; many of today’s websites are even designed to fit my viewport all the way to my max-device-width. You may SCREAM the “safe word”, but mobile devices won’t stop using more bandwidth globally until we all “get off” our phones.

I began studying Responsive Web Design late in 2010, and have come to gather a good understanding of the subject. I wrote an entry on this matter last year titled “Responsive Web Design and Adaptive Web Design”, since then I have dominated the realms of Responsive Web Design and have made them my bitch for my own amusement.

IE Display Table Block == Odoriferous Underside of a Donkey

I was only dreaming that everything in the land of Responsive Web Design was under my control. I smelled the odoriferous underside of a donkey the moment I tried to make Tables work for Responsive Web Design. Tables just do NOT cater to my 320px web fetish. As hard as I try to beat them into submission, Tables are just TOO BIG for my device.

As such, Lord Google advised me to read an article by Chris Coyier titled “Responsive Data Tables”. Chris broke down the fact that no matter what you do…

“Data Tables don’t do so well with responsive design. Just sayin’.” - Chris Coyier.

He gives us a great solution for styling tables differently at key Media Queries: basically we kill the tHeader, then use pseudo classes to inject the tHeader inside the Table cells adjacent to the main TD content. Displaying all the Table child tags as BLOCK will give us flexibility. See Chris’s code example…

table, thead, tbody, th, td, tr {
display: block;
}

AWESOME, this will solve most of our problems; Chris points out that the Donkey in the room is IE, IE can not handle Table elements displayed as Block.

“Sigh. Here’s the deal. IE (even 9 and 10 preview) don’t like you setting table elements as display: block; It does weird stuff and doesn’t work right.” - Chris Coyier

I know I can just NOT include this solution for IE, but I can not hide from IE. People do use IE, there is no way around this!

jQuery says “.replaceWith”  WHAT

My solution to this whole IE sucks shiz on Sunday issue is this: use jQuery to replace my Tables with DIVs. Phuk yes, if Table tags are the problem, then “a problem got a problem ’til it’s gone” – ODB (RIP). So let’s kill us some Tables :)

// REPLACE TABLE
$('table').replaceWith(function(){
return $("<div class='tablearea_table'/>").append($(this).contents());
});

	// REPLACE TD
	$('td').contents().unwrap().wrap('<div class="tablearea_cell"><div class="tablearea_cellitem">');

	// REPLACE TH
	$('th').contents().unwrap().wrap('<div class="tablearea_header"><div class="tablearea_cellitem">');

	// REPLACE TR
	$('tr').replaceWith(function(){
    return $("<div class='tablearea_row'/>").append($(this).contents());
	});

	// REPLACE THEAD
	$('thead').replaceWith(function(){
    return $("<div class='tablearea_headerrow'/>").append($(this).contents());
	});

	// REPLACE TBODY
	$('tbody').replaceWith(function(){
    return $("<div class='tablearea_tbodyrow'/>").append($(this).contents());
	});

	// Odd and Even Classes
	$('div.tablearea_row:nth-child(even)').addClass('odd_rows');//Rows
	$('div.tablearea_cell:nth-child(even)').addClass('odd_columns');//Columns

	// First Column TD
	$('.tablearea_row .tablearea_cell:first-child').addClass('first');

Now we use our new classes to style our “Table”.

	.tablearea_headerrow{								/* thead */
		display:block;overflow:hidden;clear:both;
		width:100%;
		font-weight:bold;
	}

	.tablearea_tbodyrow{								/* tbody */
		display:block;overflow:hidden;clear:both;
		width:100%;
		color:#35505f;
	}

		.tablearea_row{									/* tr */
			display:block;overflow:hidden;clear:both;
			padding:0px;
			width:100%;height:auto;
		}
			.tablearea_header	{display:none;}			/* th */

			.tablearea_cell		{						/* td */
				display:block;overflow:hidden;
				padding-left:50%;
				width:100%;height:auto;
				background:none;
				position:relative;
				text-align:left;
			}

			.tablearea_cell:before {
				position:absolute;top:6px;left:6px;
				width:45%;
				padding-right:10px;
				white-space:nowrap;
			}

			.tablearea_cellitem {padding:2px 4px;}

	.tablearea_row.odd_rows .tablearea_cell {background-color:#ccc;display:block;overflow:hidden;}

	.tablearea_cell.odd_columns 	{/* Go Nutz */}

	/* =============== Label the data  =============== */
        .tablearea_cell:nth-of-type(2):before { content: "IE"; }
        .tablearea_cell:nth-of-type(3):before { content: "Firefox"; }
        .tablearea_cell:nth-of-type(4):before { content: "Chrome"; }
        .tablearea_cell:nth-of-type(5):before { content: "Safari"; }
        .tablearea_cell:nth-of-type(6):before { content: "Opera"; }
        .tablearea_cell:nth-of-type(7):before { content: "iOS Safari"; }
        .tablearea_cell:nth-of-type(8):before { content: "Android Browser"; }

See my full solution here http://useyourfred.com/_examples/2012/responsive-tables/index.html

I replaced all the Table tags with DIVs and assigned them classes. Will this work in IE? Yes it will. There are no more Table tags for IE to suck “Donkey D” on, we are free from IE…

You’re welcome.

WE ALL NEED HELP!

My jQuery band-aid is not perfect, it does have holes. Both Chris’s and my solutions will work if you are the one designing these Tables, but what about the CLIENT… EEK! Clients make Tables too, so there is a corner we are painted into. I based my solution on Chris’s solution, but more NEEDS to be done. We need a solution that will auto-detect the amount of columns in a Table, and write a class for us based on that style to a percentage. We need to have the THs written automatically into the CSS so we can echo out their values.

I challenge you Interweb!

I challenge you to RESPOND ;)

The Interweb “as we really know it” began as a small pond of ambitious servers in the 1990′s. Dial-up internet access was cumbersome, it took a lifetime just to load a web page. Now in the 21st century, the Interwebs have become a vast ocean of data. We can surf the seas at the speed of fiber optic light from the comfort of our own homes, or at our favorite fishing hole via smart phone technologies. The speed and bandwidth of today is amazing, and it is only gaining momentum.

We must be able to adapt to changes in browser technologies, as there are many new devices out there that must be supported. These new technologies do not just “surf” the Interwebs, they swim with the hunger of great White Whales consuming any data in their path. These new technologies can drive the “Captain Ahab” in you to grow angry and lose focus, but you must grab your harpoon and sail into the heart of the storm. Seek out new ideas, and learn new skills to keep your head above water like Ishmael to a twitter whale fail.

Adapt, Respond, and Overcome

“A List Apart” is one of the first places I always turn to for guidance. I found a great article by Ethan Marcotte titled “Responsive Web Design”, Ethan’s article really helped me get up-to-speed on the subject. Ethan explains the where and how to start using these new techniques.

1. A flexible, grid-based layout,
2. Flexible images and media, and
3. Media queries, a module from the CSS3 specification.

I will touch on just a few of Ethan’s points, but you need to read his book to get the full message.

CSS3 Media Queries

Media Types are something that most of us are already comfortable with. We use Media Types all the time to call Screen and Print style sheets. CSS3 Media Queries are a little different, these are used to call conditions of media features. We can call things like “orientation”, “device-aspect-ratio”, “min-device-width”, and many others to accomplish our goals. CSS3 Media Queries give us a lot of freedom to style for present and future devices as web browsers change with time.

Here is an example of CSS3 Media Queries being used to call different web devices, these are examples of Adaptive Web Design…

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

In the code above we see that “max-device-width” is being used a lot to define devices and state styles for their sizes. This is an easy way to define a device’s browser dimensions and then style appropriately. iPad, iPhone, and even their orientations are stated and styled via the CSS3 Media Queries.

Responsive Web Design

Let’s go back to Ethan Marcotte’s article and look at his example page. Try resizing his example page and you will see the design changes automatically to best fit the browser window. Some of Ethan’s code is sized by percentages; the formula for calculating your desired percentage DIV size is simple. If you start your design at a base of 960px, then 960px will be 100% of the width. Say you want the base width of your footer DIV to be 633px, well you divide 633px by 960px giving you a width of 0.659375. Just take the decimal point and move it two spaces to get your percentage, so the width of 0.659375 is really 65.9375%.

Let’s now look at the CSS3 Media Queries in his example. He has a max-width: 600px, 400px, and a min-width: 1300px. The max-width property sets the maximum width of the elements, min-width property sets the minimum width of the elements. We can see that once we fall below 600px, the columns stop floating and become one column to better accommodate smaller screen sizes.

Ethan is also using max and min-widths to state different sizes for other DIVs, then controlling those sizes by percentages as the user sizes the browser. The percentage technique is not just for users who resize their browser, but more importantly, to respond to different browser sizes in different devices. So Ethan’s example is adapting to set browser sizes of 1300px, 600px, and 400px. Ethan’s example is also responding to any changes in those browser sizes via percentages, thus making his example future-proof up to 1300px.

Mobile Web Design

A good combination of Adaptive and Responsive web design makes a healthy website. Device browser sizes can and will change over time; therefore, using percentages frees us from declaring a new CSS3 Media Query every time a new priority browser size is declared.

The genesis of these new concepts may have been Mobile Web Design; the iPhone was really the beginning of easy mobile web browsing. From this point on who knows what’s next, but we will be ready thanks to Responsive Web Design techniques.

Sometimes a few of the more important web site fundamentals get lost in the launch of a client’s project. These things range anywhere from a browser’s favicon image to the web site’s analytic performance tracking solution. All of the main core deliverables need to be the responsibility of the technology service entity and/or “cousin that makes them web sites on them there interwebs“. One of the most commonly missed core deliverables I have come across is the integration of Facebook’s Open Graph protocol. If you don’t know what “Open Graph protocol” is, then I suggest reading up on it here.

The basic idea is when someone links to your web site on Facebook, you want to have control over the image and description in their status. We do not want random images showing up in the user’s Facebook status, nor do we want random descriptions in there either. Facebook give us a simple API to manage this data, so why not take advantage of it.

Go to the Facebook developers’ web site and sign in. There are numerous tools Facebook offers, but we will just focus on the meat-and-potatoes concept of controlling the image and description in the user’s status for this post.

First things first, face up Facebook

Go ahead and sign in to Facebook, then go to their developers’ web site. You’ll need to create a new App, so click on Apps to get started. Once you have created an App, you’ll need the App ID. At this point we will need to paste in the Open Graph META code. The first line of your web site should be your doctype, the second line should be the HTML tag. In the HTML tag we need to add some Open Graph markup.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/">

Then in the HEAD tag, we need to add the following…

<head>

<meta property="fb:app_id" content="YOUR-ID-HERE" />
<meta property="og:site_name" content="YOUR-TITLE-HERE" />
<meta property="og:url" content="URL-HERE" />
<meta property="og:title" content="TITLE-HERE" />
<meta property="og:description" content="DESCRIPTION-HERE" />
<meta property="og:type" content="TYPE-OF-CONTENT" />
<meta property="og:image" content="URL-IMAGE.jpg" />
<meta property="og:email" content="YOUR-EMAIL"/>
<meta property="og:phone_number" content="YOUR-PHONE"/>

The only tag here that might not be completely obvious is the “og:type”. The “og:type” is asking what the content of this web site is defined as. Here is a link to all the available types. Once you add all the data correctly, you will want to validate your work. Go to https://developers.facebook.com/tools/debug and enter your web site address, hit “Debug” and watch the magic happen. Hopefully at this step you do not receive any error messages, and you get a nice screen that echoes out your data. Now the last thing to do is test this by entering your web site address into your Facebook status. Does it look correct?

I like your Facebook Like image :)

You did it! Facebook made this process painless and well-documented for fast implementation. Now that you have this ready to go, venture forth into the “Facebook Developer Zone” and explore the room. Get a good understanding of all the flavors of technology Facebook has to offer.

The number one search engine in the world is Google, obviously there is no question of that. The number two search engine may or may not surprise you, but it is YouTube.  I know…what a shock that people would rather watch a video than read, but video brings a lot of value to the table in the visual learning aspect. We can really get an exact explanation from a video’s author as they illustrate a process with their own voice.

For me, watching a video is an organic means of learning. It’s like the first time your Grandpa taught you how to fish, or the first time your uncle Gary showed you how to hotwire a 1965 Corvair in Jersey City when you were 8… Good times :).

Video is just more input to digest in the brain and makes it easier to process as you’re learning.

Since Youtube is the second most popular search engine, the equation is…

• Video equals = web traffic.
• Higher web traffic equals = happy, happy, joy, joy.

Thus, I began creating videos for all my blog entries in an attempt to double my organic user traffic. To promote my web site, I created both a YouTube and a Vimeo channel.

• http://www.youtube.com/frederickweiss
• http://www.vimeo.com/frederickweiss

I will see how this works out as time goes on; the analytic data should result in higher user traffic as I add more videos to my blog.

Podcast creation tools

I found a great tool for creating screen casts, it’s called ScreenFlow. ScreenFlow will record from your computer’s camera, microphone, or monitor. ScreenFlow makes it easy to add media to your recording; you can simply add music, text, images and even draw on your recordings with ScreenFlow. When your video is ready, you can publish to YouTube or Vimeo directly from the ScreenFlow interface. This is one of the best purchases I’ve made for software; if you’re looking to create a screen cast, this is the software.

Plugins don’t usually get me all that excited, but this one definitely does. One of my friends at work just turned me on to this new panel for Adobe Fireworks called “Tables”. This is a big time-saver if you have a lot of designs with table data. You can create tables directly in Adobe Fireworks, or import TXT or CSV tabular data files that are already formatted, then change the styles with ease.

Naturally you would think that a table design panel requires you to enter all the data in some sort of table structure. The Fireworks Tables panel only requires you to align your data on the page into a grid, select it, then press a button to create the table… super easy.

Modifying the table is made simple: adding additional elements or changing styles is done with a push of a button. Adding images or text is done by placing the content over the grid and pressing “update”. The update will place the new items in the table, allowing you to add or remove items as you wish.

Table Styling

The Fireworks “Tables” panel give you access to change the fundamentals of a table such as cell padding and borders, table padding and borders, and their colors and background colors. The UI also allows you to change the alignment of cells, rows, and columns along with their widths and heights. Another cool feature is the ability to add a header and footer to the table, and assign them their own attributes like colors and sizes.

Check out John Dunning’s plugin here http://johndunning.com/fireworks/about/Tables

I have always written a few separate CSS files in the necessity to discipline different platforms with various bad behavior patterns. I have been fixing Fixed Position positions, and boxing up Box Models boxes more times than I would like to admit. Many developers starting in the field can not grasp the concept that an internet browser and/or OS may interpret their code completely different from one to the next, but it is a fact that developers work with every day.

Most seasoned developers still have nightmares of being chased by the anthropomorphic cyber boogeyman known as “Internet Explorer 6″; this absolute demonic personification of evil has devoured centuries of time in many businesses’ projects. Now with the death of IE666 we can all awake from the night terrors with a little relief, but there are still real world challenges that await us in the light of day.

Internet Explorer 7, Internet Explorer 8, and Internet Explorer 9 all have their bugs, but they are not alone. FireFox, Safari, and Google Chrome also have their share of roach infested summer basements. All internet browsers have quirks that make them different from their peers, good and/or bad. Different OS versions of browsers may also display an array of flavors and textures that may not be expected and are sour to the taste. Different hand held devices now hold the same challenges as any other internet browser: iOS, Android, and Blackberry being the main contenders.

CSS Weapons of Mass Construction

Instead of writing an army of user agent detected CSS soldiers, I have found a weapon of mass construction called “CssUserAgent“. CssUserAgent echos the browser’s user agent string in a class attached to the HTML tag. If you look at Google Chrome on a Macintosh, you will get the following code echoed in the HTML class…

<html class="ua-webkit ua-webkit-534 ua-webkit-534-24 ua-chrome ua-chrome-11 ua-chrome-11-0 ua-chrome-11-0-696 ua-chrome-11-0-696-71 wf-atramentweb1atramentweb2-n4-active wf-atramentweb1atramentweb2-n7-active wf-active">

This is translated from user agent…

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24

The user agent string details are appended by the prefix “UA”, which stands for User Agent. I am sure you have made the connection by now that this is a very powerful tool for user agent CSS targeting, and that this is all done in one CSS file. You can target different browsers and devices in a number of ways…

.ua-ie-6 	{position:absolute;background-image:url(logo.gif);}
.ua-ie-8 	{position:fixed;background-image:url(logo.png);}
.ua-ie-8 	{position:fixed;background-image:url(logo.png);}
 .ua-ie-9 	{position:fixed;border-radius:10px;background-image:url(logo.png);}
 .ua-webkit {position:fixed;-webkit-border-radius:10px;background-image:url(logo.png);}
.ua-ios-3	{position:absolute;-webkit-border-radius:10px;background-image:url(logo.png);}

Circumventing the problem and running straight into the solution with CssUserAgent is a pleasure. CssUserAgent makes it so easy to target different browsers, browser versions, operating systems, and mobile devices and in a fraction of the time it took to write user agent detections. My professional opinion is  download CssUserAgent right now and start developing CSS user agent targeted solutions that will save you time and help you sleep at night. The anthropomorphic cyber boogeyman will bother you no more :)

Google analytics makes it easy to track user actions. Google event tracking empowers you to track events that may not result in a page view, but are important user behaviors that will impact and guide your UX design.

Google event tracking is really easy to implement…

_trackEvent(category, action, opt_label, opt_value)

• Category (required)
  The name you supply for the group of objects you want to track.
• Action (required)
  A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
• Label (optional)
  An optional string to provide additional dimensions to the event data.
• Value (optional)
  An integer that you can use to provide numerical data about the user event.

Implementing Google Event Tracking

I have three CTAs on my home page that toggle information about my process. Once the user performs a click on the CTA, it then asks the user to click another button to go through a conversion funnel. I can track when users click the toggle, and compare that information with how often the user then clicks the CTA to go through that conversion funnel to the goal. Tracking these two event behaviors will give me information on how good my CTAs are, and what information my audience finds valuable. The result of these events might change my perspective of the UX design as: I can find this information proves my CTAs are flawless, or that I need to reconsider the information architecture.

_gaq.push(['_trackEvent', 'PROCESS FLIP', 'flip', 'PLAN']);
_gaq.push(['_trackEvent', 'PROCESS FLIP', 'flip', 'DESIGN']);
_gaq.push(['_trackEvent', 'PROCESS FLIP', 'flip', 'BUILD']);

onclick="_gaq.push(['_trackEvent', 'PROCESS LINK', 'click', 'PLAN']);"
onclick="_gaq.push(['_trackEvent', 'PROCESS LINK', 'click', 'PLAN']);"
onclick="_gaq.push(['_trackEvent', 'PROCESS LINK', 'click', 'PLAN']);"

User Experience Strategy

I strongly suggest tagging your events, I have found the resulting information extremely valuable in guiding my own UX strategy. Assuming you already have Google Analytics installed, the next step is to read up on Google Event Tracking, and then develop your tracking strategy.

Building a web site optimized for the iPhone can be really fun and super easy. All one needs to do is load the iPhone CSS via the media type and load 300 DPI images for retina display iPhones… All pretty simple. I wanted to launch my new web site with a mobile version, of course time always wins out and I had to wait a week. I finally launched an iPhone version and have Droid and Blackberry versions on the way.

Media Type

The iPhone site started with a basic user agent detect for iPhone and iPod. Then the loading of the CSS followed.

if ((stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) || (stristr($_SERVER['HTTP_USER_AGENT'],'iPod')))

<link rel="stylesheet" href="./iPhone.css" media="screen and (max-device-width: 480px)" />
<link media="only screen and (max-width: 320px)" rel="stylesheet" type="text/css" href="./iPhone-portrait.css"/>
<link media="only screen and (min-width: 321px)" rel="stylesheet" type="text/css" href="./iPhone-landscape.css"/>

If you are not familiar with Media Types then take a look at the W3C’s explanation to get up to speed. I have a main CSS file that I call in for all my iPhone styles, and I also have a Portrait and Landscape CSS file for iPhone user orientation. These two files are called in via media type declaration of max and min widths.

Retina display

The next thing to think about was the retina display on the iPhone 4. The iPhone 4 requires 300 DPI images that are double the size of normal images. This means that if you have a 100×100 pixel image that is 72 DPI, you need to create a 200×200 image that is 300 DPI for the iPhone 4 retina display. So open up FireWorks, create a 300 DPI file and double the size of your images.

Next you will need a way to display your very large images at a normal size. If you have a 200×200 image that needs to echo out at 100×100, then it better echo at 100×100. Simply use the background size property along with your background image call.

-webkit-background-size:100px 100px;
background:url(./yourImage.jpg) 0px 0px no-repeat;

Viewport

The last bit of code to think about is the viewport, this is one line of code that is very important.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

This will tell the user’s device how to behave when viewing your site. You want your site to be the correct width so the user doesn’t need to zoom into your content. This is a simple explanation for an important line of code.

Hit me

Hit me up for tips if you have any questions on creating a site for the iPhone, happy to help.

I recently began studying Magento… “Ecommerce Platform For Growth”. I am excited to develop in this technology, and I have heard a lot of great things about it. One of the newest techniques I came up with is “Dynamic Static Blocks”, or so I coined it. A Dynamic Static Block is a Static block that holds other Static blocks… Sally sold seashells by the seashore… I know I know :)

“Static Block can be used throughout your theme wherever you want to make small updates to a section of a page. Typical uses would be for promotional banners/callouts in sidebars or for some custom text in the middle of your home page.

Static blocks can also be inserted into CMS pages or included in category pages.” http://www.magentocommerce.com/wiki/modules_reference/english/mage_adminhtml/cms_block/edit

I have found it very useful to create Static Blocks that are containers for other Static Blocks. An example would be creating a Static Block promotion area that will be used all through the site, this Static Block would hold other Static Blocks within it. I can insert my promo Static Block into any area or page, and I can make global edits just like an include file. This makes it very easy for the client to administrate their promo Static Block content. Create all the Static Block content for your Static Block, then simply insert the desired Static Block in the Dynamic Static Block.