SlideShare a Scribd company logo
1 of 34
Download to read offline
Fast-track to Android design:
the missing parts
  -   What screens are there?
  -   How to cope with this variety?
  -   Tactics for pixel perfection
  -   Technical design




@MaksimGolivkin
@AndrodAalto Community
Motivation
  “Official” handsets: 165+
  “Official” tablets: 45+

  OpenSignalMaps report 3997 devices



Why does it matters?
  56% smartphones world wide run Android
  42% smartphones run Android in US
Concepts of the platform
Generalized sizes
  Generalized size   Diagonal      Interpretation
  Small              2” − 3.4”              legacy phones
  Normal             3” − 4.7”                 phones

  Large              4.2” − 7.3”          “tweener” tablets

  Extra Large        7” − ∞                    tablets
Popular* screens
             Phone             Generalized size
             s     small normal large extra large
             240x320    2.3%
             240x400
             240x423
                                0.7%
             320x480            26.2%
             480x640    2%
              480x800
              480x854           57.8%     2.3%   “Tweener”
             600x1024                            tablets
Resolution




             720x1280
             800x1280
                                0.9%
             1024x768
             1280x768                                 7%        Tablets
             1280x800


             *Not all the px resolutions are present! See phones and tablets database
             Data was collected in 7-days ending on May 1, 2012
Phone* screens
                        Generalized size
    Mostly Legacy         small      normal
              240x320      2.3%
              240x400
              240x423
                                      0.7%
              320x480                 26.2%
              480x640       2%                           The trend
Resolution




              480x800
              480x854                 57.8%
             600x1024
             720x1280
             800x1280
                                      0.9%


               4.3% in small phones
               85.6% in normal phones

             *Not all the pixel resolutions are present! See phones database
             Data was collected in 7-days ending on May 1, 2012
Tablet* screens
                          Generalized size
   “Tweeners” large                extra large
  Resolution

                480x800
                480x854     2.3%
               600x1024
               1024x768
                                                       The trend
               1280x768               7%
               1280x800




        *Not all the pixel resolutions are present! See tablets database.
        Data was collected in 7-days ending on May 1, 2012
Screen density
 Screen density is physical characteristic of the
 screen technology, which determines screen
 size and resolution

 Screen density can be estimated using following
 formula:

                       pixel _ width 2 + pixel _ height 2
  screen _ density =
                           diagonal _ in _ inches


 Density is expressed in db – “density
 independent pixels”.
Physical size of dp
“pixel” is the same




                                                42 dp height



    Samsung Galaxy Ace      Asus Nexus 7
       320x480 px            1280x720 px
    mdpi density bucket   hdpi density bucket
Density buckets
  Devices are grouped into density buckets
  according to the physical screen density.

  Density bucket is hard-coded, but can be
  estimated based on the following heuristics.

  Density bucket           Screen density range
  ldpi (low)                    100 ~ 140 dp

  mdpi (medium)                 140 ~ 200 dp

  hdpi (high)                   200 ~ 280 dp

  xhdpi (extra high)            280 ~ 340 dp



  See phones and tablets database to find out
  about the density of relevant device.
Devices in one density bucket




      3.7”
                         4.2”
   Nexus One
                   Samsung Galaxy S2
   320x533 dp
                      320x533 dp
Devices in one density bucket




      3”               3.5”                    10.1”
Sony Xperia X8   Samsung Galaxy Ace   Asus Transformer Prime
 320x480 dp         320x480 dp             1280x800 dp
Awkward moment
                                                       Generalized size
                               small      normal           large     extra large
               240x320 px    320x426 dp
               240x400 px                 320x533 dp
               240x432 px                 320x576 dp
               320x480 px                 320x480 dp
               480x640 px    240x320 dp
                                                       640x1067 dp
               480x800 px                 320x533 dp    480x800 dp
                                                       640x1138 dp
                480x854 px                320x568 dp    480x854 dp
               600x1024 px                413x683 dp   600x1024 dp
Resolutions




                640x960 px                320x480 dp
               720x1280 px                360x640 dp
               800x1280 px                400x640 dp
               1024x768 px                                           1024x768 dp
               1280x768 px                                           1280x768 dp
               1280x800 px                                           1280x800 dp
              *Not all the pixel resolutions are present
Dp resolutions




                      800x1280 px




       5.3”                                  10.1”
