Responsive Design

SELF-ADJUSTING WEBSITES

Blue Smartphone with Responsive Design

Responsive Design techniques permit multiple adaptions to screens sizes and devices. Is is not a Separate Mobile Site. Historically, web developers assumed one general screen size; later a second mobile site could be added (often m.example.com or mobile.example.com) for Smartphones. The separate mobile site model assumed two device classes: One site about 900 pixels wide, and one site about 300 pixels wide. Commonly, Mobile sites were an afterthought; the site was desktop designed, and a simple mobile site tacked on later. This made sense in the Desktop Dominated World.

"The fixed and unresponsive will be broken.
The fluid and flexible will prevail."

Lao-tzu, translated to enhance prescience!

Holy Devices, Batman!

WiFi Icon

After 2010, 4G connectivity, the iPad, iPhone, Android-powered Smartphones and Tablets, Internet-Enabled Televisions, 2560 pixel-wide desktops and Internet-Enabled screens in cars (The Fourth Screen) created a multitude of screen sizes (2" to 90") and pixel screen resolutions (Retina Display). Additionally, users modify the mobile device screen dimensions by turning to change from portrait to landscape layout. The Responsive Design website that could continuously adapt to a myriad of devices became a necessity. In addition to the types of devices growing in number, the percentage of mobile users and mobile useage skyrocketed.

Responsive Design

Smartphone, Laptop, Notepad, TV

Responsive Design websites reconfigure continuously, meeting the challenge of multiple screen widths and device types. A common approach is placing content in uniform boxes; the boxes restack vertically as the screen width shrinks.

Good Responsive Design considers the smaller devices relatively slow connection speeds, and specific needs of mobile users. Mobile sites load fast, and prioritize actionable information (phone numbers, address, link to map, click to call, store hours, etc.) over styling. Ornamentation that impresses on a desktop (Ex: Nothing sells a beach resort like beautiful pictures) may lead to frustration on a very small screen with a slow connection.

Separate Mobile Site?

Andriod Robot

Separate Mobile Sites are not Responsive Design. It is a useful accommodation for small devices, but all users are forced into two categories: Smartphone, or average size Desktop.

In reality, user's devices come in many different sizes, and a site that is capable of multiple adjustments will meet each user's needs more effectively. Separate mobile sites do nothing to address very large screens, and "in between" notepad-size devices.

DON'T FORGET THE BIG SCREENS!

LED Television Ultra HD TV

Typical Responsive Design approaches are primarily aimed at smaller-than-laptop screens: Notepads and Phones. However, at the same time that some screens are getting small, others are getting bigger. Full-size television screens are increasingly used to surf the web, and the latest generation of 24" to 30" desktop monitors offer amazing resolution (2560px by 1440px is common on better monitors, and the 3840px by 2160px Sharp PN-K321 is now commerically available). Websites need to adapt to these larger screens as well.

DON'T FORGET THE BIG LITTLE SCREENS!

Small Device Montage

"Retina Screens" and other high-density (up to 460 pixels per inch) small screens can contain the same number of pixels typical for a 70" wall-mounted television in a Smartphone size. Delivering the image quality these devices can utilize, while accommodating their connection speeds is a Responsive Design challenge. Pixel densities greater than 300px/in are now standard on better Smartphones.

Because users commonly scroll in to read text and see images on these small devices, low resolution images will exhibit visible pixelation. SVG images, or variable resolution bitmap images, are needed to maintain a good appearance.

CSS (Cascading Style Sheet) Media Queries can be used to redefine most HTML elements attributes; for example:

@media screen and (max-width: 900px) {

#header-1
{
font-family: 'Pretty Fancy Hard To Read Script','Fancy Fallback','Arial'
width:39%;
color:gray;
}

@media screen and (max-width: 540px) {

#header-1
{
font-family: 'Easy To Read When Small Font','Arial'
width:60%;
color:black;
}

#long-winded-history-of-our-firm
{
display:none;
}

With this code:

Small Screens:

Page Header is larger percentage of the screen

Simple, Easy to read font

High color contrast between font and background

Verbose text is not displayed

Large Screens:

Page Header is smaller percentage of the screen

Elegant font

More subtle, eye-pleasing color contrast between font and background

Responsive Design is a new idea, and a very new word with fluid meanings; first coined by Ethan Marcotte in 2010. Sometimes Responsive Designs the specific @media Media Query approach to Web Development, but others use Responsive Design to include all techniques improving functionality on multiple devices.

"Designing one website for 3.5" to 30" screens and everything between and beyond is a tricky challenge. The Web... ... has limitations. You wouldn't try to print a super thin font or full-colour photography on uncoated newspaper stock and expect high fidelity... ...Large, highly textured graphics just do not fit. (I prefer) vector graphics with SVG (and CSS) yet simply doing away with raster graphics is too much of a compromise."

-David Bushnell