Instead of using Javascript to redirect to a new directory with an iPhone mini-site, I decided to go the CSS Media Query route. With markup and content already in place, I figured using an iphone.css file that hid elements, changed widths, replaced images etc. would be the easiest way to go.

Here’s the steps taken:

#1: Set Up The CSS Media Query

In the head, place the following media query after your main CSS files:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css" />

This will call the iphone.css file on devices with a maximum screen width of 480 pixels.

You can also set up max-device-width for an ipad.css file as well, but I have not tested that out yet.

#2: Tweak The iphone.css File

The mobile Safari browser will still call your original CSS files, but the iphone.css file will override them since it is placed after the original CSS files.

Although the iPad supports the orientation media query…

@media screen and (orientation:portrait)

and

@media screen and (orientation:landscape)

…the iPhone does not, but there is a workaround.

To style portrait mode, put this in your iphone.css file:

@media screen and (max-width: 320px)
{ ... put your portrait specific CSS here ... }

To style landscape mode, put this in your iphone.css file:

@media screen and (min-width: 321px)
{ ... put your portrait specific CSS here ... }

Depending on whether you layout your site with percentages, ems, or pixels, you will have to adjust every block element so that they are not wider than 320px in portrait and 480px in landscape.

Here is the site in portrait mode:

Here is the site in landscape mode, with the logo set larger and navigation spread further out:

#3: Set The Viewport

In the head, you’ll need to specify the meta data for the viewport. Paste the following there:

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

This will ensure that the iPhone won’t alter font sizes and disable users from pinch zooming.

#4: Create Your Apple Touch Icon

Size up your icon to 57×57 pixels and upload it to your server. When people press “Add To Home Screen” on your site, your icon link will be placed on their phone. The typical rounded corners and glossy overlay will be rendered automatically.

I decided to use the “P” of my basic Philadesigns logo as my Apple Touch Icon. I created it at 275×275 before resizing it to 57×57.

Some articles mention that you have to put the following link in the head as well…

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

…but I’m really not sure if it’s needed as it worked fine without this and having the apple-touch-icon.png in the root.

Here is the end result, with the Philadesigns Apple Touch Icon on the bottom right:

#5. Set The Inline Image Width

Most of my images, particularly within the blog section, are all set to a fixed width. In the iphone.css file, you can override this width so that they display nicely. Just add the following:

#content img {max-width:100% !important; height: auto;}

The Simple Bits Method

I’m not exactly sure how Dan Cederholm of SimpleBits.com did it, but their site scales beautifully! Open SimpleBits.com with your desktop or laptop browser and then minimize the browser width. The site still displays perfectly, and looks great on the iPhone as well.

Resources

• CSS Wizardry
• CSS Ninja
• Engage Interactive
• O’Reilly Community

Some people claim Mack & Manco Pizza as the ultimate kick-ass pizza in Ocean City, and it is quite tasty. I have nothing to compare it to in O.C. But it easily beats any Fishtown pizzeria — that’s for damn sure.

You can’t really see it, but Tommy is flying a kite in this photo. One of Melissa’s wedding shower gifts over a year ago was a massive 50 ft. kite that we were to take to Aruba. But we forgot to take it to Aruba. Soooo, we ended up flying it once in a vacant Fishtown baseball field. Below is the results of that:

Click here to view the embedded video.

Not too bad, but the beach winds killed this, allowing us to effortlessly soar the kite until there was no more rope.

The crew headed to the boardwalk.

Melissa tries out a new drink on the porch.

A very upset Brian on the his scariest amusement park ride of the day.

We went on a trip to Rio Grande, NJ to eat dinner one night at Menz Restaurant. My grandparents used to take us here a lot when I was a kid. Fun place with lots of crazy decorations, such as a stuffed 2-headed calf, and loads of American pop lore. Here my Mom stands in front of a statue of the man who used to own the restaurant. He used to sit in his wheelchair at the exit (he lost a leg to cancer as a teen), with a cigar, making sure the kids got their free taffy on the way out.

My parents, satisfied after eating at Menz Restaurant.

Melissa on the boardwalk.

Melissa and Steph.

The kit included everything needed for a hoppy Amber Ale. Since I never did this before, I decided to just follow the instructions word-for-word and not get creative. My aim was for it to be drinkable. Delicious would just be a bonus.

