AmberWeinberg.com » apps http://www.amberweinberg.com Design, Development and Freelance Articles and Tutorials Tue, 07 Sep 2010 14:30:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 XHTML & CSS For Mobile Development http://www.amberweinberg.com/xhtml-css-for-mobile-development/ http://www.amberweinberg.com/xhtml-css-for-mobile-development/#comments Tue, 07 Sep 2010 14:30:02 +0000 Amber Weinberg http://www.amberweinberg.com/?p=3427

If you follow me on Twitter or on Facebook, you’ve probably heard me talk about the mobile site I’ve been developing for Amazon Audible.

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.

Your Thoughts

What are some of the differences and difficulties you’ve experienced while coding for mobile sites?

Related Posts You Might Like

]]> http://www.amberweinberg.com/xhtml-css-for-mobile-development/feed/ 9 10 Great Project Planning Apps to Add to Your Toolkit http://www.amberweinberg.com/10-great-project-planning-apps-to-add-to-your-toolkit/ http://www.amberweinberg.com/10-great-project-planning-apps-to-add-to-your-toolkit/#comments Wed, 11 Aug 2010 14:31:10 +0000 James Adams http://www.amberweinberg.com/?p=3296 A project management application will help you keep track of all of the details within your project. You can create service tickets, you can gather reminders of things to do, you can also have more than one manager assigned to a project. Here is a list of ten project management applications that you can add to your toolkit.

1. Lighthouse

LightHouse
You can do your work directly through your inbox, manage your beta testing, prioritize your tickets and meet your goals. You can categorize and organize your tasks easily and effectively. Lightbox allows you to attach your documents and images directly to the tickets.

Free: 1 Project, 2 users
Personal: $15 monthly, 3 Projects, 10 users
Gold: $100 monthly, Unlimited Projects, Unlimited Members, 30GB Storage

2. Remember the Milk

RememberTheMilk
Remember the Milk is a personal project management application. You can organize items and events to match your style. You can collaborate with others on projects that you wish to complete. You can create as many tagged to-do lists as you wish, making it easier to complete your tasks.

Free Signup
Pro Upgrade: $25 per year, gives you RTM applications for your mobile devices.

3. Creative Pro Office

CreativeProOffice
Creative Pro Office has tabbed navigation for clients, time sheets, projects, team members and more. The dashboard includes your calender, outstanding invoices, and upcoming projects. You can easily start a new project by inputting only a project name and client name.

Free: 3 Projects, 1 Team Member, No Storage
Solo: $5 monthly, 10 Projects, 3 Team Members, 1GB Storage
Team: $30 monthly, Unlimited Projects, Unlimited Team Members, 10GB Storage

4. Basecamp

Basecamp
You can create to-do lists, perform file sharing and make message boards. The program also offers milestones, time tracking and project overviews.

Basic: $24 monthly, 15 Projects, Unlimited Users, 5GB Storage
Premium: $99 monthly, 100 Projects, Unlimited Users, 30GB Storage
Max: $149 monthly, Unlimited Projects, Unlimited Users, 75GB Storage

5. Deskaway

Deskaway
Deskaway has dynamic project management features such as project history, milestones, task lists and recurring tasks. You can schedule events, post to a shared blog and share your information efficiently with your team.

Personal: $10 monthly, 10 Projects, Unlimited Users, 250MB Storage
Plus: $49 monthly, 100 Projects, Unlimited Users, 10GB Storage
Power: $99 monthly, Unlimited Projects, Unlimited Users, 25 GB Storage

6. Goalkeeper

Goalkeeper
With Goalkeeper, you can create and manage projects, task lists and tickets. With a click of a few buttons, you can change your deadlines and create ticket checklists. You can manage multiple projects quickly and easily.

Free: 10 projects, 20 Users, 30MB storage
Freelancer: $29 monthly, Unlimited Projects, Unlimited Users, 1 GB Storage
Professional: $69 monthly, Unlimited Projects, Unlimited Users, 35GB Storage

7. Copper Project

Copper Project
You can create to do lists, client lists, calendars and projects with Copper. You can examine budgets and put your estimated hours into the timeline. Copper will soon be integrated with MYOB, Xero and Freshbooks.

