Loading presentation...

Present Remotely

Send the link below via email or IM


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.


Responsive Design

a little sharing about responsive web design

jivan shr

on 21 August 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Design

Responsive Web Design(part 01)
Basic workflow for Responsive
1. Fluid Grid System

2. Flexible images or adaptive images, videos etc.

3. Rest of the stuff done with media queries
Fluid Grid System

12 grid system
.sfCol_01 = 1 column = 8.33%
.sfCol_02 = 2 column = 16.66%
.sfCol_12 = 12 column = 100%

[class*="sfCol_"] {
box-sizing: border-box;
padding-left: 20px; /* fixed gutter space*/
float:left; /* align multiple columns */
<meta name=”viewport” content=”width=device-width”>

Responsive Videos
.sfIframeHolder {
padding-bottom: 75%; /*4:3 ratio */
position: relative;

.sfIframeHolder iframe,
.sfIframeHolder object,
.sfIframeHolder embed {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
Media queries
@media screen and (max-width: 1024px) {
/*iPad and other tablets landscape view*/
@media screen and (max-width:800px) {
/* most of tablets portrait view */
@media screen and (max-width:768px) {
/* iPad*/

@media screen and (max-width:600px) {
/* tablet portrait*/

@media screen and (max-width:480px) {
/* iPhone Landscape*/

@media screen and (max-width : 320px) {
/* iPhone portrait*/

Retina Display
For retina ready devices, we have to make double sized images to display properly there and use script like http://retinajs.com

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* styles */
Q. why Grid systems are not Flexible?

Q. what if i want to show middle content on top of mobile?

Q. what would be better to do with our 1000px width website in 24" monitor?

Q. Which to choose mobile version or responsive site?

Q. How can I test that my website is fully responsive?

the hottest web topic of 2013
Responsive Elements
img { max-width:100%;}
How it works: it extends upto
it parent width but not greater
than its own original width


Few useful Links
Full transcript