What is responsive web design?

Simply put, responsive web design is the method of creating a website that looks good and works well on any device used to browse the web. Wikipedia defines responsive web design as follows:

"Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)."

During the website design process, special code is written in the form of CSS (Custom Style Sheets) that allows your website to be displayed differently depending upon what type of device your visitor is viewing the site on. This is done automatically through the use of media queries.

At it's most basic, a responsive design displays the same information in the mobile view of your website as a visitor would see if they were on a desktop computer. The information is just presented in a single column layout with a font size large enough to be easy to read on a phone or pad. At designOneweb we take responsive web design to the next level. We design your site so that mobile visitors have access to mobile-only elements, such as click-to-call and one click GPS navigation. These are features typically only found in native mobile apps or standalone mobile sites.

The responsive design philosophy is "mobile first." This means beginning the design process, from the planning stage all the way through to implementation, with the smallest screen size a site is likely to be viewed upon. Throughout the design phase of a responsive site, you should view your site on multiple mobile platforms. This will ensure that all your mobile visitors have an optimum viewing experience.

For those who don't currently have the marketing budget to have a professional build or redesign their site, we offer responsive web design tips in our "Web Design Tips" section. We will also provide a list of responsive design resources.

Why Should I Use Responsive Design Instead of a Standalone Mobile Site?

When designing a website for mobile devices, there are a few options. Responsive websites are sites that automatically respond to the size of the screen they are being viewed on. Visitors viewing on a desktop get an experience optimized for large screens. Those viewing your site on a mobile device have an experience optimized the smaller screens of phones and tablets. for Standalone mobile sites are completely separate sites from your normal site. Visitors are redirected to the mobile site when they go to your primary domain. All of this happens behind the scenes without any input from your visitors.

In June of 2012, Google came out with their Recommendations for building smartphone-optimized websites. They talked about the 3 methods Google supports when building a website for mobile devices. Below is an excerpt from the post as it relates to responsive design:

"Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration (highlight added by Google in the original post)."

To help you understand your web design project, we've shared a list of some of the most common terms you may hear and see. This list of terms was put together by Cameron Chapman and was published on SmashingMagazine.com.

ANCHOR TEXT

The text a link uses to refer to your site. This can make a big difference in your site’s search engine results. See also: Backlink.

BACK END

The back end of a website is the part hidden from view of regular website visitors. The back end generally includes the information structure, applications, and the CMS controlling content on the site.

BACKLINK

Backlinks are links from other sites back to your own. They’re sometimes also referred to as “trackbacks” (especially on blogs). Backlinks have a huge impact on your sites search rankings. Lots of backlinks from high-ranking sites can greatly improve your search engine results, especially if those links use keywords in their anchor text.

BELOW THE FOLD

This term is a carry-over from newspaper publishing days. In newspaper terms, “below the fold” means content was on the bottom half of the page (below the physical fold in the paper). In web design terms, “below the fold” refers to the content that is generally going to be below the point first viewable to the average website visitor in their browser (in other words, viewers would have to scroll down to see the content).

BOUNCE RATE

A website’s bounce rate is the percentage of people who leave the site from the same page they entered the site, without clicking through to any other pages. This can be a good indicator of how good a website’s navigation is, as well as an indicator of the quality of the site’s content (a very high bounce rate doesn’t bode well for either of those things).

BREADCRUMB

Breadcrumbs are the bit of navigation elements that generally appear near the top of a give web page that show you the pages and subpages the appear before the page you’re on. For examples, on a blog, the breadcrumbs might look something like: Home > Category > Year > Month > Post (or they might be a lot simpler that that). The breadcrumbs term comes from the fairy tale “Hansel and Gretel.”

CASCADING STYLE SHEETS

Also referred to simply as CSS, Cascading Style Sheets are used to define the look and feel of a web site outside of the actual HTML file(s) of the site. In recent years, CSS has replaced tables and other HTML-based methods for formatting and laying out websites. The benefits to using CSS are many, but some of the most important are the simplification of a site’s HTML files (which can actually increase search engine rankings) and the ability to completely change the style of a site by changing just one file, without having to make changes to content.

CONTENT MANAGEMENT SYSTEM

