SlideShare a Scribd company logo
1 of 4
Download to read offline
Design-Once Strategy for Tablets
             {Creating a single layout for all 7”-10” tablets}




  Popular Mechanics initially designed the monthly editions twice—once for iPad
and then again for 7” Android tablets (which then got stretched up for 10” Android
   screens, to not-great results). Realizing this wasn’t a sustainable nor desirable
     workflow, I created a streamlined production process which resulted in a
  single design usable on screens of varying sizes, aspect ratios and resolutions.
I created a list of design, technical, and conversion considerations,
       from legible type sizes to accommodating different aspect ratios
to the differences in color and tonal representations across different devices.

I even suggested using a responsive grid: 3 columns for 10” devices, 2 columns
for 7” devices, 1 column for phones (though reformatting for phones would be
    much more complex). We decided to narrow our scope to just tablets,
        which mostly rely on differences in cropping and functionalities.
iPAD
          The screen has
 generous margins along
 the sides. Elements can
intrude into the margins
 but will be cropped out
on the Android versions.


                  ANDROID
        The margins have
    been cropped off to
 accommodate different
 aspect ratios. (Even the
 7” and 10” ratios differ!)
       Headline type was
    slightly repositioned


               ALL DEVICES
         The text sizes are
           optimized to be
comfortably read at both
      10” and 7” sizes. The
   same file is used for all
formats—a single process
  feeding all exisiting and
    coming devices within
     this dimension range.
FUNCTIONALITY
              DIFFERENCES
       Popular Mechanics’
        iPad app is custom
   programmed in-house,
 so it has some advanced
         functionalities not
  offered by the Android
   e-Readers, such as this
Google map usage. These
    features are dropped
       for Android tablets.


          We also balance
              functionality
    differences with their
    importance and avoid
     certain features only
        available for iPad,
           so that the user
        experience across
         platforms doesn’t
           vary too widely.

More Related Content

Viewers also liked

Diffusion of Innovation Ch. 5
Diffusion of Innovation Ch. 5Diffusion of Innovation Ch. 5
Diffusion of Innovation Ch. 5
David Onoue
 
Le Magicien de guerre. La victoire d'El-Alamein ou la guerre créative
Le Magicien de guerre. La victoire d'El-Alamein ou la guerre créativeLe Magicien de guerre. La victoire d'El-Alamein ou la guerre créative
Le Magicien de guerre. La victoire d'El-Alamein ou la guerre créative
Jean-Louis SWINERS
 
class 1 : slides shown in class
class 1 : slides shown in classclass 1 : slides shown in class
class 1 : slides shown in class
MME3
 
Palestra seminário open innovation porto alegre v. 1.0
Palestra seminário open innovation porto alegre v. 1.0Palestra seminário open innovation porto alegre v. 1.0
Palestra seminário open innovation porto alegre v. 1.0
Eduardo Grizendi
 
Isma360® master class 2014-15
Isma360®   master class 2014-15Isma360®   master class 2014-15
Isma360® master class 2014-15
FabMob
 

Viewers also liked (20)

CCI Symposium 14: Jason Potts
CCI Symposium 14: Jason PottsCCI Symposium 14: Jason Potts
CCI Symposium 14: Jason Potts
 
Rethinking the Place of Patents in the Innovation Process: A New Model for I...
Rethinking the Place of Patents in the Innovation Process:  A New Model for I...Rethinking the Place of Patents in the Innovation Process:  A New Model for I...
Rethinking the Place of Patents in the Innovation Process: A New Model for I...
 
Self Chilled Beverage Cans
Self Chilled Beverage CansSelf Chilled Beverage Cans
Self Chilled Beverage Cans
 
Ch13 encouraging entrepreneurial innovation
Ch13 encouraging entrepreneurial innovationCh13 encouraging entrepreneurial innovation
Ch13 encouraging entrepreneurial innovation
 
