Standards, Guidelines & Best Practices

The resources on these pages would not be possible without the dedication, work and support of the members of the IAB’s councils, committee and working groups.

Anuncios

 Interactive Advertising Bureau -- Dedicated to the continued growth of interactive advertising

The resources on these pages would not be possible without the dedication, work and support of the members of the IAB’s councils, committee and working groups.
 

Data Usage & Control

Digital Platform Overviews

Digital Video Guidance

XHTML & CSS For Mobile Development

The mobile site consists of over 50 mockups that needed to be developed in HTML/CSS and made to work for the iPhone, Android and Blackberry. While coding simple HTML/CSS mockups sounded pretty easy, I found that there were several hurdles and differences from doing mobile HTML and normal HTML.

Doing a mobile site from scratch was a big learning experience, so I’d thought I’d share some of the things I learned, that differed greatly for mobile dev.
Think Small

Doing mobile development means you have to think small and in terms of percentages, not pixels. You can’t have a 320px layout for the iPhone, because if you rotate the phone into landscape mode, you’ll have a skinny site running down the middle. You have to make sure the layout stays consist, while expanding for both portrait and landscape modes on the phone.


(…)

The mobile site consists of over 50 mockups that needed to be developed in HTML/CSS and made to work for the iPhone, Android and Blackberry. While coding simple HTML/CSS mockups sounded pretty easy, I found that there were several hurdles and differences from doing mobile HTML and normal HTML.

Doing a mobile site from scratch was a big learning experience, so I’d thought I’d share some of the things I learned, that differed greatly for mobile dev.

Think Small

Doing mobile development means you have to think small and in terms of percentages, not pixels. You can’t have a 320px layout for the iPhone, because if you rotate the phone into landscape mode, you’ll have a skinny site running down the middle. You have to make sure the layout stays consist, while expanding for both portrait and landscape modes on the phone.

CSS3 Wonders

One of the biggest changes that were difficult for me to get over, and one of the best, was the fact that I could use CSS3 freely. I no longer had to worry about Internet Explorer, and al of the prominent mobile devices support it.

When trying to do some tricky styling without adding additional markup, I caught myself remembering that I could actually do it with nth-of-type and not having to worry about it breaking! So feel free to break out your CSS3 and even some of your HTML5 skills.

Special Meta Tags

There are a lot of little quirks in some mobile devices, but since I have an iPhone I’ll mention the ones I found in that device. The iPhone has this neat trick, where it links phone numbers in the browser and allows you to click on them and call them instantly.

This is awesome, except for the fact when it tries to do it on non-phone numbers. It seems to have difficulty sometimes determining what is and isn’t a number, especially when it comes to things like part/order numbers.

The awesome thing about Apple, however, is the fact they came up with a ton of meta tags that allow you to manipulate the way the iPhone device reads the website. I think these tags may also work on the Android, but don’t quote me on that.

To disallow the linking of phone numbers of your site, simple add this in between your <head> tags:

<meta name="format-detection" content="telephone=no">

I also ran across a problem where the iPhone likes to blow up the size of text in landscape mode, which was obviously a no-no and broke our layout. This was fixed simply by adding this style to the body property:

body { -webkit-text-size-adjust: none; }

The IE of Mobile

Of course, there’s always something that has to make a developer’s life difficult, and in this case it’s Blackberry. While it’s not as bad as Internet Explorer, it still became a thorn in my side.

Apparently, some models of Blackberries don’t support CSS3 properties, like opacity. I haven’t had any problems with advanced selectors though, so I’m not sure what is and isn’t supported.

The Blackberry also seemed to interpret spacing and paddings differently from the Android and the iPhone. For the most part, besides a few text differences, the Android and iPhone were quite similar in rendering the site.

Browser-Testing

Browser, or device, testing for mobile is a bit more difficult to do than normal web browser testing. While you can download pretty much al of the web browsers if you’re on a Windows machine (or use a simulator on a Mac), I’m fairly sure most devs don’t have an iPhone, Android AND a Blackberry.

