Advanced extensions for Magento® to help your business - Welcome to Moogento!

Screen Sizes and CTAs for Mobile eCommerce

I recently made a new design for Moogento, and was telling a buddy about it. "Sweet, let me have a look" he said, and loaded it up on his phone. Cue excuses and apologies 'It looks great on my laptop!'... Sound familiar?

These days we can't just leave mobile optimizing til later, as this is often the first contact.

There's the device emulator that comes with X-Tools from Apple, but that app takes ages to load for me and is not so easy to tweak settings.

I'm a fan for Firefox and Firebug plugin to help adjust CSS and HTML. Firefox has a neat tool in Tools>Web Developer>Responsive Design View.

Unfortunately it doesn't seem to have many current phones as presets.

Let's add some - but we also want to make sure that we're showing the correct viewport size, for let's say Safari and Chrome. They both have different vertical space, depending at what point in the page you're at. Ie. whether you've landed on the page or are browsing the page.

If we're considering things like CTAs (Call To Action) then this is quite important, to minimise scrolling around things like an 'Add To Cart' button.

  • Both have the iPhone statusbar, with the time etc. * Both have the address bar which is there on loading the site, but disappears on scroll. * Safari has an extra navigation bar at the bottom of the screen

I'm really mainly interested in the landing page view, to make sure the CTA is visible and that the first impression is good.

For me it therefore makes sense to have 2 heights to verify a design against:

  • Max Vert Space = Chrome : iOS statusbar, top titlebar * Min Vert Space = Safari : iOS statusbar, top titlebar, bottom statusbar

Let's assume 40px for the statusbar, 88px for the top titlebars, and 60px for the Safari bottom statusbar.


  • Max = (- 40 - 88 =) - 128 * Min = (- 40 - 88 - 60 =) - 188

1. Make a new tab, and enter about:config (+ Enter)

(2. Accept the warning that comes up)

3. Search for this in that page: devtools.responsiveUI.presets

4. Let's do it: Double-click the result, and replace it with this:

[{"key":"1024 x 694","name":"Chrome: iPad Landscape","width":1024,"height":694}, {"key":"768 x 950","name":"Chrome: iPad Portrait","width":768,"height":950}, {"key":"736 x 340","name":"Chrome: iPhone 6+ Landscape","width":736,"height":340}, {"key":"414 x 662","name":"Chrome: iPhone 6+ Portrait","width":414,"height":662}, {"key":"667 x 301","name":"Chrome: iPhone 6 Landscape","width":667,"height":301}, {"key":"375 x 593","name":"Chrome: iPhone 6 Portrait","width":375,"height":593}, {"key":"568 x 246","name":"Chrome: iPhone 5 Lansdscape","width":568,"height":246}, {"key":"320 x 494","name":"Chrome: iPhone 5 Portrait","width":320,"height":494}, {"key":"480 x 246","name":"Chrome: iPhone 4 Lansdscape","width":480,"height":246}, {"key":"320 x 406","name":"Chrome: iPhone 4 Portrait","width":320,"height":406}, {"key":"1024 x 661","name":"Min: iPad Landscape","width":1024,"height":661}, {"key":"768 x 917","name":"Min: iPad Portrait","width":768,"height":917}, {"key":"736 x 307","name":"Min: iPhone 6+ Landscape","width":736,"height":307}, {"key":"414 x 629","name":"Min: iPhone 6+ Portrait","width":414,"height":629}, {"key":"667 x 268","name":"Min: iPhone 6 Landscape","width":667,"height":268}, {"key":"375 x 560","name":"Min: iPhone 6 Portrait","width":375,"height":560}, {"key":"568 x 213","name":"Min: iPhone 5 Lansdscape","width":568,"height":213}, {"key":"320 x 461","name":"Min: iPhone 5 Portrait","width":320,"height":461}, {"key":"480 x 213","name":"Min: iPhone 4 Lansdscape","width":480,"height":213}, {"key":"320 x 373","name":"Min: iPhone 4 Portrait","width":320,"height":373}]


If you want to make your own version of this table (eg. for Android sizes, cinema-size screens, etc.), you will maybe find it easier to edit the gDocs sheet I made for this. If you make some good edits, add them in a comment here and I'll update this post.

Special Offers & News
Like what you just read? Let's stay connected - join our (free) group :

• Early access to limited specials
• Occasional news / new features / essential security updates

We don't spam.

Leave a Reply
Get our superpowered newsletter!
Exclusive specials, critical security updates, and occasional news
We don't spam.