Mobile-friendly design in SEO Fundamentals - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a viewport meta tag for mobile-friendly design.

SEO Fundamentals

<meta name="viewport" content="width=[1], initial-scale=1">

Drag options to blanks, or click blank then click option'

Adevice-width

Bscreen-width

Cwindow-width

Dpage-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'screen-width' or 'window-width' instead of 'device-width' causes improper scaling.

Omitting the viewport meta tag leads to poor mobile display.

The viewport meta tag with width=device-width ensures the page matches the device's screen width, making it mobile-friendly.

2fill in blank

medium

Complete the CSS property to make images responsive on mobile devices.

SEO Fundamentals

img { max-width: [1]; height: auto; }

Drag options to blanks, or click blank then click option'

A50%

B100px

Cauto

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel widths causes images to overflow on small screens.

Setting height without auto can distort image proportions.

Setting max-width: 100% makes images scale down to fit their container, ensuring they display well on smaller screens.

3fill in blank

hard

Fix the error in the media query to apply styles only on screens smaller than 600px.

SEO Fundamentals

@media (max-width: [1]) { body { font-size: 14px; } }

Drag options to blanks, or click blank then click option'

A600px

B600%

C600em

D600pt

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'em' or '%' units causes the media query to behave unexpectedly.

Omitting units leads to invalid CSS.

The correct unit for screen width in media queries is px (pixels). Using '600px' targets screens up to 600 pixels wide.

4fill in blank

hard

Fill both blanks to create a flexible layout that stacks on small screens.

SEO Fundamentals

display: [1]; flex-direction: [2];

Drag options to blanks, or click blank then click option'

Aflex

Bblock

Ccolumn

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' for display disables flexbox features.

Setting flex-direction to 'row' keeps items side by side, not stacked.

Using display: flex with flex-direction: column stacks items vertically, which is ideal for mobile layouts.

5fill in blank

hard

Fill all three blanks to create a responsive navigation menu that hides on small screens.

SEO Fundamentals

@media (max-width: [1]) { nav { display: [2]; } } nav { display: [3]; }

Drag options to blanks, or click blank then click option'

A768px

Bnone

Cblock

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect units for the breakpoint causes the media query to fail.

Setting display to 'block' inside the media query does not hide the menu.

Forgetting to set the default display outside the media query causes layout issues.

This media query hides the navigation menu (display: none) on screens smaller than 768px, while normally showing it as a flex container.

Practice

1. What is the main purpose of mobile-friendly design in websites?

easy

A. To make websites only work on desktop computers

B. To add more images to the website

C. To increase the website's loading time

D. To make websites easy to use on phones and tablets

Solution

1. Step 1: Understand mobile-friendly design goal

   Mobile-friendly design aims to improve user experience on smaller screens like phones and tablets.

2. Step 2: Compare options to the goal

   Only To make websites easy to use on phones and tablets matches this goal by focusing on ease of use on mobile devices.

3. Final Answer:

   To make websites easy to use on phones and tablets -> Option D

4. Quick Check:

   Mobile-friendly = easy use on phones/tablets [OK]

Hint: Mobile-friendly means easy use on phones and tablets [OK]

Common Mistakes:

• Thinking mobile-friendly means adding more images
• Believing it slows down the site intentionally
• Assuming it only targets desktop users

2. Which CSS technique is commonly used to make a website adapt to different screen sizes?

easy

A. CSS media queries

B. CSS floats

C. CSS animations

D. CSS shadows

Solution

1. Step 1: Identify CSS techniques for responsive design

   Responsive design uses CSS media queries to apply styles based on screen size.

2. Step 2: Match options to responsive technique

   Only CSS media queries allow adapting layout for different devices.

3. Final Answer:

   CSS media queries -> Option A

4. Quick Check:

   Responsive design uses media queries [OK]

Hint: Media queries adjust styles by screen size [OK]

Common Mistakes:

• Confusing floats with responsive layout
• Thinking animations control layout
• Believing shadows affect screen adaptation

3. Consider a website using this CSS snippet:

@media (max-width: 600px) { body { background-color: lightblue; } }

What happens when you view the site on a phone with screen width 500px?

medium

A. The background color stays the default

B. The background color changes to lightblue

C. The background color changes to darkblue

D. The site stops loading

Solution

1. Step 1: Understand the media query condition

   The CSS applies styles when screen width is 600px or less.

2. Step 2: Check device screen width against condition

   Phone screen is 500px, which is less than 600px, so styles apply.

3. Final Answer:

   The background color changes to lightblue -> Option B

4. Quick Check:

   Screen ≤ 600px triggers lightblue background [OK]

Hint: Check if device width meets media query condition [OK]

Common Mistakes:

• Ignoring the max-width condition
• Assuming default color always shows
• Thinking site will crash on small screens

4. A developer wrote this CSS but the mobile layout is not working:

@media screen and (min-width: 600px) { .menu { display: none; } }

What is the likely problem?

medium

A. The media query hides the menu on large screens, not small ones

B. The syntax of the media query is incorrect

C. The class name .menu is invalid

D. Media queries do not work on mobile devices

Solution

1. Step 1: Analyze the media query condition

   The query applies styles when screen width is 600px or more (large screens).

2. Step 2: Understand the effect on mobile layout

   On small screens (less than 600px), the menu is not hidden, so mobile layout may not change as expected.

3. Final Answer:

   The media query hides the menu on large screens, not small ones -> Option A

4. Quick Check:

   min-width 600px hides menu on large screens [OK]

Hint: min-width targets large screens, max-width targets small [OK]

Common Mistakes:

• Thinking syntax is wrong when it is correct
• Believing class names cause media query failure
• Assuming media queries don't work on mobiles

5. You want to improve SEO by making your site mobile-friendly. Which combined approach is best?

hard

A. Only increase font size for mobile users

B. Create a separate mobile site with different URLs

C. Use responsive design with media queries and test on multiple devices

D. Disable images on mobile to speed up loading

Solution

1. Step 1: Identify best SEO mobile-friendly practice

   Responsive design with media queries adapts layout on all devices, improving user experience and SEO.

2. Step 2: Consider testing importance

   Testing on multiple devices ensures the site works well everywhere, avoiding issues that hurt SEO.

3. Final Answer:

   Use responsive design with media queries and test on multiple devices -> Option C

4. Quick Check:

   Responsive + testing = best SEO mobile-friendly approach [OK]

Hint: Combine responsive design and testing for best SEO results [OK]

Common Mistakes:

• Thinking separate mobile sites are better for SEO
• Believing only font size changes are enough
• Disabling images harms user experience and SEO