Name: FABOR, SHIELA MAE G.

Course/Yr&Sec: BSN – 2J

LIVING IN THE IT ERA – October 2, 2023

ACTIVITY 3

1. Search online for 5 application that has both a web version and a mobile version.
Compare and contrast the versions in terms of content, layout, and design.
Create a poster highlighting the difference between the two.

NAME OF CONTENT LAYOUT DESIGN

APPLICATIONS
(MOBILE AND WEB
VERSIONS)
1. FACEBOOK Web Version: The web Web Version: Web Version:
version of Facebook - The web version - The web version often
offers a more has a multi-column features a more desktop-
layout, with the like design with multiple
comprehensive
news feed, chat, columns and a fixed
experience. It includes notifications, and header at the top.
features like event menus displayed - It may incorporate
creation, detailed profile side by side on a desktop-specific
customization, and a larger screen. features like
wider range of settings. - It provides a keyboard shortcuts
more and right-click
Mobile Version: The organized options for more
mobile app provides a and control.
simplified interface structured Mobile Version:
optimized for smaller view of - The mobile app has
screens. It prioritizes the content and a mobile-first
news feed, stories, and navigation design, prioritizing
messaging for quick options. touch interactions
access. - User profiles and gestures.
and pages - It focuses on a
have a wider clean and user-
layout with friendly interface,
more space with swipe gestures
for content and tap actions for
and details. navigation.
Mobile Version: - The design
- The mobile elements are
 app features optimized for
a single- touchscreens and
column smaller displays.
layout,
stacking
content
vertically.
- It is designed
for ease of
use on
smaller
screens, with
a simpler,
more
streamlined
layout.
- Navigation
elements are
typically
accessible
through an
icon-based
menu at the
bottom of the
screen.

2. GOOGLE DOCS Web Version: Web Version: Web Version:

- The web version of - The web version - The web version may
Google Docs offers a features a multi- include desktop-specific
comprehensive suite of
pane layout, with features like a persistent
tools for creating, editing,
and collaborating on toolbars, menus, top menu bar and right-
documents. and document click context menus.
- Users can access a content displayed on - It often provides a more
wide range of formatting a larger screen. desktop-like interface with
options, including fonts, - Users can easily a comprehensive set of
styles, and advanced switch between options.
editing features.
different editing
- It provides seamless Mobile Version:
integration with other modes, access
- The mobile app has
Google services, such as revision history, and a mobile-first
Google Drive and Google use keyboard design,
Workspace. shortcuts. emphasizing touch
Mobile Version: - The interface is interactions and
The mobile version of optimized for gestures.
Google Docs provides a - It focuses on a
desktop and laptop
 more streamlined screens with ample clean and user-
experience focused on space. friendly interface
essential editing and real- with minimal
time collaboration. Mobile Version: distractions.
It includes core features - The mobile - Design elements
like text editing, app offers a are optimized for
commenting, and sharing simplified touchscreen
documents with others. single-column devices, making it
Some advanced layout, easy to edit
formatting options stacking documents on the
available in the web document go.
version may be limited on content
mobile to maintain vertically.
simplicity. - It uses a
more
compact and
touch-friendly
design
suitable for
smartphones
and tablets.
- Navigation
and editing
options are
accessible via
a collapsible
toolbar and
swipe
gestures.

3. INSTAGRAM Web Version: Web Version: Web Version:

- The web version of - The web version - The web version maintains
Instagram's familiar aesthetic,
Instagram primarily has a simplified,
with a clean and image-centric
allows users to view single-column design.
profiles and images. It layout, which stacks - It includes a sidebar for
provides limited images and captions navigation and user profiles,
interaction features vertically on the with the main feed and content
compared to the mobile user's feed and displayed in the center.
- The design is optimized for
app. profiles.
larger screens and provides a
- Users can browse - It utilizes a desktop-friendly experience.
profiles, view images, responsive design to Mobile Version:
and leave comments on adapt to various The mobile app has a mobile-
posts. However, they screen sizes but first design, prioritizing touch
interactions and gestures.
cannot upload photos or lacks the multi-
It incorporates swipe gestures
 stories from the web tabbed navigation to navigate between different