The malted extract.

I only use Fox Ledge Spring Water…because that’s what they sell down the street at Fishtown Market.

The hops in pellet form.

The dry ale yeast.

The wort…Pot by IKEA.

Initial fermentation.

Secondary fermentation.

22 oz. chilled bottle. (Thanks to Paulette for the bottles.)

Ready for drinking! (Thanks to Ray & Allyson for the glasses.)

You want one? Come on over!

Goodbye, Georgia…For Now.

The headlines and body font of my Philadesigns site used to be Georgia, but it is now another serif-based font called Vollktron, which is free to use commercially under the OFL (Open Font License).

Font Squirrel: Loads of Fonts and Font Format Generator

Under the OFL, there are tons of fonts to choose from, many of which can be found at Font Squirrel. Font Squirrel also has a kickass @font-face Generator that creates all of the font formats needed to support all major browsers (yes, even IE7 and IE8), allowing you to get nuts. Font Squirrel also gives you the CSS code to paste, with everything ready to download in a .zip file. Supah.

Font Formats

Depending on the browser, different font format files are needed to display the font. So, you’ll need to call a bunch of fonts in the CSS like this example with the Vollkorn Regular font:

@font-face {
	font-family: 'VollkornRegular';
	src: url('vollkorn-regular-webfont.eot');
	src: local('Vollkorn'), 
	local('Vollkorn-Regular'), 
	url('vollkorn-regular-webfont.woff') format('woff'), 
	url('vollkorn-regular-webfont.ttf') format('truetype'), 
	url('vollkorn-regular-webfont.svg#webfontGeigTbV2') format('svg');}

As stated earlier, Font Squirrel provides you with the CSS and fonts. You just need to add this to the CSS, copy over the font files (in a suitable directory), and then add the following to your whatever element tag you want to apply the font:

body {font-family: VollkornRegular, Georgia, Baskerville, Garamond, "Times New Roman";}

If the browser can’t read any of those fonts, then it will jump to Georgia. I’ve successfully tested @font-face in the following browsers:

• IE7 (PC)
• IE8 (PC)
• Safari 5.0 (Mac)
• Safari Mobile (iPhone)
• Firefox 3.6.6 (Mac)
• Chrome 5.0.375.99 (Mac)
• Opera 10.60 (Mac)

Learn more about what font formats are loaded by browser type.

Updated!

Due to a lag in load time, I have removed @font-face and have reverted the body font back to Georgia.]]> http://www.philadesigns.com/2010/07/18/font-face-nice/feed/ 0 http://www.philadesigns.com/2010/07/13/christmas-in-july/ http://www.philadesigns.com/2010/07/13/christmas-in-july/#comments Wed, 14 Jul 2010 03:08:44 +0000 Carl http://www.philadesigns.com/?p=2182 Been finally getting some code wet with HTML5, especially after reading HTML5 For Web Designers by Jeremy Keith. Below is a video of Santucci during Christmas of ’09, using the new video element.

The Video

Within the video element, two video files are served up: .MP4 for the latest versions of Safari and Chrome, .OGV for the latest versions of Firefox and Opera. Latest versions supported are listed here.

Unfortunately, if you are using Internet Explorer, you won’t see this video. I could have been a saint and created a Flash version, but I wasn’t feeling Flashy at the time.

Poster Attribute

The poster attribute is very cool and allows you to put a placeholder image for the video, as shown with Santucci above. This allows for some beautiful web design, as opposed to the typical middle frame image that YouTube displays.

File Types And What Is Going On With Them

Unfortunately, there isn’t a single video file type that all browsers can display. So, you have to serve up a series of video files for the video element to display, depending on the browser. For Safari and Chrome, you serve up a .MP4 file. For Firefox and Opera, you dish out a .OGV file. For Internet Explorer 7 and 8, you have a Flash version ready or an embedded YouTube, Vimeo, Viddler or other 3rd party hosting file embedded and ready to showcase.

So, yeah, that’s a lot of versions to make just to play a video in all modern browsers. Kind’ve sucks, I know.

Hosting Hurdle

You may need to alter your .htaccess file to allow your server to play .OGV files.