Standard: $29 monthly, Unlimited Projects, 5 Users, 10GB Storage
Studio: $49 monthly, Unlimited Projects, 25 users, 20GB Storage
Enterprise: $199 monthly, Unlimited Projects, 200 Users, Unlimited Storage

8. Project Spaces

Project Spaces
You can organize your files easily with simple to use tools. ProjectSpaces allows you to customize your project’s tabs, colors and homepage layout. Keep users informed with RSS and email.

Personal: $29 monthly, 1 Project, 25 Users, 1GB Storage
Premium: $129 monthly, 10 Projects, Unlimited Users, 10GB Storage
Corporate: $749 monthly, 500 Projects, Unlimited Users, 100GB Storage

9. Huddle

Huddle
Huddle allows you to perform task management, online editing and document sharing. Huddle allows video conferencing and discussion with your team members.

Personal: $8 monthly, 1 Project, Unlimited users, 1 GB Storage
Small Team: $40 monthly, 5 Projects, Unlimited users, 2GB Storage
Professional: $200 monthly, 25 Projects, Unlimited Users, 25GB Storage

10. Teambox

Teambox
Teambox is consistently adding new features. You can share tasks, messages and files. You can create projects and access your data from anywhere on the web.

Personal: $12 monthly, 6 projects, Unlimited Users, 200MB Storage
Basic: $29 monthly, 20 Projects, Unlimited Users, 10GB Storage
Corporate: $299 monthly, Unlimited Projects, Unlimited Users, 250 GB Storage

Most of these project management applications offer free trials. Project management doesn’t have to be a headache anymore.

Related Posts You Might Like

]]> http://www.amberweinberg.com/10-great-project-planning-apps-to-add-to-your-toolkit/feed/ 11 Even Good Programmers Need To Review The Basics http://www.amberweinberg.com/even-good-programmers-need-to-review-the-basics/ http://www.amberweinberg.com/even-good-programmers-need-to-review-the-basics/#comments Tue, 27 Jul 2010 14:30:42 +0000 Alex Katrompas http://www.amberweinberg.com/?p=3218 In twenty years of programming and managing programmers I have seen great programmers and I’ve seen programmers that couldn’t write “Hello World” without a bug. This isn’t about the latter, it’s about real world examples of good engineers making the most basic mistakes (myself included). Here are few coding bad practices I’ve observed in every production environment in which I’ve been.

back end sneaking up front

Everyone knows to keep the interface, processing, and data layers separate and interact only through proper calls. The proper practice is for a function or method to return only the “answer” or to “do the job” and do nothing else. It’s the UI layer that calls the function, gets the return value, and then decides what to show the user. Just yesterday I made a mistake that violated this rule which is also what prompted me to write this blog.

I’ve observed this rule being broken more and more in very subtle ways. Modern IDEs with visual editors have made the line between the UI and processing layers somewhat fuzzy. Yesterday I was writing an input verifier (Java) for a jTextField. The verifier tested the text and if it was good it returned true. If the text was bad the verifier threw up an error dialog and returned false. I was coding in the UI layer, right? I clicked the input verifier method in the visual editor and I was writing code for a UI component. All UI layer, right? Wrong. The input verifier is back-end code and should only return true or false. It’s the focus listeners in the UI that should be reading that return value and throwing up dialogs.

What’s the difference? Reusability. The first input verifier I wrote can’t be used again in any other context. The second version is a nice generic verifier I can use anywhere (and now is in my library). A very simple mistake but I’ve noticed this happening with many good programmers especially when working with visual editors.

multiple returns (greater than two)

This is the practice of putting returns all through a method or function everywhere it’s possible the correct answer is achieved (i.e no further processing is technically needed). For example, a switch statement with 10 cases and 10 returns. Another example is several nested if/else statements where each part of each if/else has its own return. Personally I’m very strict on this one but whenever I’ve pointed this out to another programmer the invariable answer I get back is “only one return gets executed so what’s the problem?”

