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 Design

No description
by

Lusine Artenyan

on 4 March 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Web Design

The query contains two components:

a media type (screen), and
the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).

We use these tests to adapt the layout with more CSS.


WAYS TO USE MEDIA QUERIES
Responsive Design
Small + Medium + Large
One site for every screen.

KEY CONCEPTS
Media queries
Fluid Grids
Flexible images, videos
Example
1. body { background: red; }

@media only screen and (max-width: 320px) {
body { background: orange; }
}

Screens 0 to 320px:
body’s background will be orange instead of red
(overrides the first rule)

Screens Larger than 320px:
body’s background will be red

2. When linking to a CSS file
<link media="only screen and (max-width: 768px)" href="css/tablet.css"rel="stylesheet">

3. Within a CSS file via @import
@import url("css/tablet.css") only screen and (max-width: 768px);
Ethan Marcotte
Author of Responsive Web Design
http://www.abookapart.com/products/responsive-web-design
WHERE CAN WELEARN MORE ?
This Is Responsive
http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/
FRAMWORKS
http://getbootstrap.com/
http://www.getskeleton.com/
FLEXIBLE IMAGES
img {
max-width: 100%;
-ms-interpolation-mode: bicubic; /* for IE7 */
}
Why Responsive Web Design
FLUID GRIDS
http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html
The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
Demo
http://mediaqueri.es/

THINGS TO CONSIDER WHEN
CREATING A RESPONSIVE WEB DESIGN.
Navigation
Columns
Calls to action
Branding
Padding and White
Space
BROWSER SUPPORT
<meta name="viewport" content="width=device-width, user-scalable=no">
https://www.pingdom.com/
http://designmodo.com/
fixed menu
Full transcript