Responsive Web Design
Screen Shots Portrait & Landscape Orientation
Tap a graphic to view the Web page online. Learn about responsive Web design.
Hidden Object Game
3D Interactive Swimming Butterfly Fish
About Responsive Web Design
This set of Web page screen shots display responsive Web design implemented with media queries. Media queries load style sheets based on screen dimensions and other criteria. Responsive Web design allows Web masters to prepare one page for display on a set of devices, including mobile phones and full computers. Before responsive Web design, often two pages were created for each topic, one page for desktop computers and the other page for mobile devices.
Tap a screen shot above, to view the Web page online.
Rotate your mobile device or resize your Web browser to watch pages rearrange and scale
to fit nicely, regardless of screen dimensions.
Landscape screens display more horizontal than vertical area,
such as on a typical desktop computer monitor.
Portrait screens display more vertical than horizontal area, such as on
a smart phone when held upright.
E-Book Provides Responsive Web Design Basics
Web Design Concepts
Read more Web design concepts. Tap an image link below, for topical Web design articles.