Next class is our midterm evaluation. We’ll have an in class activity and 1:1 meetings all class. Please check the agenda at the start of class for your time slot!
In small groups, take 20 minutes and find a couple examples of a website and observe how it changes from its desktop size to its mobile size, paying special attention to the typography and reading experience. Below, please document your observations
Master List – What changes are made on desktop to mobile?
3:20 check in!
Typography
The Athletic- Headings get smaller.
Pinterest: Type becomes a bit smaller
Canvas: consistent across both platforms, though app seems to just use system fonts. Website seems to also start at a light font weight as its base while the mobile app seems to start at a normal weight making a lot of the text on the mobile app feel very heavy
Instagram: consistent typography
Navigation
Pinterest: Navigation changes on mobile—quick action icons at the bottom and a swipe bar of boards at the top. Web header focuses on search bar at top, which becomes a small icon on mobile.
Instagram: worse on web(computer version) It seems to be build for the mobile experience, instagram stories: awkward experience on web
Canvas App: Instead of primarily relying on a vertical sidebar, uses a bottom tab bar instead, as well as a sidebar/hamburger with some confusing settings. App displays courses and groups first instead of“todo”
The Athletic: The nav converts to a hamburger.
Layout(Grid, design, white space)
The Athletic: cards for different articles disappear, title overlaps with the images and is difficult to read at times. The two-column layout gets smushed into one. The first article rose on the page to be above the jump.
Instagram: some photos don’t entirely fit on the web view, users have to scroll to see the whole pic
Canvas app: Displays courses in a grid layout instead of a list. A bit more dense layout as a whole.
Pinterest: Gridded columns that you scroll by on web, vs two column scroll feed on mobile
Interface(Buttons, Icons)
Pinterest: Navigation bar on the top on web and hover over images to complete actions: These become buttons and pop-up icons on mobile.
The Athletic: subscribe button is responsive, it gets smaller.
Canvas app: Similar but I noticed the sidebar on the website does not display any corresponding text with its icons, while the mobile app equivalent bottom bar does. Furthermore, the sub navigation among each course page, the mobile app includes icons while the website does not
Instagram: icons are similar; in the desktop version, navigation(home, search, activity) is on the top of the page
Images(Photos, Illustrations)
Instagram: images are squared in both
Pinterest: Images are formatted similarly with curved corners
The Athletic: images convert from 4x4 ratio to 5x2 ratio.
Other
The Athletic: the description of the article disappears
Canvas: Hard to transfer from website to the mobile app due to difference layout and composition.
Pinterest: navigation on mobile app is more intuitive
Instagram: the creators try to translate the mobile experience into the desktop version; there is an inability to upload content through the desktop version
Up Ahead
Review
Activity: Observing Responsive Design
Master List – What changes are made on desktop to mobile?
Typography
Navigation
Layout (Grid, design, white space)
Interface (Buttons, Icons)
Images (Photos, Illustrations)
Other
Websites Explored