Responsive Web Design

Screen Sizes:

Mobile Platform vs Desktop Platform in Relation to Planning and Executing Web Design:

Due to the nature of the mobile platform, it differs greatly compared to the desktop platform. Meanwhile, keeping the website consistent between the two platforms.

  • Users will use their fingers instead of a mouse. This will mean tapping, rather than clicking.
  • Users tend to swipe left to right. This allows for information to easily slide in from left to right, such as when using a gallery.
  • The screen size is much smaller on mobile than on desktop. This will allow for less information to be seen at first glance on the mobile than on the desktop.
  • Scrolling up and down is common practice on the mobile, and because of this, it is becoming more common on the desktop. It used to be said that scrolling was bad for desktop and will send users away.
  • The orientation on mobile is portrait, where the desktop is landscape. This will change the orientation of the navigation as well.
  • There should be less information on the mobile page due to it's size, but the information should still be available with a tap. The content must be prioritized.
  • Integrative functions are key when creating mobile websites. The website should integrate with the phone's apps. Such as maps and calling. This is very helpful when moving around - thus the mobile experience.
  • Situational design for mobile reminds us that when users are on the go, they get distracted easily and move on. Easy to navigate, and to the point is best practice for mobile.
  • (Enginess, 2021)

The sizes and resolutions of the most common mobile devices (Hanson, 2021) :

Brand Screen Size Resolution
Samsung Galaxy S21 Ultra 6.8 inches 1440 x 3200 pixels
Apple iPhone 13 Pro 6.1 inches 1170 x 2532 pixels
Apple iPhone 13 Pro Max 6.7 inches 1284 x 2778 pixels
Samsung Galaxy S21 6.2 inches 1080 x 2400 pixels
Samsung Galaxy S21 Plus 6.7 inches 1080 x 2400 pixels
Apple iPhone 13 6.1 inches 1170 x 2532 pixels
Google Pixel 6 6.4 inches 2400 x 1080 pixels
Google Pixel 6 Pro 6.7 inches 3120 x 1440 pixels
Apple iPad 2021 10.2 inches 2160 x 1620 pixels
Amazon Fire 7 7 inches 1024 x 600 pixels
Apple iPad Air 2020 10.9 inches 2360 x 1640 pixels
Microsoft Surface Go 2 10.5 inches 1920 x 1280 pixels
Apple iPad Mini 6 2021 8.3 inches 2266 x 1488 pixels
Apple iPad Pro 2021 11 inches 2388 x 1668 pixels
Samsung Galaxy Tab S7 11-inch 2560 x 1600 pixels
Apple MacBook Air M1, 2021 13.3-inch 2560 x 1600 pixels
Microsoft Surface Laptop 4 13.5 inches 2256 x 1504 pixels
HP Spectre x360 13.3 inches 1920 x 1080 pixels

Screenshots of the Target Website at Different Widths

Provide the URL to the website you have selected:

http://www.target.com/

Target website: mobile, desktop, and tablet
Super Imposed Mock-Up of Target Website. Image Source: (Farrell, 2022); Super-Imposed Image Sources: (Target, 2022), (Sikkema, 2021), (Quaritsch Photography, 2018), (Eliason, 2017)

Smartphone - 320px wide

Desktop - 1024px wide

Tablet - 768px wide

When you view the responsive site at different sizes, is text sized appropriately for the smaller screens or do users need to zoom in to expand or contract the content?

The text is sized appropriately when using different devices with different screen sizes.

Is there another option for reading the content more clearly?

Target offers many options for accessibility.

According to Target,

  1. "Site Structure — We use appropriate headings, lists, paragraphs and other formatting features on Target.com so that guests can easily use the site with assistive technology.
  2. Text Equivalents — People who either can't see images or hear audio may need some form of a text equivalent to interact with our sites. We’re working to ensure all of our images and multimedia are fully accessible through alternative text, captions and transcripts.
  3. Full Keyboard Access — Everything we build can be accessed using a keyboard.
  4. Site Consistency — We’re consistent in the way we build our sites and apps so that once you understand how our menus and pages work, you can count on our sites to be consistent and function the same way every time you interact with them."
(Target, 2022)