Living in the IT Era

10:30AM – 12:00NN
BSBAHRM2a
22-1 GEC9

Search online for an application that has both a web version and a
mobile version. Compare and contrast the versions in terms of
content, layout, and design.

Facebook offers a website accessible from desktop browsers and a mobile app available on various
mobile platforms like Android and iOS.

Facebook's web version and mobile app differ in several key aspects related to content, layout, and
design:

Content:

Web Version Content:

 Provides a larger screen real estate for content, allowing for a more extensive view of posts,
photos, and videos simultaneously.
 Supports more extensive text input and formatting options, making it suitable for longer posts,
articles, and discussions.
 Offers advanced features like desktop gaming and access to Facebook Marketplace.

Mobile App Content:

 Optimizes content for smaller screens, typically displaying a single post or piece of content at a
time for easy mobile consumption.
 Emphasizes visual content, such as photos and videos, which are more conducive to mobile
device usage.
 Encourages real-time engagement with features like push notifications and location-based
services for check-ins.
Layout:

Web Version Layout:

 Utilizes a multi-column layout on larger screens, allowing users to see multiple posts and
content blocks side by side.
 Often includes a left-side navigation menu for easy access to different sections of the platform.
 Provides a more expansive view of content due to the larger screen space.

Mobile App Layout:

 Adapts to smaller screens with a single-column layout, making navigation and content
consumption more straightforward for touch-based interactions.
 Typically positions navigation elements at the bottom of the screen or hides them in a side
menu to maximize the content area.
 Prioritizes a user-friendly and touch-responsive design, with larger icons and buttons.

Design:

Web Version Design:

 Tends to feature more detailed graphics and larger images, given the ample screen space
available.
 May include hover effects and tooltips for desktop interactions.
 Supports drag-and-drop functionality for actions like organizing photos and rearranging
content.

Mobile App Design:

 Prioritizes simplicity and ease of use for touch interactions, with larger and more touch-friendly
buttons and icons.
 Focuses on swipe gestures and taps for navigation, enhancing the mobile user experience.
 Places a strong emphasis on visual content and encourages quick, mobile-centric actions like
sharing photos and checking in.

In summary, Facebook's web version and mobile app cater to different user experiences based on
the platform's capabilities and user behaviours. The web version offers a more expansive and
feature-rich experience, while the mobile app optimizes for simplicity, touch interactions, and real-time
engagement, emphasizing visual content and convenience for users on the go.

Student Name: Angelibeth Pado Nopia Instructor: Jonalyn Angeles

Date: 08 / 10 / 2023