The Rise of Mobile Devices: Announcing MobileSiz.es

Image Title

posted by Darren Barklie
on Mar 01, 2015

Today NIFTIT is proud to announce the launch of our first open source web app; mobilesiz.es is a lightweight web app for designers and developers to quickly retrieve mobile device screen sizes and information.

READ MORE: 8 TIPS TO APP DESIGN FROM APPLE’S OFFICIAL GUIDE

Initially conceived on a scrap of paper twelve months ago, this pet project steadily grew into a full open-source product over the course of 2014. With responsive design now well established as an essential workflow for any designer or developer creating websites or web apps, we considered how there wasn’t a single resource that readily presented common information on modern smartphone and tablet devices. While our initial focus was exclusively on device screen sizes, we also considered that device pixel ratio and operating system versions would be prevalent information to present to devs and designers as well. We also took into consideration the newly emerging market of watch devices when compiling useful data for this app. Additionally, we created an infographic on ‘The Rise of Mobile Devices’.

mobilesizes-infographic-20150226

Three of NIFTIT’s talented team members who were instrumental with this project- Nghi, Daz and Craig – have agreed to share a little bit about bringing the app together:

Wire-framing & Design by Nghi

“Mobilesiz.es was a fun project to design since I was given total creative freedom. My first step was to help the team identify all the elements and functionalities that we would include before starting a round of wire-frame designs. After a few revisions, we reached a standard that effectively communicated all the features on which we had decided.

With the wire-frames confirmed, initial development could begin while I worked on the aesthetic design. We had decided that the app must feel speedy to use, so I opted for a minimalist, flat design. When it came to selecting the color scheme, we wanted to avoid bias toward any one system/manufacturer; for this reason we decided upon the color-switcher based on each operating system’s brand colors. We agreed that it was a nice design enhancement to include without impacting feel or performance.

Finally, I created about 15 mockups for the mobilesiz.es logo, with the NIFTIT team voting for their – and my – favorite.”

UI/UX & Front-End Development by Daz

““Our key aim with this project was for the user to retrieve the exact device data he required as quickly as possible. To accommodate for this, we made the data extremely accessible; the user can go straight to his desired device using the incremental search, can quickly filter by device type, operating system or hardware manufacturer, or he can quick-access the most popular devices trending that week. We aim to provide the user’s desired information in between 3-8 seconds and in less than three clicks.

Responsiveness was also a key consideration during the build, given our app’s focus. We anticipated users might use mobilesiz.es on a companion mobile or tablet device as they code on their primary laptop/desktop.”

Back-End Development & Data Management by Craig

It was an obvious match to develop the site with AngularJS. Out of the box, Angular provides great two-way data binding functionality that’s ideal for this type of project.

Horizontal scrolling posed an interesting challenge, the problem being that browsers traditionally display dynamically sized content vertically and would naturally try to place the overflowing content on the next line. The solution came via Angular’s watch method. Watch has the ability to see changes in values and functions, and with this feature we were able to see when the filtered data changed in order to re-calculate the width of the containing element.”


 

Be sure to let us know if mobilesiz.es becomes part of your design/development workflow! We’ll be continuing to update our data set and consider improvements over the coming months, so feel free to share any feedback, feature requests, or corrections with [email protected]