version. found in the mobile sections and stories.
The design is tailored for
- The web version lacks app.
smaller screens and
some features like touchscreen devices, offering a
creating stories, sending Mobile Version:
- The mobile more tactile and interactive
direct messages, and app features experience.
accessing the Explore a multi-
tab. tabbed
layout, with
Mobile Version: tabs at the
- The mobile app bottom for
provides a Home (feed),
complete Search,
Instagram Reels, Shop,
experience, and Profile.
including photo - Stories are
and video displayed
uploading, stories, prominently
IGTV, and direct at the top of
messaging. the feed, and
- Users can interact users can
with posts by swipe
liking, horizontally to
commenting, and view them.
sharing. Stories, - The Explore
IGTV, and the tab allows
Explore tab users to
provide a more discover new
immersive and content and
dynamic users based
experience. on their
interests.

4. AMAZON Web Version: Web Version: Web Version:

- The web version of - The web version - The web version
Amazon offers an often features a incorporates a desktop-
extensive range of multi-column layout, like design with multiple
products, detailed with various sections columns and a fixed
product listings, customer such as header at the top for quick
reviews, and seller recommended access to account
information. products, deals, and information and the
- It provides access to browsing categories. shopping cart.
features like wish lists, - Navigation menus, - It may include features
account management, filters, and sorting like hover-over product
 and recommendations options are typically previews, pop-up windows
based on browsing and located on the left for product details, and
purchase history. side or top of the keyboard shortcuts for
- Users can also explore screen. navigation.
additional features such - Users can open
as Amazon Prime multiple tabs for Mobile Version:
- The mobile app has
benefits and access to different product a mobile-first
Amazon’s various listings and easily design,
services (e.g., Prime switch between emphasizing touch
Video, Prime Music). them. interactions and
gestures.
Mobile Version: Mobile Version: - It features a clean
- The mobile app - The mobile and user-friendly
provides a app utilizes a interface with large
simplified and single-column buttons for easy
streamlined layout, navigation and a
shopping stacking simplified checkout
experience, products process.
focusing on vertically to - The design is
essential tasks like make efficient tailored for
product search, use of the touchscreen
one-click smaller devices and
purchasing, and screen. provides a
order tracking. - Navigation seamless shopping
- It includes features options are experience on
like barcode usually mobile devices.
scanning, photo accessible
search, and price through a
comparisons collapsible
through the menu at the
phone's camera. bottom of the
- The app is screen,
designed for making it
convenience and easy to
on-the-go browse and
shopping, with a explore
user-friendly categories.
interface. - The design is
optimized for
touch
gestures and
swiping
actions.

5. NETFLIX Web Version: Web Version: Web Version:

- The web version of - The web version - The web version offers a
Netflix provides a typically features a desktop-friendly design
comprehensive library of multi-column layout, with multiple columns and
movies, TV shows, with rows of content, a persistent top menu for
documentaries, and categories, and a account access and
original content. search bar at the search.
- It offers advanced top. - Users can access
content discovery - It provides a more detailed information about
features, such as multiple comprehensive and each title, including cast
genres, categories, and immersive browsing and crew details, trailers,
personalized experience, allowing and user reviews.
recommendations based users to see more
on viewing history. titles at once. Mobile Version:
- The mobile app has
- Users can manage their a mobile-first
profiles, set parental Mobile Version:
- The mobile design,
controls, and access app uses a emphasizing touch
account settings. single-column interactions and
layout, gestures.
Mobile Version: stacking rows - It provides a user-
- The mobile app of content friendly and intuitive
offers the same vertically. interface with larger
extensive content - It optimizes touch targets and
library but space for swipe gestures for
optimized for smaller navigation.
smaller screens screens, with - The design is
and touch a focus on optimized for
interactions. swiping touchscreen
- It emphasizes through devices and on-the-
ease of content content and a go streaming.
discovery through simplified
features like the navigation
"My List" section menu at the
and personalized bottom.
recommendations.
- Users can
download content
for offline viewing,
making it
convenient for on-
the-go
entertainment.