Samsung Galaxy Note                 Asus Transformer Prime
    400x640 dp                           800x1280 dp
Only 12 dp resolutions (so far)
   Generalized Density   Resolution*
      size     bucket       (dp)
  small          ldpi       320x426    legacy phones
  small          hdpi       240x320    legacy phones
  normal         ldpi       320x533    legacy phones
                            320x576
  normal         mdpi       320x480    phones
  normal         hdpi       320x533    phones
                            320x568
  normal        xhdpi       320x480    new phones
                            360x640
                            400x640
  large          ldpi      640x1067    tweener tablets
                           640x1138
  large          mdpi       480x800    tweener tablets
                            480x854
                           600x1024
  extra large    mdpi      1024x768    tablets
                           1280x768
                           1280x800
Handling many screens
One application
- multiple layouts
  It is obvious that due to larger screens and different
  resolutions, tablets require their own UI, which takes
  advantage of larger screen “real estate”.

  Of course, looking at the market share of small phones
  and “tweener” tablets (4.3% and 4%) they are less
  significant.

  However, the longer side of most devices is 30%-60%
  bigger than the shorter side. Thus, landscape orientation
  may need a separate layout.

  Wider layouts can be reused for landscape orientation of
  smaller devices.
Orientation is just another
screen resolution.
  400x640 dp in portrait       320x420 dp in portrait




                               320x420 in landscape




      320x400 dp in portrait
Two useful patterns
  “stretching” layout        “centering” layout




                                       Margins


   320x480 dp stretches to   320x480 is centered in 400x640
   400x640 dp



  Plan for resizable elements and/or margins.
Choose “switching points”


  240dp               320dp    360dp   400dp 426dp   480dp    533dp   568dp 578dp     640dp



small size portrait           small size landscape            normal size landscape
                              normal size portrait            large size portrait

          By listing all the possible layout widths (both orientations),
          we see how do they cluster.

          Choose switching points, when do you
          a) introduce new layout
          b) start/stop growing margins
          c) start/stop growing element size
One layout and many
          many adjustments
               Home base
  240dp               320dp    360dp   400dp 426dp   480dp   533dp   568dp 578dp     640dp



small size portrait           small size landscape           normal size landscape
                              normal size portrait           large size portrait



          resized elements
          margins added
          new layout
How many layout
enough?
  Every additional layout adds significant effort,
  but improves user experience.

  Options worth considering:
  - portrait only on the handset
  - landscape only on the tablet

  Use market research to understand, what your target
  customers are using.
2 layouts - richer UI

               Home base
  240dp               320dp    360dp   400dp 426dp   480dp   533dp   568dp 578dp     640dp



small size portrait           small size landscape           normal size landscape
                              normal size portrait           large size portrait



          resized elements & margins
          new layout

       Make advantage from more screen “real estate”!
Tablet layouts on
3.2 and after
  Starting Android 3.2 it is possible to target screens using
  width, height and “smallest width” (shortest screen
  dimension, ignoring orientation).

  Very useful!

    Smallest      Generalized Density      Orientation
     width           size     bucket
      768 dp     extra large      mdpi          portrait
      768 dp     extra large      mdpi          portrait
      800 dp     extra large      mdpi          portrait
     1024 dp     extra large      mdpi        landscape
     1280 dp     extra large      mdpi        landscape
     1280 dp     extra large      mdpi        landscape
Before 3.2: a bit more tricky!
  For Android prior 3.2 you could only target screen
  groups using generalized size, density bucket and screen
  orientation combination.

  Still possible to target “smallest width”.

  Short side Short side Generalized Density Orientation
     min       max         size     bucket
    240 dp        (same)   small               hdpi     portrait
    320 dp        (same)   small               ldpi     portrait
    320 dp        (same)   normal              hdpi     portrait
    320 dp        (same)   normal              ldpi     portrait
    320 dp        (same)   normal              mdpi     portrait
    320 dp        (same)   small               hdpi   landscape
    426 dp        (same)   small               ldpi   landscape
    480 dp        600 dp   large               mdpi     portrait
    480 dp        (same)   normal              mdpi   landscape
    533 dp        568 dp   normal              hdpi   landscape
    533 dp        (same)   normal              ldpi   landscape
    640 dp        576 dp   large               ldpi     portrait