Also known as a CMS, the Content Management System is a backend tool for managing a site’s content that separates said content from the design and functionality of the site. Using a CMS generally makes it easier to change the design or function of a site independent of the site’s content. It also (usually) makes it easier for content to be added to the site for people who aren't designers.

DNS

Stands for Domain Name Service (alternately Domain Name System or Domain Name Server). Basically, it’s the thing that converts IP addresses into domain names. DNS servers are provided with the IP address of your web server when you assign your domain name to those servers. In turn, when someone types your domain name into their web browser, those DNS servers translate the domain name to the IP address and point the browser to the correct web server.

FAVICON

Favicons are tiny (generally 16×16 pixels, though some are 32×32 pixels), customizable icons displayed in the web address bar in most browsers next to the web address. They’re either 8-bit or 24-bit in color depth and are saved in either .ico, .gif or .png file formats.

FOLD

The fold is a term carried over from newspaper design and pagination (where the fold referred to the physical fold in the paper). The fold in a website is the point on the webpage that rests at the bottom of someone’s browser (in other words, to see anything below the fold, they would have to scroll down). There are varying opinions on how important the fold is in web design.

FRONT-END

The front-end is basically the opposite of the back-end. It’s all the components of a website that a visitor to the site can see (pages, images, content, etc.) Specifically, it’s the interface that visitors use to access the site’s content. It’s also sometimes referred to as the User Interface.

HTTP

Stands for HyperText Transfer Protocol. HTTP is a set of rules for transferring hypertext requests between a web browser and a web server.

HTTPS

Similar to HTTP, HTTPS stands for HyperText Transfer Protocol over SSL (Secure Socket Layer) or, alternately, HyperText Transfer Protocol Secure. Like HTTP, it’s a set of rules for transferring hypertext requests between browsers and servers, but this time it’s done over a secure, encrypted connection.

HYPERLINK

A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way (text is often underlined or put in a different color or font weight). The inclusion of hyperlinks are the “hyper” part of “hypertext.”

LANDING PAGE

A landing page is the page where a visitor first enters a website. Oftentimes, a special landing page is created to elicit a specific action from the new visitor (usually in connection with an advertising or marketing campaign).

META DATA

Meta data is the data contained in the header that offers information about the web page that a visitor is currently on. The information contained in the meta data isn’t viewable on the web page (except in the source code). Meta data is contained within meta tags.

 META TAG

A meta tag is an HTML tag used to include meta data within the header of your web page.

NAVIGATION

Navigation refers to the system that allows visitors to a website to move around that site. Navigation is most often thought of in terms of menus, but links within pages, breadcrumbs, related links, pagination, and any other links that allow a visitor to move from one page to another are included in navigation.

PAGEVIEW

A pageview is a request for an entire web page document from a server by a visitor’s browser. In other words, for each page view your site had, someone (or a search engine spider) looked at that page.

PERMALINK

Short for “permanent link.” Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post. Since most blogs have constantly-changing content, the permalink offers a way for readers to bookmark or link to specific posts even after those posts have moved off the home page or primary category page.

PLUG-IN

A plug-in is a bit of third party code that extends the capabilities of a website. It’s most often used in conjunction with a CMS or blogging platform. Plug-ins are a way to extend the functionality of a website without having to redo the core coding of the site. Plugins can also refer to bits of third-party software installed within a computer program to increase its functionality.

RESOLUTION

Refers to the physical number of pixels displayed on a screen (such as 1280×1024). Unlike in print, display resolution does not refer to the number of pixels or dots per inch on a computer screen, as this can be changed by changing the resolution of the screen (which, of course, does not change the physical size of the screen). The resolution of an image, however, is often referred to in terms of pixels per inch, though this has very little effect on how the image is displayed on screen.

TAG

A tag is a set of markup characters that are used around an element to indicate its start and end. Tags can also include HTML or other code to specify how that element should look or behave on the page. See also HTML Tag.

TEMPLATE

A template is a file used to create a consistent design across a website. Templates are often used in conjunction with a CMS and contain both structural information about how a site should be set up, but also stylistic information about how the site should look.

URL

Stands for Uniform Resource Locator. A site’s URL is its address, the item that specifies where on the Internet it can the found.

WEB STANDARDS

Standards are specifications recommended by the World Wide Web Consortium for standardizing website design. The main purpose of web standards is to make it easier for both designers and those who create web browsers to make sites that will appear consistent across platforms.