###The No-Nonsense, Completely Authoritative, Non-Developer’s Glossary To Web and Web-related Buzzwords
####Contents
- Above the Fold
- Adaptive Design
- Content First
- Context Aware Responsive Experience (CARE)
- Context Buckets
- Device Buckets
- Device Detection
- Feature Detection
- Fluid Grids
- Graceful Degradation
- HTML5
- Liquid Layouts
- Mobile First
- One Web
- Progressive Enhancement
- Responsive Design
- Responsive Experience
#####Above the Fold: A metaphor borrowed from printed newspapers where the most important or engaging content was placed on the front page on the top half, so as to be immediately visible to passers by when folded and on display.
The term came to be applied to web pages to mean content that is displayed to the visitor without the need to scroll. This carried a great deal more weight and meaning when there were a narrow number of screen sizes available to visitors of websites, but carries very little meaning today due to the shear number of screen sizes at which a web page can be accessed.
“The Fold” was a term used to describe a specific need (attention) in specific medium (newspapers) in a very specific context (passing by a newsstand). While there are very similar needs for web sites, the media and contexts are greatly different. Attention should be paid to content prioritization rather than the awkward and largely meaningless metaphor of a fold.
#####Adaptive Design: A web design/development technique in which the layout of a given page changes to fit its environment. Adaptive Design or Adaptive Layout Design is very similar to Responsive Design, however Adaptive Design tends to have a stronger connotation to just front-end (client side) applications where as Responsive Design tends to account for both front and back end (server side) techniques.
See also: Responsive Design, Fluid Grids
#####Content First: A design pattern that starts by laying out a page with only its primary content. Then adding in secondary, tertiary, global and ad content only as and where appropriate. In essence designing from the layout and content out rather than the canvas in.
AKA Mobile First due to this approach effectively resulting in a well designed mobile experience before discovering the experience for more capable and larger devices.
#####Context Aware Responsive Experience (CARE): A more descriptive and Mnemonic name for Responsive Experience
#####Context Buckets: A systematic categorization of User Agent Strings (devices and browsers) into classes that represent certain defined ranges or sets of features, sizes or interaction paradigms such as mobile, touch, mouse-driven, tablet, or camera-enabled.
#####Device Buckets: See Context Buckets
#####Device Detection: The practice of inspecting the user agent (a unique identifier for a given browser and version) usually for the purposes of inferring a set of available features or device sizes. While legitimate reasons exist for using device detection -- such as to define context buckets on the server -- it has largely become regarded as bad practice in favor of feature detection.
See also: Feature Detection
#####Feature Detection: The practice of testing a browser and/or device’s capabilities for specific features as needed. This is much more accurate and “future friendly” and in contrast to the inference of features through device detection. Feature detection, which can include CSS media queries to determine device size, is a key component of creating a responsive website.
See also: Device Detection
#####Fluid Grids: Most websites are designed on a grid system to give them structure and proportion. Traditionally, those grids have had fixed sizes so they are presented uniformly across all browsers. In a responsive context, this is unworkable so fluid grids are used. Fluid Grids sizes are defined proportionally, often using percentages to allow the structure of the page to properly scale and fit its container.
#####Graceful Degradation: A technique where a site is given an ideal presentation which may utilize new or emerging features. Fall back techniques and styles are then employed for less capable devices and browsers that do not support the more advanced techniques. This ensures that legacy browsers and less feature rich devices still receive an experience that is intentional and well-designed even if it may not match the ideal.
The benefit of this is that content delivery does not suffer at the hands of legacy technologies, and legacy technologies are not taxed with complicated workarounds that would otherwise incur expensive performance hits for the sake of presentational uniformity.
See also: Progressive Enhancement
#####HTML5: (n) Technical: The 5th major revision of the HTML specification as defined by W3C (World Wide Web Consortium) and WHATWG (Web Hypertext Application Technology Working Group), the relevant standards bodies.
Common: Any combination of the various technologies, specifications, techniques, approaches or trends that have arisen over the last 3-5 years in the area of web design and development which may or may not have anything to do with the technical HTML5 specification. These may include, among others, any or all of the terms herein, as well as what is known as the front-end stack which are HTML, CSS (often CSS3 is conflated with HTML5) and JavaScript.
Specific popular features of the HTML5 specification or other newer web technologies are also sometimes referred to as HTML5. For example, “HTML5 video,” “HTML5 audio,” canvas, CSS3, local storage, local database, WebGL, WebSockets, etc.
This usage can be compared to the used of the term “Web 2.0” from several years ago. It is meant to describe a paradigm shift in the way the web, or its technologies are used.
#####Liquid Layouts: See Fluid Grids
#####Mobile First: See Content First
#####One Web: The concept of the web is that one piece of content lives at one URL and one URL is the address of one piece of content.
One Web is a philosophy that asserts that the web is healthier and more useful when paths to content or functionality are not blocked to some users or devices due to a lack of feature support, nor are those paths forked to a subset of users. A common anti-pattern to the concept of One Web is a separate domain and/or navigation hierarchy for the “mobile version” of a web site. Within a One Web philosophy, there would be no “mobile version,” simply a page that presents a context optimized user experience for the same URL.
#####Progressive Enhancement: A technique where a site is designed for the lowest common denominator device or browser and enhancements are added only when the device or browser is able to support it.
Much of the benefit that comes from Progressive Enhancement can be achieved with a content first approach to design. Preferring content first and graceful degradation to progressive enhancement also eliminates many of the downsides of progressive enhancement such as having to reverse engineer a design to find its lowest common denominator and then rebuilding back to the ideal.
See also: Graceful Degradation
#####Responsive Design:
- A web design/development technique that rests on the premise that web content is accessed by various devices with various sizes in various contexts and that a web page should be able to respond to all or many of these variables to present the document in a form that is suited to the given context utilizing both front-end (client side) techniques such as layout decisions and deferred loading, and back-end (server side) techniques such as payload adjustments and context bucketing.
- Any of the various techniques that can be applied to create a web page that responds or adapts to its context.
#####Responsive Experience: An experience that takes into account as much of the context in which the end-user is consuming the content in as can be accurately ascertained. This would include all the methods of responsive design and also include things such as interaction paradigms (touch, mouse, voice, gesture based interaction, et al.) bandwidth, user preference and habits, etc.