Smart watches. Hand-held gaming consoles. Laptops. Mobile phones. Tablets. Phablets. Wide screen desktops. Head-mounted displays.
Once, when we talked about the web, people thought of networked desktops and laptops. Today, it has evolved into a diverse ecosystem of interconnected, intelligent machines. When designing for the web, we need to create responsive interfaces that adapt to different machines.
At the most practical level, we need to think about how our content will be displayed on screens of different sizes. According to Smashing Magazine, "responsive design" refers to "the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation." Others argue that responsive design is "about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen."
However, we also need to think about the way that devices and content are used by human beings. Is the user typing on a physical keyboard, thumbing a virtual keyboard, or using voice recognition? Can the user swipe, pinch, flick, or spread? Can the user hover? And, most important, will our interface be usable across a range of input conditions?
To earn this badge, you will develop responsive user interface wireframes for one of your favorite sites.