Driver Job Leads Mobile

Recently I completed a pretty major product called Driver Job Leads HTML5 digital magazine flip book. The product was designed to replace an antiquated Flash product of similar execution. Obviously, Flash didn’t work on the iPhone and other mobile phones and although this product worked on the iPhone and iPad, along with other mobile devices, we really were not pleased with the result. Therefore, we decided to make a mobile specific design utilizing the same data to create a unique experience for the mobile user.

Driver Job Leads Mobile Site:

iPhone5Starting out, the directions were “design for the iPhone,” and nothing else. Well, I have no qualms with that prerogative, but the iPhone 5 had just come out, rumours started surfacing that the iPhone was about to decrease the time in between models to keep up with its competition (we’ll see!) I felt the wisest decision for the company, for the design of the project was to do a fluid layout.

I went back to the original desktop version and evaluated the files, we had an index which imported the pages using a PHP file and a ton of javascript. Well, I no longer needed two pages so I merged the two pages into a single page, then with the help of our back end guru we got the index working without the javascript powered flip book.

Now it’s time to start developing! We wanted some consistent buttons across the bottom, apply now, and view company website, along with navigation static at the top. My assignment is to make an iPhone experience, I’m applying myself to emulate iOS closely but not exclude other mobile experiences. First, I need some iOS statistics. Well, the iPhone menu bar standard for the iOS dev kit is 44px tall, which when using fluid layout equals 2.75em.

Next step, I took every graphic in this project that is used as an icon somewhere and turned it into an SVG vector image. Why? iPhones DPI keeps increasing and I want to keep up, the only way to ensure best picture quality is to use vector images which never lose quality given that they are mathematically rendered on load.

Math and web design:

“We all use math every day” -Numb3rs television show

Never so true than in my life right now. The app will envelop 100% of the viewable real estate, the body will occupy 90% with a 5% pad on either side, then when we get into the smaller details my math starts getting into percentages such as 24.66667% and so on … . Furthermore, using the em system for fluid layout you’re constantly dividing and multiplying the presumed value of ‘em’ by the expected value with which you want to emulate. I love designing using fluid design; however, the math can sometimes give you a headache.

Responsive approach:

Responsive design was not requested; however, to some degree it was implied. For instance, what if the iPhone user is looking at this page in landscape mode? Had I merely stuck to the width of the iPhone in my design and created a static page (which would’ve been much easier) the user would have a large white bar encompassing about 20% of their viewable space. That’s a waste isn’t it? Therefore, the use of fluid layouts was employed along with a few very simple responsive tweaks to help this product maintain relevance in landscape mode on the iPhone, Android devices, and even tablets such as the iPad. When in landscape the vertical space is severely limited so we cut the height of the buttons at the bottom in half by simply removing the line breaks using media queries in CSS. We also adjusted the padding and margin on just a few items. With maybe an hour of tweaking I was able to create an experience unique not only to iPhone users, but for iPhone users in landscape, and an experience which also translates perfectly onto Android phones, Windows phones, and heck, even desktop computers should you feel inclined to view it on one.

iOS Tricks and Tips:

I’ll save specific coding examples for dedicated articles, but there’s some simple stuff you can do to enhance your web app specifically for iOS. Since that was my target audience I felt obligated to take advantage of these. First, I created an icon which will be used if the user chooses to save the site to their home screen. Second, I utilized some javascript to create a pop-up to make the user aware of that ability and encourage them to do so. Finally, should the user chose to save the web app to their home screen they will be greeted by a custom loading screen for the web app as well as the absence of the navigational bar and buttons across the top and bottom of the browser which provides the user with a legitimate native app experience.

Summary:

In my opinion, the m dot website is dead, it has served it’s purpose and ought to be replaced by genuine responsive design. However, with this execution we really could not do responsive and maintain the original goals of the project. Therefore, we’ve created a fluid pseudo-responsive web app which could later be used as the foundation of a true responsive project. We developed a web app which can look, feel, and operate like a native app and even translates perfectly onto other mobile devices. I took the original parameters, met them, then far exceeded them to produce something which I’m honestly more pleased with than the desktop version.

If you feel like looking at some trucking companies, feel free to check out my web app for driver job leads mobile.