Mobile project

April 22nd, 2013

Well, I’ve mentioned my team winning in our company hack-a-thon a couple times now. Now that our project has been released, I think it’s about time I talked about it since people were curious :) Including me, there were 3 people on the team, and there’s been something that we’ve have been wanting to do for a while: make our community mobile friendly.

Some background: our company makes an IT software (inventory, help desk, etc) and an IT community. While the software has a mobile app, the community had no mobile-friendly view, and it really needed one. Trying to browse it on any phone was a frustrating experience.

mobile_01

The community has (I think) seven teams currently working on it, and every team maintains multiple features. This presents 2 problems:

1. The community is huge, and no team had time to make the entire thing mobile friendly.
2. Maintenance – how do we make sure each team maintains the mobile version of their feature?

Long story short: we made a mobile-friendly view for the community, which should be easy to maintain. If you’re interested in learning more details, read below the cut! If you just want to check it out, view here on a smartphone.

mobile_02


Covering the community: This really just took time. We got a week during the hack-a-thon, and it was the only thing we worked on during that time. The 3 of us even worked weekends and after hours. After we won, we got a release period to finish it up (2-3 more weeks).

Maintenance: We wanted a responsive design, though it isn’t a “true” responsive one yet. Currently, whenever we detect a smartphone user agent, we load extra CSS and Javascript to style the existing site to a mobile-friendly design. This means we would not have to maintain a separate site or a separate mobile app.

We figured out the common layouts and styled those, so as long as our colleagues used an existing layout, they’re mostly covered. We also added Javascript helpers that automatically changed elements to mobile friendly ones, so they wouldn’t have to worry about those either.

For example, tabs that are too wide automatically get converted to a drop down menu.

mobile_03

Paging automatically gets converted to large, easy-to-hit buttons with a drop down for specific pages.

mobile_04

Long lists turn into collapsible ones that slide down, so that they don’t take up so much room.

mobile_05

Testing across phones: If you think testing in multiple internet browsers is a pain, imagine having to do that with different phones and mobile operating systems. Testing and trying to fix issues on the different phones we tried was a nightmare.

– iPhone: We actually didn’t really have issues with iPhones, even older ones on an older iOS version. Things just worked. We didn’t have to worry about how it worked on the iPhones that much.

– Windows: We did have issues with Windows phones at first, until we realized we had this weird IE meta tag set that was screwing with how Windows phones saw our site. After we figured that out, I don’t think we ran into many other issues (except for one specific Windows phone that I won’t go into).

– Android: was the hardest to deal with, and a lot of our issues were in the default browsers, which is not Chrome. Usually if we saw an issue in the phone’s default browser, we didn’t see it in Chrome (on the same phone). And well, we can’t assume that all Android users use Chrome over the default. For example, we saw formatting issues, scrolling issues, and the wrong device-width being returned.

Though the project is released, there are still features we need to cover and bugs we need to fix. I’m just glad we actually released with it, since not every hack-a-thon project gets to go to production. We’ve been wanting a mobile view for a long time, so it feels good to finally get it done :)

10 Responses to “Mobile project”

  • Nancy says:

    Congratulations on the release! It is so interesting how there are so many teams working towards one single project. It’s good that all of your hard work for the hack-a-thon paid off because the finishing product looks clean and definitely mobile friendly! Even though it’s not a fully responsive layout yet, it’s pretty close. The thing I like about the iPhone is that a lot of layouts are compatible with it; just like magic! I’m a bit interested on how it works on BlackBerry phones though :o!

    Congratulations once again on the success :). I hope you’re enjoying all of this awesome production that’s going on with your work ;).

  • Liv says:

    Note to self: learn how to make responsive themes this summer when I have nothing better to do.

    That is great your team won! I’m currently doing a team campaign to sell a product. I’m not stressing myself with wanting to win, but it would probably be nice.

    As an Android user, I can tell you the default browser sucks. I use Dolphin Browser and it’s great, and I got it before Chrome was available (I think, or maybe not). But I can bet there are tons of lazy people who just stick to the default, like Windows users who use IE and Mac users who use Safari. -/___\-

  • Jessica says:

    Wow this is awesome! I looked up how people did mobile sites a bit, and it’s interesting to hear how you guys did it. I read a little bit about responsive layouts, but I’ve never made one, so kudos to you on making a semi-responsive layout! :D And it sounds like you put a lot of work and time into this project so congrats on getting it released!

  • Mija says:

    WOW Amazing job on the projects!!! Many congrats to you and your team X3

    I’ve heard android phones can be tricky to code for ;o;!!

  • Liza says:

    That’s really amazing! And I’m really glad that your team won, because in this day and age, so many people use their phones for everything, including the Internet. And in a way, you helped out each person who helps maintain the site via keeping their features intact because all of the hard work will have been done.

    Great job!

  • Kim says:

    Ah ha! So this was the top secret project. Hehe. This was super duper useful and functional! No wonder you guys won! Ever since I finally jumped onto the bandwagon of smartphones, I started realizing how important mobile accessibility is. People are always on the go and using their mobile devices more and more often. I can imagine how nightmareish it must have been getting compatibility with sooo many different platforms and browsers! Congrats :)

  • Denise says:

    Wooow! Congratulations on getting the job done and win!! It looks great on mobile version :) You must be proud. Almost everybody uses mobile internet these days, and sometimes it’s a pain in the ass when trying to navigate on a mobile… I’m glad people like you can fix those problems :D Is it hard to make a website mobile friendly?

    • Cat says:

      Thanks! I don’t think it’s too hard to do a responsive design for a simple site, but it gets kind of tricky when it’s a large site with a lot of interactions. I still need to get around to making my own personal sites mobile friendly, haha.

  • Stephanie says:

    That looks like a job well done! After it’s released, it should be easier for someone in the future to go make the site fully responsive, right? As someone who looks at the Internet on a phone, I always appreciate a good, responsive design.

    Out of curiosity, do you have any idea why Chrome the default Android browser? Google maintains both Chrome and Android, and the Chrome browser is just so much better than the default for some reason or another.

    • Cat says:

      Thanks! We pretty much have everything in place to do responsive correctly, but we had to change it at the last minute due to some issues we ran into.

      We were wondering the same thing about Chrome and Android! I believe mobile Chrome wasn’t available when Androids first came out, though new Androids still don’t have it as default. It’s pretty annoying, so I wish they’d make the switch =/

Sorry! This entry is old, so comments are closed. Check out my recent blog posts though!