Two problems,… 1) the potential for bugs in functions and methods with many returns is very high, especially with nested if/else statements. If you enter a series of decision structures you should back out of that series properly and then return – not return in the middle, and 2) code optimization at both compile time and run time is adversely affected. Both the compiler and the CPU like functions and methods that have a single entry and exit point. This facilitates many useful optimizations. In any case using multiple returns is just plain sloppy programming – don’t do it.

hard coding

The classic example of this is writing a string for display to the user (e.g. an error message) and putting the string right into the code. The right way to do this is to place your strings or other literals elsewhere and have the code look-up the values.

Why? So you can change the values later without re-compiling. Anytime you need to go back into the code to change a literal you’re not only wasting time, you risk breaking something. This is probably not important (or even advised) in cases of client side web coding (i.e. JavaScript) because the overhead of the lookup is too high, but in the case of compiled back end code store your literals elsewhere.

not using regular expressions

Here is one that I used to be guilty of but I corrected myself years ago. I’ve seen so many programmers write text processing routines that do character by character searches. Text processing can be done easily by constructing regular expressions and calling the right string routine. Most reading this will say “duh!” but as a programming manager I’ve seen this more times than I can count. This bad habit is easy to explain, regular expressions seem complicated at first (they are not really). A lot of good programmers don’t get past that and never re-think it.

over-complicating the basics

Here’s an example I observed a few months ago. A programmer (a quite good one) was constructing a user preference system that would save and load user preferences from an XML file. It worked very well but it was large and complicated and it began to encompass other information besides just user preferences (application state, OS state, etc.). What’s a better and simpler solution?

We were in Java so the answer was serialization. We had a user preferences object so why go through all the trouble of reading/writing/processing XML? We threw out the XML and replaced it with simple serialization. When the application loads it picks up the serialized preferences object and when it shuts down it serializes that object back to disk. The programmer now only needs to be concerned with managing the preferences object (which he had to do anyway) and not how it’s saved or processed.

The code savings was several hundred lines and the complete elimination of the XML subsystem. The XML solution seemed excellent at first because it was infinitely scalable and could do all sorts of cool processing but it was totally unnecessary, it overcomplicated the application, and it begged for scope creep.

re-inventing the wheel

By now everything even remotely useful has been written by someone somewhere and then probably refined by someone else and posted online. I was once hired on a job to manage a group of engineers. When I was hired they were already three months into writing complex math modules from scratch. Every single thing they were doing was freely available open source and no one even bothered to look for it.

I assume that is a dramatic example (8 engineers wasting 3 months) which doesn’t come up often but I see small examples of this all the time. Personally I don’t write anything I can copy. It’s become standard practice for me before I get into writing any object, function, method, etc. I do a quick search to see if someone else already did it and if it’s freely available.

the most evil – the goto statement

I saved the best for last, the goto statement. I can’t hardly believe this is still an issue but it is. On another job I had a couple years back (again managing engineers) when I was first hired I looked into the code and found goto statements everywhere. They were used by every programmer in the company.

I asked a lead developer why this was acceptable practice and he said the previous manager advocated the use of goto. The code produced in this environment was completely unreadable and they averaged over a dozen reported bugs a day for a relatively small application. I even saw “loops” written purely with if and goto statements (hadn’t seen that since programming on my Apple IIc). I’m not going to explain why the goto is wrong and completely unnecessary. That topic has been beaten to death and it’s been proven wrong beyond a shadow of a doubt both academically and practically. If you’re using goto’s, stop it.

good coders gone bad,… maybe just a little?

In the first example I gave above I caught my mistake right away but it made me think about the fact that even experienced coders let things slip if they don’t stay disciplined on the basics. I also break the hard coding rule from time to time too (just being lazy). Anyone else feeling a little guilty on any of these?

Related Posts You Might Like

]]> http://www.amberweinberg.com/even-good-programmers-need-to-review-the-basics/feed/ 4 Awesome Free Design & Developer Resources http://www.amberweinberg.com/awesome-free-design-developer-resources/ http://www.amberweinberg.com/awesome-free-design-developer-resources/#comments Tue, 06 Jul 2010 14:30:55 +0000 Amber Weinberg http://www.amberweinberg.com/?p=3064

