General Information:
Definition / Summary of Responsive Web Design:
Responsive Web Design is a concept that every web designer must use today. It allows for the designer to design for multiple devices. Thinking of a content-first approach, a user must consider screen size, click-method (mouse vs. touch), typography, flexible imagery, showing or hiding items by order of importance, optimizing media, and clear visual hierarchy. Best practices are important when using responsive web design, and that includes accessibility for users with disabilities. In fact, responsive web design is a key ingredient in making websites more accessible. Accessibility best practice suggests using h1, h2, h3 to help user’s with sight difficulty, guide their way through the site.
According to
Hackernoon (2021)
, some other best practices to consider are:
-
Using relative units (em) vs absolute (px, pt).
-
Dividing the design using four screen sizes (phone, tablet. laptop, and desktop).
-
Understanding max and min values for @media use in the CSS.
-
Use nested objects (This allows for grouping of objects, for easier layout changes).
-
Code mobile first. (This is the most important, due to the nature of the 2021 user’s online habits.
-
Understanding web (slower to load) vs system (faster to load) fonts.
-
Understanding bitmap (think Ps) vs vector (think Ai) images.
Responsive Website vs. One-Size Fits All:
A responsive website is one that changes based on various screen-sizes, whereas the old one-size fits all version was the same across all screen sizes. This made it very difficult to view webpages on a smaller device. The typography would often go off the page, or be too small to read. The user would have to zoom in and out, and click-ability was very difficult with large fingers and tiny links.
Scrolling:
Horizontal is not best practice when viewing web pages on a desktop or a laptop, vertical is allowed and is very common-place. The ease of scrolling using the mouse wheel to go up and down is very easy. Most users find themselves scrolling to read an article that they find interesting. Scrolling on a tablet or a smartphone is not only liked, but it is necessary. It is easier to do it quickly using thumbs or fingers, where on a desktop you have to use a mouse. Using the mouse to scroll horizontally adds a level of inconvenience and frankly isn’t necessary due to the large screen size.
Site-Specific Information:
Provide the URL to the website you have selected:
http://www.target.com/
Provide a synopsis for the website:
The Target website sells general merchandise online. They offer food, and a large variety of merchandise, including clothing, accessories, home decor, electronics, toys, and seasonal merchandise.
Who is the targeted audience?
The targeted audience is middle class families, college students, and couples. Ages range from teen to 60s. They have a large market for college students and advertise quite a bit for dorm furnishings and home goods. They target college campuses and urban areas, such as suburban communities.
What is the purpose of the website?
The purpose of the website is to sell goods using a convenient user-friendly website. They offer an easy to use, fun to look at, website that caters to the user’s home. The user can have items delivered the same day if offered locally, have items delivered through a shipping service, or pick them up at the store. It is easy to search for an item, or find something new!
How can you say that the website is a responsive website?
When changing the width using the web dev tools in Google Chrome, the site changes from three tiles wide, to two tiles wide, to a single scrolling column.
Was it something in the code specifically that you noticed?
The meta name=“viewport”… in the head code and the media queries in the cascading style sheet, let us know that this is a responsive website.
Analyze the smartphone size of the website. Is the primary navigation on the mobile site the same as it is on the desktop site? Is it truncated? Dropdown menu? Something else?
The menu on the desktop has a few choices, and they each have their own individual drop-downs. When looking at the mobile version, there is only one choice, that drops down and then each of those original choices appear that open up side menus of their own.
How is text handled on the mobile site - truncated, linked, chunked?
There isn’t a lot of text on the website, however they do seem to use a lot of grouping. So, it would seem to be chunked.