With my BlueHost.com hosted site, I had to add the following to .htaccess: AddType application/ogg .ogv

Creating A .OGV File On The Mac

If you were like me and never heard of a .OGV file, you may be wondering how the hell to create a such a file. Well, if you use iMovie on a Mac, you can export to an MP4 video file. Then, to create a .OGV, download and install a free app called ffmpeg2theora that allows you to just drag a movie file into the Terminal after a command line of: ffmpeg2theora. Trying to convert a QuickTime .MOV file doesn’t work with this method though.

Firefogg

With the Firefox browser, you can use the Firefogg Make Web Video plugin. This will connect you to the online app that allows you to simply upload a file and export it as an .OGV file. Again, QuickTime .MOV could not be converted with this app.

Vimeo Version

You Internet Explorer people can watch this version:

Click here to view the embedded video.

This the first time I’m using the “thumb” option with Vimeo, which allows you to add a placeholder image, or a “poster” image to display before the visitor starts. YouTube still doesn’t have this feature.

The time has come to buy Photoshop CS5 and this jar is getting too massive to carry. Time to cash it in. My guess is $485.00. Loads of quarters here.

This blog post was written laboriously on the WordPress iPhone app. Whew!

I created a GMAIL account and had Sebastian contact me in the hopes of discussing a new web site for Front & Palmer (a site I personally thought needed a boost anyway). Located in Fishtown near our house, Front & Palmer would be a dream client for me. Through a series of GMAIL conversations, I had Sebastian find out that Melissa was a photographer, and that if he needed some professional photos taken, she would be perfect.

Of course, Sebastian was not so responsive. He was a typical busy yet ultra savvy marketing genius that barely had time to email back. But when he expressed interest in Melissa as well, I soon was on the way to setting up the meeting of 7:15 pm, Saturday, July 3rd at Top Hat.

Turns out that Sebastian’s office was located in Old City, and we made sketchy plans to meeting him “sometime at the end of June”. As the end of June approached, Sebastian turned festive and wanted us to meet him for a drink instead. I figured Gigi Lounge, right next to Top Hat, would be ideal. We had a few date changes, but July 3rd got nailed down.

On meeting day / surprise party day, Melissa insisted we walk from Fishtown to Old City. I thought this was odd, since it was so hot, but I made sure we had plenty of time. We decided to cut through the Piazza in Northern Liberties, but a massive concert event slowed us down immensely, and we had to jog around a lot of crowds.

In Old City, amazingly, I realized that we had gotten there too early. Melissa’s friends were still inside Top Hat setting up decorations. So, I faked a semi nervous breakdown and sat on a bench a block away, saying that I needed to get a breather. Finally, I was able to text my buddy Rich the words “5 min” and we headed to Top Hat.

I had explained to Melissa that we weren’t going to Gigi Lounge anymore, and that Sebastian had changed the destination to some other place near Gigi, but I couldn’t remember which one. I walked up the steps of Top Hat and Melissa reluctantly followed. She questioned if we were at the right place. I don’t know, I said. She seemed really agitated with me at this point and I eventually got her to the top doorway where she was afraid to walk through. With both hands at her back, I pushed her in.

Paulette, Melissa, and Allyson

Jonathan of Slingluff Gallery and my Dad.

Dave, Brandi, Alison, Jen, and Jenn

Marc, Brian, and Missy

View more photos!

The Big Web show also sticks to solely one topic per show, as opposed to bouncing around like an RSS reader in your ear. “Episode 6: Mobile First” discusses the importance of designing for the mobile web, sometimes even BEFORE desktop versions, and how smart phones are surpassing desktop computer sales more increasingly every year.

Williams, AZ

Yeah, I had Melissa pose by a town sign painting. I am so original!

Melissa hangs by two old kerosene pumps at a gas station that was converted to a souvenir shop. Of course, I bought a Route 66 sign.

An old locomotive train from the original Grand Canyon Railroad sits by the Williams depot.

Another train…

The Red Garter Bed & Bakery. Wish we had time to stay here.

The Road To Phoenix

Amazingly, we didn’t hit any traffic at all on the way to Phoenix, or even on the entire trip for that matter! Our Chevy Malibu rental was all smooth sailing for the whole journey.

We didn’t come across any of these, but were warned they were around.

Cactus on the highway.