I’ve had a ton of people asking me where to find great resources, and have actually come across a ton of them lately. I’d thought I’d share them all with you in one post. :)

If you’ve got some other resources, let me know in the comments!

Podcasts

  • The Big Web Show – Hosted by Jeffery Zeldman and Dan Benjamin, The Big Web Show podcast invites different guests on each show and features a wide range of web topics.
  • Boagworld’s Audioboo – Boagworld Audioboo’s are only a few minutes short, but are on several different design, development and usability topics.
  • Boagworld Web Design Advice – Even though Boagworld is taking six months off from this podcast, it’s still a great resource for anything web design.
  • Boagworld Bites – Boagworld bites are pieces from the larger Web Design Advice show. These will continue to be published.
  • The Dev Show – The dev show guys are kind of silly, but they’ve got great dev topics and resources. Just wished they’d stop talking about Ruby and MongoDB.
  • Freelance Radio - Not necessarily about development, Freelance Radio from FreelanceSwitch still offers great advice on running your own web business.
  • OnMacDevelopment – OnMacDevelopment caters specifically to Mac, iPhone and iPad development.
  • The Pipeline – The Pipeline also isn’t specific to web development, but is an interview show that features some of the biggest names in the design and development world.
  • SitePoint Podcast – The official podcast of SitePoint.com, they offer news and opinions on design and development.
  • Think Vitamin – Think Vitamin is Carsonified’s official podcast about web and development.
  • 37signals Podcast – 37signals talks about the design and development of web apps. Great stuff.

E-Books

Blogs

image by hashmil

Related Posts You Might Like

]]> http://www.amberweinberg.com/awesome-free-design-developer-resources/feed/ 5 8 Awesome Sites From Designers & Developers http://www.amberweinberg.com/5-sites-from-designers-developers/ http://www.amberweinberg.com/5-sites-from-designers-developers/#comments Thu, 24 Jun 2010 14:30:39 +0000 Amber Weinberg http://www.amberweinberg.com/?p=2973 You can say that I’m super swamped this week and unable to contribute an awesome post today. Or instead you can sit back, relax, and look at this fine collection of awesome sites from designers and developers. Don’t hate.


If you know of more, please let me know. I am an avid geek collector of sites that I just look at and say “cool”! (This is not an official scientific design critique term.)

Related Posts You Might Like

]]> http://www.amberweinberg.com/5-sites-from-designers-developers/feed/ 5 Win A Lifetime Ninja Account From Codesnippit http://www.amberweinberg.com/win-a-lifetime-ninja-account-from-codesnippit/ http://www.amberweinberg.com/win-a-lifetime-ninja-account-from-codesnippit/#comments Fri, 04 Jun 2010 16:00:31 +0000 Amber Weinberg http://www.amberweinberg.com/?p=2807 In celebration of our beta launch, I though we’d have ourselves a fun contest!

What’s the prize?

I’m giving away a lifetime Ninja account to THREE lucky winners chosen at random. A ninja account means you get unlimited codesnipp.its to post each month, every month!

What do you have to do to win?

  • Tweet about your favorite feature in codesnipp.it, what you plan to use it for, or whatever you’d like to say about us. Make sure you add @codesnippit and your user ID to the END of your tweet  so we know about it (and so others can see it).
  • Multiple tweets DO count this time! So tweet about us as much as you like for extra entries.
  • Feel free to share on Facebook as well, just make sure to drop a link to the status here in the comments (and make sure your account is public so we can see it!)

BONUS prize! (do I sound like a TV commercial yet???)

Everyone who participates automatically gets an extra 10 codesnipp.its to use this month! See, in my world, everyones a winner. ;)

Need an invite?

Just send your email to info@codesnipp.it

Contest starts now and ends at 3 p.m Friday the 11th. Good luck!

WINNERS

We decided to give away SIX instead of three premium accounts because you guys are just too awesome! Congrats to:

  • @AndrewChamp
  • @RyanOlson
  • @eTiger13
  • @HErzinger
  • @Ansjh
  • @TorchingIgloos

Related Posts You Might Like

]]> http://www.amberweinberg.com/win-a-lifetime-ninja-account-from-codesnippit/feed/ 33