Hyundai Consumer Awareness

Template

More info coming soon.

Features

• Responsive layout to adapt to different screensizes and devices
• Separate banners to support Art Direction
• Progressively enhanced:
  • Background images
  • Web fonts
• Hover-over effects for video thumbnails and CTAs
• More info to come

Challenges and Solutions

Coming soon.

Responsive Layouts

To view responsive layouts, there are three options:

1. View screenshots various screen widths.
2. Use a web browser's DevTools to simulate different layouts.
3. Manually resize the browser.

1. Screenshots

The following are screenshots of each template at various screen widths.

320px | 360px | 375px | 414px | 480px | 600px | 768px

2. DevTools

To open the browser's DevTools, press F12 or Control+Shift+I (Windows, Linux) or ⌘+Option+I (macOS).

Note that simulations only give an approximation of the mobile or device user experience while using a web browser.

How to use DevTool: Chrome | Firefox | Microsoft Edge | Safari

3. Resize the browser

Note that using a web browser only gives an approximation of the mobile or device user experience in a web browser.