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/

Web Designers vs. Web Developers

There are many WYSIWYG tools, templates, and canned solutions that let a designer build a simple site alone. Just as there are many graphics applications, free graphics, and templates that would let a developer build a site alone. That is of course if you only need a very simple site. The simple informative type site is the internet equivalent of a highway billboard or a flier, it’s just a placeholder for information. If that’s all you need then a designer alone can build your site. As soon as you pass beyond that level then you cannot have your designer and developer in one. Here are some major reasons you do not want a developer and designer in one.


I recently saw a discussion online asking the question, “Do Web designers need Web developers anymore?” This is a very important question but not because of what it asks but because of what it suggests. This question suggests there is a movement toward designers not needing developers. This is absolutely not true. There are many examples and reasons why that is not true but it’s still a surprisingly common question. There is one case (arguably) where designers don’t need developers (or vice versa). For small, information-only sites you can get away with just a designer (or just a developer).

There are many WYSIWYG tools, templates, and canned solutions that let a designer build a simple site alone. Just as there are many graphics applications, free graphics, and templates that would let a developer build a site alone. That is of course if you only need a very simple site. The simple informative type site is the internet equivalent of a highway billboard or a flier, it’s just a placeholder for information. If that’s all you need then a designer alone can build your site. As soon as you pass beyond that level then you cannot have your designer and developer in one. Here are some major reasons you do not want a developer and designer in one. Leer más “Web Designers vs. Web Developers”

20 Reasons Freelance Developing Can Stink

Normally my posts on here are pretty gung-ho about how awesome freelance development is. Heck, I can wake up when I want, make as much money as I want and do the kind of work that I want. What’s not to love?

Unfortunately, like everything in this world, there’s some downsides. After working 16+ hour days for the past week and a half, I’ve gathered a few reasons freelance developing can stink: [Más…]

1. A big name client approaches you with a huge project that needs to be done NOW. You don’t want to turn them down because their name would look awesome in your portfolio. So you work all day, night and weekend to get the work finished, and thus have no life.
2. When one person needs a project done, 300 other people bombard you at the same time for their projects, as well as 200 emails.
3. When it’s calm, no one wants work and your inbox is empty and you’re bored.
4. You never get enough sleep, or you sleep in too late.
5. Exercise? What’s that?
6. When you’re having a coding problem, you can’t turn to your buddy next to you for help. Instead you’re stuck trying to explain a 100 line long PHP issue in 140 characters or less.
7. Your day is planned to the second – wake up, eat breakfast, pee, shower, pee, email, project 1, project 2, lunch, pee, project 3, dinner, project 4, blog, learn, pee and maybe, just maybe…breathe.
8. Everyone expects you to drop the client work you’ve had schedule for months just for them at the last minute.
9. When something goes bad, you get yelled at, not your boss.
10. Your secretary is a bichon frise and you talk to your cat.
11. Your inbox is NEVER empty…at least longer for 5 seconds.
12. Checking your email, twitter and facebook becomes an automatic reaction every time you sit down somewhere.
13. Sick or tired? Suck it up if you have 6 projects due this week.


10 (Gung~Ho album)
Image via Wikipedia

Normally my posts on here are pretty gung-ho about how awesome freelance development is. Heck, I can wake up when I want, make as much money as I want and do the kind of work that I want. What’s not to love?

Unfortunately, like everything in this world, there’s some downsides. After working 16+ hour days for the past week and a half, I’ve gathered a few reasons freelance developing can stink: Leer más “20 Reasons Freelance Developing Can Stink”

Why I Love 37signals

I don’t own any of 37signal‘s products. As a matter of fact, using Basecamp annoys the heck out of me. But I love 37signals and everything they do and stand for.

Why? They’re not afraid to say what they think, no matter who might get offended. A week ago, I posted an article called Teaching Graphic Designers About The Web. Personally I thought it was a great article and it seem to do well traffic-wise.

However a small demographic of my readers decided to completely ignore the 700+ word article and instead focus on one word – gay. Yes, I called the Droid gay. And no, I don’t regret it.


Image representing 37signals as depicted in Cr...
Image via CrunchBase
I don’t own any of 37signal‘s products. As a matter of fact, using Basecamp annoys the heck out of me. But I love 37signals and everything they do and stand for.Why? They’re not afraid to say what they think, no matter who might get offended. A week ago, I posted an article called Teaching Graphic Designers About  The Web. Personally I thought it was a great article and it seem to do well traffic-wise.

