Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Responsive Web Designing

walks you through the basics.
by

Arun Vasisht

on 13 December 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Web Designing

Responsive Web Design
Responsive
Web Design
an introduction
Arun Vasisht
Anirudh Sharma
Why you are here
1. To know, what is Responsive Web Design?
2. To understand, why is it needed?
3. To learn some industry best practices.
4. To be Web 2.0 ready!

What is Responsive Web Design?
Responsive web design, a technique that allows us to create flexible web page layouts that change depending on the screen size of the site visitor, allows us to optimize user experiences for the increasingly variable ways people are accessing the Web.
Why is it needed?
Industry Best Practices
Questions?
Responsive UI Frameworks
One Web, Many Devices!
How to serve the same content to
multiple devices without
affecting user experience?
Stats don't lie!
Benefits galore!
How is it achieved?
CSS3 Media Queries
but before that...
Has the internet changed?
How has the internet changed?

Thank You!

What are CSS3 Media Queries
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.
Full transcript