For beginning testing, it was enough to resize my Firefox window as small as possible, but most of the testing I did on my iPhone, especially because the iPhone renders inputs and some backgrounds and paddings quite differently than Firefox.

For Android and Blackberry testing, I had to rely on the help of several of my Twitter friends (thanks guys!). A lot of the simulators you can download, especially the iPhone ones, never seem to actually renders the site like the actual device would. The client also had access to all three devices, so there were a big help in finding bugs.

Teaching the Client

The problem with percentage based designs, is that it’s impossible to have it “pixel-perfect” with the mockups, because you’re not using pixels. This was something I discovered early on, and something I had to teach the client about as well, especially because they had handed me size guides with the exact pixels everything was spaced out to.

This is a bit difficult to explain to a client who wants the mockups to look exactly the same in portrait and landscape mode, but with a little persistence and documentation, it wasn’t impossible for them to become relaxed in their layout expectations. You just have to be a bit more fluid when it comes to the mobile world.

Progress

I haven’t completed all the mockups yet, but you can check out the progress on the mobile site I’m working on for Audible for the next week or so before it’s taken down to become live.

http://www.amberweinberg.com/xhtml-css-for-mobile-development/

Yep, Microsoft still makes more than Apple (and Dog Daze)

By Richi Jennings

Despite dire predictions, Microsoft’s Q4 results show that its revenues and profit are bigger than Apple’s. The two companies’ stock prices don’t seem to reflect that, but whoever said the market was that simple? The Windows, Office, and server businesses each had a barnstorming final quarter, which may ease the pressure on Steve Ballmer. In IT Blogwatch, bloggers show us the money.

Your humble blogwatcher selected these bloggy morsels for your enjoyment. Not to mention Obama’s dog flies solo?..
(MSFT) (AAPL)


Windows 7 Ultimate: Signature Edition
Image by The Master Shake Signal via Flickr

By Richi Jennings

Despite dire predictions, Microsoft’s Q4 results show that its revenues and profit are bigger than Apple’s. The two companies’ stock prices don’t seem to reflect that, but whoever said the market was that simple? The Windows, Office, and server businesses each had a barnstorming final quarter, which may ease the pressure on Steve Ballmer. In IT Blogwatch, bloggers show us the money.

Your humble blogwatcher selected these bloggy morsels for your enjoyment. Not to mention Obama’s dog flies solo?..
(MSFT) (AAPL)
Leer más “Yep, Microsoft still makes more than Apple (and Dog Daze)”

What’s The Point Of Being An Internet Bully?

I remember the day clearly – I was in middle school gym class and the “popular girls” decided they were tired of playing touch football and wanted to sit out on the field. Now it was a hot day, so I decided to sit out as well. Turns out, only they could sit down and no one else. If anyone knows anything about me, they know I don’t like taking crap from anyone else, and well, let’s just say the popular girls thought it was time to beat me up in the locker room.

Luckily for me, I’m gifted with the an awesome suaveness that allowed me to calmly talk them out of turning me to blonde girl soup. Back then, this experience was frightening. Today, it’s funny. It’s funny that people would want to start a fight over sitting down in gym class.


The Blog

I remember the day clearly – I was in middle school gym class and the “popular girls” decided they were tired of playing touch football and wanted to sit out on the field. Now it was a hot day, so I decided to sit out as well. Turns out, only they could sit down and no one else. If anyone knows anything about me, they know I don’t like taking crap from anyone else, and well, let’s just say the popular girls thought it was time to beat me up in the locker room.

Luckily for me, I’m gifted with the an awesome suaveness that allowed me to calmly talk them out of turning me to blonde girl soup. Back then, this experience was frightening. Today, it’s funny. It’s funny that people would want to start a fight over sitting down in gym class. Leer más “What’s The Point Of Being An Internet Bully?”