Diffusion of Innovation Ch. 5
Diffusion of Innovation Ch. 5Diffusion of Innovation Ch. 5
Diffusion of Innovation Ch. 5
 
Innovation Ecosystems Agora : "La conception du Business Model de votre inno...
Innovation Ecosystems Agora : "La conception du Business Model de votre inno...Innovation Ecosystems Agora : "La conception du Business Model de votre inno...
Innovation Ecosystems Agora : "La conception du Business Model de votre inno...
 
Jean-Louis Swiners et ses trois Leica #9
 Jean-Louis Swiners et ses  trois Leica #9 Jean-Louis Swiners et ses  trois Leica #9
Jean-Louis Swiners et ses trois Leica #9
 
Dossier de presse invention design regards croisés SISMO
Dossier de presse invention design regards croisés SISMO Dossier de presse invention design regards croisés SISMO
Dossier de presse invention design regards croisés SISMO
 
Le Magicien de guerre. La victoire d'El-Alamein ou la guerre créative
Le Magicien de guerre. La victoire d'El-Alamein ou la guerre créativeLe Magicien de guerre. La victoire d'El-Alamein ou la guerre créative
Le Magicien de guerre. La victoire d'El-Alamein ou la guerre créative
 
La conception du business model de votre innovation - Vianoveo
La conception du business model de votre innovation - VianoveoLa conception du business model de votre innovation - Vianoveo
La conception du business model de votre innovation - Vianoveo
 
Jean-Louis Swiners (1957-1964) Prix Niépce 1962
Jean-Louis Swiners (1957-1964) Prix Niépce 1962Jean-Louis Swiners (1957-1964) Prix Niépce 1962
Jean-Louis Swiners (1957-1964) Prix Niépce 1962
 
class 1 : slides shown in class
class 1 : slides shown in classclass 1 : slides shown in class
class 1 : slides shown in class
 
Dedalis at a glance
Dedalis at a glanceDedalis at a glance
Dedalis at a glance
 
Mediaplanet Innovation
Mediaplanet InnovationMediaplanet Innovation
Mediaplanet Innovation
 
L'Innovation. Une définition de rupture
 L'Innovation. Une définition de rupture L'Innovation. Une définition de rupture
L'Innovation. Une définition de rupture
 
Hec De l'innovation au marché(VC)
Hec De l'innovation au marché(VC)Hec De l'innovation au marché(VC)
Hec De l'innovation au marché(VC)
 
Palestra seminário open innovation porto alegre v. 1.0
Palestra seminário open innovation porto alegre v. 1.0Palestra seminário open innovation porto alegre v. 1.0
Palestra seminário open innovation porto alegre v. 1.0
 
Isma360® master class 2014-15
Isma360®   master class 2014-15Isma360®   master class 2014-15
Isma360® master class 2014-15
 
Histoire d'une canne à pêche et autres disruptions technologiques
Histoire d'une canne à pêche et autres disruptions technologiquesHistoire d'une canne à pêche et autres disruptions technologiques
Histoire d'une canne à pêche et autres disruptions technologiques
 
inspirato Konferenz "Kundenfreundliches Packaging" - 11. April 2013 in München
inspirato Konferenz "Kundenfreundliches Packaging"  - 11. April 2013 in Müncheninspirato Konferenz "Kundenfreundliches Packaging"  - 11. April 2013 in München
inspirato Konferenz "Kundenfreundliches Packaging" - 11. April 2013 in München
 

Similar to DesignOnceAllTablets

Designing for android tablets smashing mobile
Designing for android tablets   smashing mobileDesigning for android tablets   smashing mobile
Designing for android tablets smashing mobile
Daniel Downs
 
Android
AndroidAndroid
Android
davs7
 
iOS humaninterfaceguidelines
iOS humaninterfaceguidelinesiOS humaninterfaceguidelines
iOS humaninterfaceguidelines
cdsg
 
I os human interface guidelines
I os human interface guidelinesI os human interface guidelines
I os human interface guidelines
knottyjung
 

