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!
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
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.
An example of Responsive Design on Google's site can be seen here
Separate Mobile Site?
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!
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!
"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.
How's it Work? Executive Summary
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;
}
More subtle, eye-pleasing color contrast between font and background
Semantic Chaos
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.
The Art of Compromise
"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."
