Responsive Web Design

Screen Shots Portrait & Landscape Orientation

Tap a graphic to view the Web page online. Learn about responsive Web design below.

MathWithGames.com

Math Games Website

Landscape

Math Games Website

Portrait


Hidden Object Game

Find Hidden Objects Game

Landscape

Find Hidden Objects Game

Portrait


BibleWithGames.com

Bible Games Website

Landscape

Bible Games Website

Portrait


3D Interactive Swimming Butterfly Fish

3D Butterfly Fish

Landscape

3D Butterfly Fish

Portrait

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. Responsive Web design saves time and money, while providing a wonderfully simple method to prepare beautiful Websites for almost every device.

See media queries in action. 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 elements 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.

The e-book HTML5 Hidden Object Games explains and includes basic responsive Web design with media queries. Follow the HTML5 Hidden Object Games link to see free example projects.

Web Design Concepts

Read more Web design concepts. Tap an image tile below, for topical Web design articles.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.