Similar to DesignOnceAllTablets (20)

Designing for android tablets smashing mobile
Designing for android tablets   smashing mobileDesigning for android tablets   smashing mobile
Designing for android tablets smashing mobile
 
Android
AndroidAndroid
Android
 
Adaptive Design for Android
Adaptive Design for AndroidAdaptive Design for Android
Adaptive Design for Android
 
Android Design Guidelines 1.1
Android Design Guidelines 1.1Android Design Guidelines 1.1
Android Design Guidelines 1.1
 
iOS HIG
iOS HIGiOS HIG
iOS HIG
 
Designing the New Android Experience - The Golden Age of Android
Designing the New Android Experience - The Golden Age of AndroidDesigning the New Android Experience - The Golden Age of Android
Designing the New Android Experience - The Golden Age of Android
 
Android
AndroidAndroid
Android
 
Mobile application design trend & history
Mobile application design trend & historyMobile application design trend & history
Mobile application design trend & history
 
Mobile hig
Mobile higMobile hig
Mobile hig
 
iOS 7 Transition guide
iOS 7 Transition guideiOS 7 Transition guide
iOS 7 Transition guide
 
Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012
 
You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones ...
You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones ...You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones ...
You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones ...
 
Android Design Guidelines
Android Design GuidelinesAndroid Design Guidelines
Android Design Guidelines
 
Mobile hig
Mobile higMobile hig
Mobile hig
 
UI and UX for Mobile Developers
UI and UX for Mobile DevelopersUI and UX for Mobile Developers
UI and UX for Mobile Developers
 
iOS humaninterfaceguidelines
iOS humaninterfaceguidelinesiOS humaninterfaceguidelines
iOS humaninterfaceguidelines
 
7 Design Tips for the New Android Experience
7 Design Tips for the New Android Experience7 Design Tips for the New Android Experience
7 Design Tips for the New Android Experience
 
Dojo 1.7 mobile overview dojo conf 2011
Dojo 1.7 mobile overview  dojo conf 2011Dojo 1.7 mobile overview  dojo conf 2011
Dojo 1.7 mobile overview dojo conf 2011
 
I os human interface guidelines
I os human interface guidelinesI os human interface guidelines
I os human interface guidelines
 
iPad Pro Review
iPad Pro ReviewiPad Pro Review
iPad Pro Review
 

DesignOnceAllTablets

  • 1. Design-Once Strategy for Tablets {Creating a single layout for all 7”-10” tablets} Popular Mechanics initially designed the monthly editions twice—once for iPad and then again for 7” Android tablets (which then got stretched up for 10” Android screens, to not-great results). Realizing this wasn’t a sustainable nor desirable workflow, I created a streamlined production process which resulted in a single design usable on screens of varying sizes, aspect ratios and resolutions.
  • 2. I created a list of design, technical, and conversion considerations, from legible type sizes to accommodating different aspect ratios to the differences in color and tonal representations across different devices. I even suggested using a responsive grid: 3 columns for 10” devices, 2 columns for 7” devices, 1 column for phones (though reformatting for phones would be much more complex). We decided to narrow our scope to just tablets, which mostly rely on differences in cropping and functionalities.
  • 3. iPAD The screen has generous margins along the sides. Elements can intrude into the margins but will be cropped out on the Android versions. ANDROID The margins have been cropped off to accommodate different aspect ratios. (Even the 7” and 10” ratios differ!) Headline type was slightly repositioned ALL DEVICES The text sizes are optimized to be comfortably read at both 10” and 7” sizes. The same file is used for all formats—a single process feeding all exisiting and coming devices within this dimension range.
  • 4. FUNCTIONALITY DIFFERENCES Popular Mechanics’ iPad app is custom programmed in-house, so it has some advanced functionalities not offered by the Android e-Readers, such as this Google map usage. These features are dropped for Android tablets. We also balance functionality differences with their importance and avoid certain features only available for iPad, so that the user experience across platforms doesn’t vary too widely.