Hyatt Hotel

The Hyatt in downtown Phoenix was a nice decadent way to end our trip. We watched the Dbacks win at the hotel bar as they played in Chase Field just blocks away. At the end of the game, fireworks erupted outside and we were told they do that once a week.

Melissa poses in our Hyatt Hotel room.

Relaxing on the bed, where we spent five bucks to watch a missed episode of The Office. We also had pancakes and coffee delivered to the room the following morning. Never did that before, but, damn, what a rip-off!

Click here to view the embedded video.

Melissa goes up the Hyatt Hotel elevator. We thought this was funny at the time.

Downtown Phoenix And A Random Dbacks Game

Roaming around Phoenix the next day, the sun was quite intense and the town was dead. Nobody was around, not even near the Arizona State University campus. We ended up cooling off by watching Alice In Wonderland in a theatre and then having some crappy Mexican food. I was surprised by how bad it was, but it was near the campus where expectations aren’t high.

We ended up chatting with this Pedicab (bike rickshaw) dude, named Len. He admitted that, due to the Arizona boycott, Phoenix was not alive with tourists as much as it used to be. We talked about the boycott for a while, and I was in agreement with him as to how goofy it is to boycott an entire U.S. state, all of its businesses, and all of its people just because of Jan Brewer and the new Support Our Law Enforcement and Safe Neighborhoods Act. Len was against the new immigration law, as well as most cops, and Arizona mayors, so why should everyone suffer?

The lack of Arizona support became even more evident when some guy came up to me asking if I wanted two Diamondback tickets for FREE! I thought he was joking and even offered him money, but he was so tired of trying to give them away for free that he just wanted to move on.

So, we decided to give Len some business and he biked us about six blocks to Chase Field. I felt like a total dick sitting in a pedicab, but what the hell. We were on vacation. The seats to the game were along the left field line, and the stadium was quite nice. We only stayed for a few innings, as we had to get to the airport to head back to Philly.

Nice seats…The Dbacks ended up getting destroyed by the Milwaukee Brewers… and Jan Brewer. Hey-oh!! (Couldn’t resist that one.)

Sedona Motel

It’s one of the cheapest places in town, but smack dab in the middle of everything. Oh, and it faces Snoopy Rock.

Energy Vortexes

Throughout Sedona, there are several energy Vortexes that draw a lot of tourists. To me, it’s just a bunch of bull, but they are fun to check out regardless due to beauty they encompass.

The vortexes in Sedona are swirling centers of subtle energy coming out from the surface of the earth. The vortex energy is not exactly electricity or magnetism, although it does leave a slight measurable residual magnetism in the places where it is strongest.

Sunset near the Airport Vortex.

Cathedral Rock Trail

The highlight of Sedona was the hike up Cathedral Rock Trail, which was a short but steep 1.5 hike with an amazing view at the end.

Melissa hikes up Cathedral Rock Trail.

View from atop Cathedral Rock Trail.

Trail perimeters.

Atop Cathedral Rock Trail.

Perfect weather…Low 80s…Small breeze…Clear skies.

Click here to view the embedded video.

Melissa climbs Cathedral Rock Trail.

Click here to view the embedded video.

Atop Cathedral Rock Trail.

Chapel Of The Holy Cross

A small chapel built in the rocks!

Looking down from the Chapel, you see this wealthy family’s home.

Aliens

Sedona also has its fair share of aliens coming to visit, such as this dude.

Overall

If you are an art collector, Sedona is loaded with galleries in the Main Street area where most of the tourists roam around — kind’ve like an upscale boardwalk section with no amusement rides. Sedona exudes wealth wherever you go. There are a bunch of mini shopping plazas, such as Tlaquepaque, that are fun to just walk through and be in awe of the architecture and sculptures.

The town is loaded with great eats, and there are many options for vegetarians. Melissa was in heaven with this. But the town seems to be void of a nightlife. We roamed around the town at 10:00 pm and many places that served alcohol were already closed.

Sedona is an odd mix, ideal for the adventurous hiker or the art collector that doesn’t want to get out of high heels. The tourism industry there is very irritating though. They will hound you to take you on a helicopter ride or try to get you to sign on with a time share or take you on a town tour in their pink jeeps. Just ignore ‘em.