However a small demographic of my readers decided to completely ignore the 700+ word article and instead focus on one word – gay. Yes, I called the Droid gay. And no, I don’t regret it.

Why People Hate 37signals

I’ve never heard anyone say that they hated 37signals because their products stunk. Or their customer services. Or even their prices. Instead, people choose to hate 37signals because they think their “pompous” and “arrogant”. Apparently being truthful, speaking your mind and injecting humor into your writings now classifies as “arrogant” in the world today. Pity.

I’ve listened to every one of their podcasts and read all of their books. I have never seen one thing that was arrogant or pompous. I think their writing is hilarious and I actually enjoy reading their business books instead of falling asleep like I have with so many other’s books.

Why is it that in this day and age, we have to be so stuck up as to “punish” those that think outside of the box? You don’t want a full-time job? The government punishes you by making you pay double taxes. You want to be an artist? You get laughed at, the crappy building in college or told to get a real job. This world is seems to be built like a factory where from kindergarten you’re told to sit down, shut up and do the same thing as everyone else.

Another reason people hate 37signals is because 37signals writes about how they’ve been successful in business and people claim it can’t “always” be done like that. Well of course, it doesn’t work for everyone, otherwise we’d all be rich, right? Do you really want another general advise business book or a company writing about practices they don’t actually do; or do you want to hear about what a company actually did to be successful? Leer más “Why I Love 37signals”

Finding Your First Clients


Once you become better known in your profession, clients will constantly come to you instead of you looking for them. You’ll often be so busy with work and won’t need to market yourself as often.

But, what do you do when you’re just starting out or not well known? Before you begin getting clients, it can be tough to figure out what to do all day. That’s the perfect time to make yourself well known.

Finding clients is different for everyone and what works for some doesn’t always for others. However, I’d like to share several of the ways I got work in the beginning.

http://www.amberweinberg.com/finding-your-first-clients/

Enhanced by Zemanta

The 5 Advantages of Freelancing

Many people dream of freelancing but fear taking the risk of not having a secure job, “especially in today’s economy.” However, that’s not a valid enough reason to look the other way. In fact, with today’s economy, your talent is your greatest asset.

There’s nothing complicated involved in this thought process: If you have talent, and if people need your talent, you’ll always have work. There are many benefits and advantages attached to indulging in the freelance business, and these are five of the big ones.
Control your income

You might not get your deserved recognition if you’re winning business, growing profits and generally doing a good job for a company. After all, companies only look to hire employees for the purposes of using them and profiting off of them. In freelance, the amount of times you can get a raise depends on how often you decide to raise your rates. At the end of the day, once you land that big contract, you’re the only one who is going to profit from it.


Many people dream of freelancing but fear taking the risk of not having a secure job, “especially in today’s economy.” However, that’s not a valid enough reason to look the other way. In fact, with today’s economy, your talent is your greatest asset.

There’s nothing complicated involved in this thought process: If you have talent, and if people need your talent, you’ll always have work. There are many benefits and advantages attached to indulging in the freelance business, and these are five of the big ones.

Control your income

You might not get your deserved recognition if you’re winning business, growing profits and generally doing a good job for a company. After all, companies only look to hire employees for the purposes of using them and profiting off of them. In freelance, the amount of times you can get a raise depends on how often you decide to raise your rates. At the end of the day, once you land that big contract, you’re the only one who is going to profit from it. Leer más “The 5 Advantages of Freelancing”

Ignore The Ego

A nasty trend is floating around the web world these days and it ain’t pretty – it’s the all inclusive “Ego”.

While I’m definitely guilty of this from time to time (and who isn’t?) it seems to be a common thread in all of the freelance and development blogs I subscribe to. How many times have you seen posts entitled:

* How To Say No
* How To Fire A Client
* Why Your Design/Development Sucks
* Why The Client Sucks
* How to Spot Bad Clients

and so on and so forth? What ever happened to the client always being right and giving something a little extra?


The Blog

A nasty trend is floating around the web world these days and it ain’t pretty – it’s the all inclusive “Ego”.

While I’m definitely guilty of this from time to time (and who isn’t?) it seems to be a common thread in all of the freelance and development blogs I subscribe to. How many times have you seen posts entitled:

  • How To Say No
  • How To Fire A Client
  • Why Your Design/Development Sucks
  • Why The Client Sucks
  • How to Spot Bad Clients

and so on and so forth? What ever happened to the client always being right and giving something a little extra? Leer más “Ignore The Ego”