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

Landscape: Math Games Website
Portrait: Math Games Website

Hidden Object Game

Landscape: Find Hidden Objects Game
Portrait: Find Hidden Objects Game

BibleWithGames.com

Landscape: Bible Games Website
Portrait: Bible Games Website

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.

Web designers can resize elements based on the percentage of available display space, with or without media queries. For example the following img tag displays an image at 50% of the width of the containing block.

<img 
style="width:50%" 
src="graphic.png" 
alt="Graphic Displays One Half Width" 
/>

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.

Web Design Concepts

Read more Web design concepts.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.