MD Week 2 – Group List

Desktop to Mobile Comparison

Working in your groups, share your desktop to mobile comparisons with each other. What are some similarities between your findings? Which example has the strongest or most interesting transition to mobile (save this one to share). Are there any bad/humorous examples? What made these successful or not?

Working in this paper document, let’s add some rules/ideas for designing a comfortable experience on mobile. I’ve added sections to the document, working with your groups, add at least two bullet points to the list. Note: to edit this document, you must be logged in to dropbox.

We’ll share one of your homework examples from each group.

Group 1: Trevor, Olivia, Cindy
Group 2: Arani, McKayla, Alicia
Group 3: Natashia,Honglin, Esther
Group 4: Veratie, Ellie, Simon
Group 5: Shreya, Nico, Demi
Group 6: Yuzheng, Jacqueline, Haoyu

Master List – How to Create a Comfortable Reading Experience on Mobile


  • Type font is constant
  • Stark contrast in color makes things more readable since the mobile app is smaller- typically black text and white background
  • Font sizes are closer together on mobile (less discrepancy between header size and body size
  • Hierarchy is more prominent on mobile than on desktop 


  • Utilizes a pop-out menu that is sometimes hidden, doesn’t take up too much space 
  • Navigation bar at the bottom for mobile phones and top for desktops
  • Content is condensed inside mobile through navbar whereas desktop is laid out with less clicking

Layout (Grid, design, white space)

  • The interaction is always vertical (on mobile) - from top to bottom. 
  • Layout for Images are often set to browse horizontally.
  • Calls to action (buttons) are moved to bottom or bottom right of screen - makes for easier interaction with thumb
  • Typically utilizes one column grid 

Interface (Buttons, Icons)

  • As button, mobile app has larger font size. Mobile app also replaces a lot of text button to icons.
  • Buttons/icons are fully visible on desktop. Mobile has to scroll sideways to see all the buttons.
  • Less motion graphic/videos are shown on mobile.

Images (Photos, Illustrations)

  • Desktop versions display photos for categories whereas mobile leans on use of icons
  • Different images of the same movie/ .                                                show were used on the desktop and mobile versions to fit the screen sizes
  • Desktop fits screen perfectly whereas mobile isn’t, which lets you see the content of next page/scroll
  • On mobile, images are often enlarged than on the desktop.


  • Color theme broke from brand colors on the mobile version
  • Click interactions are often replaced by swipes (especially for horizontal menus)
  • Elements that were responsive to scroll and mouse movement on the desktop version were only responsive to scroll on the mobile version
  • Many commercial websites keep images for products on mobile, whereas neglect sub-elements that overwhelms on the desktop.