What The Heck Is Responsive Web Design?

As a Web developer, we need to think about many devices, screen sizes and orientations. It’s not enough now to build our application or website to target only desktop screens: you need to keep in mind that your visitors will come to your site with their smart phones, their net books, their tablets, their slates and even their living room TV. We need to give them a good experience.

Responsive websites

Respond to their environment

Adaptive(Multiple Fixed Width Layouts)

orResponsive

(Multiple Fluid Grid Layouts)

“Responsive design” is a subset of a larger concept which is called “Adaptive design”. When talking about responsive we refer to the layout only (Ethan Marcotte , fluid grids, flexible images & media queries).

“Adaptive design” on the other hand includes much more than just fluid layout. In practice it means the same thing as progressive enhancement, which means in short, that we aim to deliver the best possible experience to the widest possible audience. Also: “Adaptive design” shouldn’t be mixed with “Adaptive layout” which is a completely different thing.

Finally, “Adaptive layout” means a layout done by combining multiple fixed widths. Right now, I feel that Adaptive layout — when done right and when fixed widths are combined with fluid widths — is one form of responsive design and not just an alternative to it.

Mixed ApproachFixed width for large and medium.

Fluid width for small.

The responsive web design uses mixed approach – that is, it uses fixed widths for large and medium screens and fluid grid layout for small ones.

Why Responsive Web Design?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift

in how we’ll build websites for the decade to come.”

- Jeffrey Veen

Small + Medium + Large

One site for every screen.

When To Use It?Things to Consider

Time & MoneyBrowser Support

PerformanceContent

Website vs. Web App

How?“Stop Thinking in Pages. Start Thinking in Systems.”

- Jeremy Keith

Use Frameworks(save time)

&

Roll Your Own(more control)

Best PracticesContent Check

Start Small (Mobile First)Exit Photoshop, Enter Browser

Make It ModularAlways Be Optimizing

Best practices still emerging!

Frameworks

Respond.js https://github.com/scottjehl/Respond

enquire.js http://wicky.nillia.ms/enquire.js/

Style Tiles http://styletil.es/

Masonry http://masonry.desandro.com/

CSS-Tricks http://css-tricks.com/

Fit Text http://fittextjs.com/

Fit Vids http://fitvidsjs.com/

Useful Stuff

Why responsive Web Design

is good for SEO?

Using responsive design to build a mobile site takes less time than creating a stand-alone mobile site, it’s easier for the client to manage and maintain, and the user has a seamless experience without need for redirection. Whatever the screen size of the user they’ll be served from the same database and same page, meaning that you have one solution to fit all devices.

It’s the best solution for a client, agency, user and the search engines.

Let’s rewind and look at how search engines work, using Google as an example:

The search engine (SE) finds out about a new website, most likely because a third party website links to it.

The SE analyses the site and over a period of time it visits every page and stores information on it.

If the pages are appropriate the SE puts the pages of the site into its index, the collection of databases that store websites and attributes on them.

When a visitor to Google caries out a search the SE returns the website in the results pages, based on how valuable the SE believes the site is for that keyword search.

Google Rewards Responsive Web Design For Mobile

Why responsive design? It saves resources for both your site and Google’s crawlers. For responsive web design pages, any Google bot user agents needs to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site’s contents and keep it appropriately fresh.

Overview of Google's recommendations

Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Google bot can handle both setups appropriately if you follow our recommendations.

Creative Designer

Metatagg SolutionsSr. Web & Graphics Designer

(Rohit Nagvadiya )

Web Designer & Responsive HTML Developer (Yogesh Sorathiya)

&Web Development Team