Our Blog > Blog Detail

Web Content Viewer- Asponte Custom Skin

Actions

Design for Developers: Mobile Device Resolutions

  • Created By: uid=nciafardoni,cn=users,dc=asponte,dc=com uid=nciafardoni,cn=users,dc=asponte,dc=com
  • Updated: September 1, 2016
  • Tags: portal, tablet, mobile, phone, responsive

As is fairly typical with developers, creating a really great design is not my strongest skill.  Additionally, many designers aren’t going to be the best choice to implement a really great design, especially on enterprise platforms like WebSphere Portal.  So, we find ourselves needing to work together.  Communication on principals of human-computer interaction, technical capabilities of a system, and customer requirements becomes paramount to a project’s success. 

 

A major requirement of every site being designed and developed in today’s world of cell phones and tablets is that the interface is mobile-ready.  As I have handled more responsive sites, I have thought about how to really define mobile requirements and design around them.

 

If you weren’t aware, there is a distinct difference between the physical width of mobile devices and their effective width (all in pixels).  For instance, a Samsung Galaxy S5 has an impressive physical resolution of 1080x1920, but an effective resolution in browsers of only 360x640.  There are many lists that show these resolutions, but for this post I will be referring to http://mydevice.io/devices/

 

So, as a designer, how should you go about building your site in order to be fully responsive?  Here are the steps I recommend:

 

  1. Define which devices you want to support. 
    1. Be aware of corner cases.  Newer iPhones, for example, have stranger resolutions than most other current phones.  Also, many phones will be wider in landscape mode than many tablets in portrait mode.
  2. Use the data from step 1 and a site like the one linked previously to build out a list of the resolutions you want to support.  Narrow this to some ranges that cover your different types of devices, for example:
    width greater than 800: desktop view
    width less than or equal to 800, but greater than 400: tablet view
    width less than or equal to 400: phone view
  3. If necessary, define breakpoints specific to your site.  For example, say you have 4 images you would like to display in a 2x2 grid on tablets, but your design team insists that the images can’t shrink below a 250px width.  You should define a breakpoint at 500px that will handle that special case for narrower tablets.  Keep it simple and try to minimize these special cases; your views should look correct for the smallest and largest widths within their range.
  4. Finally, test your designs on the devices themselves.  Emulators will do a great job of guiding your development team, but there is no substitute for testing on actual mobile devices, you may encounter performance changes that significantly impact your overall mobile experience that would not have been revealed with emulation.

 

There is obviously a lot more that goes into building a responsive site, but these are the steps we recommend when dealing with which resolutions to support.  Have questions or want to share strategies that work for you?  Let us know on Facebook or Twitter!

Contact Form- Asponte Custom Skin

Actions

Contact Us

*
*


Submit
Call Us 888-926-9434
Complementary Content
${loading}