Part1: Day and Night Test – mobility

Mobile, Place, Product

This is the first of the three post series about how to start designing web apps. Each article will be one of the top three key aspect of development; accessibility – interactivity – connectivity.

I will not get into how quickly the mobile devices replace and surpass the content usage over desktops and laptops, everyone knows this fact. So, it is imperative to have a mobile site for your content. I use day and night test while working with websites and what I mean with that is to test the page on multiple devices, browser and screen sizes before deploying it live.  It seems a simple idea but rarely executed. Why day and night? Because the goal at the end is not to have the same exact look or experience on each device but the best that you can get for the environment, which is so true for anything that you see during the day and then at night. It is not the same look or experience because of the change in environment and colors but you know it is the same thing intuitively.

There are mainly couple ways to go with this; either create optimized and separate mobile pages just for your mobile visitor, or adjust your layout and content with CSS depending on the device, screen size or resolution. The choice is again depending on your needs and expected behavior of your mobile users. Many companies go with separate pages to simplify the user experience because mobile users of apps usually have different behavior than regular desktop users – either come to the app to check something or do one task at a time rather than research something or learn something.

In my case, I wanted to go with the responsive design by keeping the same content but changing the design layout based on screen sizes.  I used flexible properties and media queries to change the CSS for the same content, so no one single change in code and the result was impressive. I also had couple other ways of doing responsive design, by detecting the screensize either via JS or by server side coding so I could use another CSS file for mobile users, but instead I kept everything in one CSS file to make things easier at this moment.

Below is the result; as you can see, all device has different look for the same content but the key is to optimize the experience uniquely for each screen. How does it look on your screen?

Comments on this entry are closed.