Responsive Web Design

Screen Shots Portrait & Landscape Orientation

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

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.

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

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 free example projects.

Web Design Concepts

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

Copyright © 2015 Seven Thunder Software. All Rights Reserved.