Designing layout:
the process
  Process for designing a layout in dp:
  1. Research market and decide on the screen groups
  2. Find smallest dp resolution for every screen group
  3. Design for the smallest db resolution on a canvas equal
     to biggest pixel resolution
  4. Enhance it for bigger resolutions from the group
  5. Make sure that sizes of reused elements translate into
     all pixel densities groups without a reminder.

  Pixel perfect rule:
       If you support ldpi, dp sizes have to be dividable by 4.
       If you don’t, sizes have to be dividable by 2.
Random advices
Phone dp width is increasing
               Until recently, all Android phones had 320dp width
               and 5”-7” tablets sometimes had 480dp.


                      majority        a few    Galaxy Note              5”-7” tablets
Phones (short edge)
                       320 dp        360 dp       400 dp                   480 dp



              At the moment, number of phones with screen
              width = 360 dp is growing fast. However, these phones
              are running Android 4.0, so they can be addressed using
              “tablet” layouts
Simple scaling or SVG
isn’t the best solution!
  Smaller icons need to be redrawn to look better!

  Below there are icons for pictures folder in Mac OS X.




  Here is an article going into detail: About those vector icons
Rhythm
 Android is using 48dp rhythm –
 size which translates to physical area comfortable to touch.

 Spaces between elements are recommended to be at least 8dp.
Standard sizes
                                                    Density bucket
                       ldpi       mdpi       hdpi       xhdpi
        Launcher       36x36 px   48x48 px   72x72 px    96x96 px
                       24x24 px   32x32 px   48x48 px    64x64 px
        Action bar
                        (18x18)    (24x24)    (36x36)     48x48
                       12x12 px   16x16 px   24x24 px    32x32 px
        Contextual
                       (9x9) px    (12x12)    (18x18)     24x24
Icons




                       18x18 px   24x24 px   36x36 px    48x48 px
        Notification
                        (16x16)    (22x22)    (33x33)     (44x44)

        Except for the icons, platform doesn’t have many standard
        elements.

        For instance, action bar is 48-60dp depending on resolution
        and screen orientation.
File names
  Graphics artifact filenames:
  - CAN’T have spaces or dashes
  - MUST be in small letters
  - MUST start with a letter

  Your coder will love you for this!
Maybe …
 If the screen has only few field, consider making it into
 dialog.

 Transparent list and image backgrounds on lists can hinder
 performance/result in memory problems.

 Instead of launching progress dialog, consider animating
 interface elements, such as action bar items.

 Design with different font size for devices of different size.
FIN & Good luck!
  Contributors:
  - Maksim Golivkin, Android developer
  - Joonas Kukkonen, Elisa
  - Janne Toivola, Futurice
  - Antonio Guadagno, Exaget
  - Victoria Fedirko, Freelance designer

  Inspiration:
  - “iOS App Designer Guide to Developer Love”, Lemon
     Labs


   Looking for an Android developer?          www.golivkin.eu
   A freelancer?                           maksim@golivkin.eu

More Related Content

Recently uploaded

TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 

Recently uploaded (20)

TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Fast track to Android design

  • 1. Fast-track to Android design: the missing parts - What screens are there? - How to cope with this variety? - Tactics for pixel perfection - Technical design @MaksimGolivkin @AndrodAalto Community
  • 2. Motivation “Official” handsets: 165+ “Official” tablets: 45+ OpenSignalMaps report 3997 devices Why does it matters? 56% smartphones world wide run Android 42% smartphones run Android in US
  • 3. Concepts of the platform
  • 4. Generalized sizes Generalized size Diagonal Interpretation Small 2” − 3.4” legacy phones Normal 3” − 4.7” phones Large 4.2” − 7.3” “tweener” tablets Extra Large 7” − ∞ tablets
  • 5. Popular* screens Phone Generalized size s small normal large extra large 240x320 2.3% 240x400 240x423 0.7% 320x480 26.2% 480x640 2% 480x800 480x854 57.8% 2.3% “Tweener” 600x1024 tablets Resolution 720x1280 800x1280 0.9% 1024x768 1280x768 7% Tablets 1280x800 *Not all the px resolutions are present! See phones and tablets database Data was collected in 7-days ending on May 1, 2012
  • 6. Phone* screens Generalized size Mostly Legacy small normal 240x320 2.3% 240x400 240x423 0.7% 320x480 26.2% 480x640 2% The trend Resolution 480x800 480x854 57.8% 600x1024 720x1280 800x1280 0.9% 4.3% in small phones 85.6% in normal phones *Not all the pixel resolutions are present! See phones database Data was collected in 7-days ending on May 1, 2012
  • 7. Tablet* screens Generalized size “Tweeners” large extra large Resolution 480x800 480x854 2.3% 600x1024 1024x768 The trend 1280x768 7% 1280x800 *Not all the pixel resolutions are present! See tablets database. Data was collected in 7-days ending on May 1, 2012
  • 8. Screen density Screen density is physical characteristic of the screen technology, which determines screen size and resolution Screen density can be estimated using following formula: pixel _ width 2 + pixel _ height 2 screen _ density = diagonal _ in _ inches Density is expressed in db – “density independent pixels”.
  • 9. Physical size of dp “pixel” is the same 42 dp height Samsung Galaxy Ace Asus Nexus 7 320x480 px 1280x720 px mdpi density bucket hdpi density bucket
  • 10. Density buckets Devices are grouped into density buckets according to the physical screen density. Density bucket is hard-coded, but can be estimated based on the following heuristics. Density bucket Screen density range ldpi (low) 100 ~ 140 dp mdpi (medium) 140 ~ 200 dp hdpi (high) 200 ~ 280 dp xhdpi (extra high) 280 ~ 340 dp See phones and tablets database to find out about the density of relevant device.
  • 11. Devices in one density bucket 3.7” 4.2” Nexus One Samsung Galaxy S2 320x533 dp 320x533 dp
  • 12. Devices in one density bucket 3” 3.5” 10.1” Sony Xperia X8 Samsung Galaxy Ace Asus Transformer Prime 320x480 dp 320x480 dp 1280x800 dp
  • 13. Awkward moment Generalized size small normal large extra large 240x320 px 320x426 dp 240x400 px 320x533 dp 240x432 px 320x576 dp 320x480 px 320x480 dp 480x640 px 240x320 dp 640x1067 dp 480x800 px 320x533 dp 480x800 dp 640x1138 dp 480x854 px 320x568 dp 480x854 dp 600x1024 px 413x683 dp 600x1024 dp Resolutions 640x960 px 320x480 dp 720x1280 px 360x640 dp 800x1280 px 400x640 dp 1024x768 px 1024x768 dp 1280x768 px 1280x768 dp 1280x800 px 1280x800 dp *Not all the pixel resolutions are present
  • 14. Dp resolutions 800x1280 px 5.3” 10.1” Samsung Galaxy Note Asus Transformer Prime 400x640 dp 800x1280 dp
  • 15. Only 12 dp resolutions (so far) Generalized Density Resolution* size bucket (dp) small ldpi 320x426 legacy phones small hdpi 240x320 legacy phones normal ldpi 320x533 legacy phones 320x576 normal mdpi 320x480 phones normal hdpi 320x533 phones 320x568 normal xhdpi 320x480 new phones 360x640 400x640 large ldpi 640x1067 tweener tablets 640x1138 large mdpi 480x800 tweener tablets 480x854 600x1024 extra large mdpi 1024x768 tablets 1280x768 1280x800
  • 17. One application - multiple layouts It is obvious that due to larger screens and different resolutions, tablets require their own UI, which takes advantage of larger screen “real estate”. Of course, looking at the market share of small phones and “tweener” tablets (4.3% and 4%) they are less significant. However, the longer side of most devices is 30%-60% bigger than the shorter side. Thus, landscape orientation may need a separate layout. Wider layouts can be reused for landscape orientation of smaller devices.
  • 18. Orientation is just another screen resolution. 400x640 dp in portrait 320x420 dp in portrait 320x420 in landscape 320x400 dp in portrait
  • 19. Two useful patterns “stretching” layout “centering” layout Margins 320x480 dp stretches to 320x480 is centered in 400x640 400x640 dp Plan for resizable elements and/or margins.
  • 20. Choose “switching points” 240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp small size portrait small size landscape normal size landscape normal size portrait large size portrait By listing all the possible layout widths (both orientations), we see how do they cluster. Choose switching points, when do you a) introduce new layout b) start/stop growing margins c) start/stop growing element size
  • 21. One layout and many many adjustments Home base 240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp small size portrait small size landscape normal size landscape normal size portrait large size portrait resized elements margins added new layout
  • 22. How many layout enough? Every additional layout adds significant effort, but improves user experience. Options worth considering: - portrait only on the handset - landscape only on the tablet Use market research to understand, what your target customers are using.
  • 23. 2 layouts - richer UI Home base 240dp 320dp 360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dp small size portrait small size landscape normal size landscape normal size portrait large size portrait resized elements & margins new layout Make advantage from more screen “real estate”!
  • 24. Tablet layouts on 3.2 and after Starting Android 3.2 it is possible to target screens using width, height and “smallest width” (shortest screen dimension, ignoring orientation). Very useful! Smallest Generalized Density Orientation width size bucket 768 dp extra large mdpi portrait 768 dp extra large mdpi portrait 800 dp extra large mdpi portrait 1024 dp extra large mdpi landscape 1280 dp extra large mdpi landscape 1280 dp extra large mdpi landscape
  • 25. Before 3.2: a bit more tricky! For Android prior 3.2 you could only target screen groups using generalized size, density bucket and screen orientation combination. Still possible to target “smallest width”. Short side Short side Generalized Density Orientation min max size bucket 240 dp (same) small hdpi portrait 320 dp (same) small ldpi portrait 320 dp (same) normal hdpi portrait 320 dp (same) normal ldpi portrait 320 dp (same) normal mdpi portrait 320 dp (same) small hdpi landscape 426 dp (same) small ldpi landscape 480 dp 600 dp large mdpi portrait 480 dp (same) normal mdpi landscape 533 dp 568 dp normal hdpi landscape 533 dp (same) normal ldpi landscape 640 dp 576 dp large ldpi portrait
  • 26. Designing layout: the process Process for designing a layout in dp: 1. Research market and decide on the screen groups 2. Find smallest dp resolution for every screen group 3. Design for the smallest db resolution on a canvas equal to biggest pixel resolution 4. Enhance it for bigger resolutions from the group 5. Make sure that sizes of reused elements translate into all pixel densities groups without a reminder. Pixel perfect rule: If you support ldpi, dp sizes have to be dividable by 4. If you don’t, sizes have to be dividable by 2.
  • 28. Phone dp width is increasing Until recently, all Android phones had 320dp width and 5”-7” tablets sometimes had 480dp. majority a few Galaxy Note 5”-7” tablets Phones (short edge) 320 dp 360 dp 400 dp 480 dp At the moment, number of phones with screen width = 360 dp is growing fast. However, these phones are running Android 4.0, so they can be addressed using “tablet” layouts
  • 29. Simple scaling or SVG isn’t the best solution! Smaller icons need to be redrawn to look better! Below there are icons for pictures folder in Mac OS X. Here is an article going into detail: About those vector icons
  • 30. Rhythm Android is using 48dp rhythm – size which translates to physical area comfortable to touch. Spaces between elements are recommended to be at least 8dp.
  • 31. Standard sizes Density bucket ldpi mdpi hdpi xhdpi Launcher 36x36 px 48x48 px 72x72 px 96x96 px 24x24 px 32x32 px 48x48 px 64x64 px Action bar (18x18) (24x24) (36x36) 48x48 12x12 px 16x16 px 24x24 px 32x32 px Contextual (9x9) px (12x12) (18x18) 24x24 Icons 18x18 px 24x24 px 36x36 px 48x48 px Notification (16x16) (22x22) (33x33) (44x44) Except for the icons, platform doesn’t have many standard elements. For instance, action bar is 48-60dp depending on resolution and screen orientation.
  • 32. File names Graphics artifact filenames: - CAN’T have spaces or dashes - MUST be in small letters - MUST start with a letter Your coder will love you for this!
  • 33. Maybe … If the screen has only few field, consider making it into dialog. Transparent list and image backgrounds on lists can hinder performance/result in memory problems. Instead of launching progress dialog, consider animating interface elements, such as action bar items. Design with different font size for devices of different size.
  • 34. FIN & Good luck! Contributors: - Maksim Golivkin, Android developer - Joonas Kukkonen, Elisa - Janne Toivola, Futurice - Antonio Guadagno, Exaget - Victoria Fedirko, Freelance designer Inspiration: - “iOS App Designer Guide to Developer Love”, Lemon Labs Looking for an Android developer? www.golivkin.eu A freelancer? maksim@golivkin.eu

Editor's Notes

  1. Incomplete, because a) not enough space b) not enough statistics to understand what devices run 3.0-3.1