Your SlideShare is downloading. ×
0
Secrets of Responsive WebDesignFormula for Fluid/ Responsive Layout              by Sameera Thilakasiri | www.sameerast.co...
It can be any device.                                                                   Picture from internet             ...
Introduction• Still developing websites for the standard screen resolution  (1024x768)? Stop that! It makes you look fooli...
Its called responsive design                                                                   Picture from internet      ...
How to create a flexible grid• Using a flexible, forget style fixed width and centered on the  content. This means that al...
Pixel to EM• The same formula works for fonts. We stop using pixel sizes  based on the time we use em or percentages.14 pi...
Fluid images• Using images of fluids causes the block size setting father. The  main idea is to use unobvious properties {...
Flexible images• A better solution is to use context-aware image sizing. This  technique basically consists of having diff...
Should know about Media Queries• Media inquiries are necessary in order to show the optimized  layout for the very resolut...
Widespread pixel width• The most widespread pixel widths are:  320px(iPhone portrait, default),  480px (iPhone landscape),...
How does it look in practice?• The first step we should do is to include a meta tag "viewport"  into <head> to tell the br...
jQuery is your friend• jQuery is definitely a super useful tool when it comes to web  development. Lots of jQuery plugins ...
Thank youby Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   13
AuthorSameera Thilakasiri is a website designer based in Colombo. Specialist in UI,UX, SEO, IA, IxD, RWD. He is blogging t...
Upcoming SlideShare
Loading in...5
×

Secrets of responsive web design by Sameera Thilakasiri

865

Published on

How to calculate pixel in percentage for responsive web design.

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
865
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Secrets of responsive web design by Sameera Thilakasiri"

  1. 1. Secrets of Responsive WebDesignFormula for Fluid/ Responsive Layout by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1
  2. 2. It can be any device. Picture from internet by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 2
  3. 3. Introduction• Still developing websites for the standard screen resolution (1024x768)? Stop that! It makes you look foolish in the changing world of the Web.• Responsive Web Design is like a shiny new toy for designers and developers. It is difficult to overestimate the importance of sensible design, as it ensures that any website will look good on different screen resolutions. I think everyone will agree with me that the first thing every designer worth his salt should do is get familiar with web design response. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 3
  4. 4. Its called responsive design Picture from internet by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 4
  5. 5. How to create a flexible grid• Using a flexible, forget style fixed width and centered on the content. This means that all elements of our design is resized in correlation. The basic idea of a fluid grid to use this formula for the calculation of the percentage proportions of design.target / context = result.sidebar { width:31.5%;} by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 5
  6. 6. Pixel to EM• The same formula works for fonts. We stop using pixel sizes based on the time we use em or percentages.14 pixels - the body font size;21 pixels - the H1 font size;21 ⁄ 14 = 1.5Your CSS will look like:h1 { font-size:1.5em;} by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 6
  7. 7. Fluid images• Using images of fluids causes the block size setting father. The main idea is to use unobvious properties {max-width: 100%}. An image with img {max-width: 100%} will never get out of your head unit. If the die block is less than the size of img then the image is reduced proportionally. This principle applies to images, objects and video.• The usage of fluid images causes the adjustment of the size to the parent block. The main idea is in the unobvious usage of the properties of {max-width: 100%}. An image with img {max-width: 100%} will never come out from its parent unit. If the parent block is smaller than the size of img then the image is reduced proportionally. This principle applies to images,objects and video. Inaddition to that {display: block;} is used to avoid parent float issues. Keep in mind media query can be excuted only at latest browsers as it is part of CSS3. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 7
  8. 8. Flexible images• A better solution is to use context-aware image sizing. This technique basically consists of having different sizes of an image, and displaying only the size adapted to the device. Quick example:<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg"alt=""> And the related CSS:@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); }} by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 8
  9. 9. Should know about Media Queries• Media inquiries are necessary in order to show the optimized layout for the very resolution, which at the time was surfed the site. It is a part of the CSS standard, which allows to apply styles based on information about the device resolution.@media screen and (mas-width:980px){ /*styles*/} by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 9
  10. 10. Widespread pixel width• The most widespread pixel widths are: 320px(iPhone portrait, default), 480px (iPhone landscape), 600px, 768px(iPad portrait), 900px, 1024px (iPad landscape).• I strongly recommend to consider all these screen resolutions if you want to make your design a responsive one. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 10
  11. 11. How does it look in practice?• The first step we should do is to include a meta tag "viewport" into <head> to tell the browser that this webpage is optimized for mobile.<meta name="viewport" content="width=device-width, initial-scale=1.0"> by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 11
  12. 12. jQuery is your friend• jQuery is definitely a super useful tool when it comes to web development. Lots of jQuery plugins can help you to create better responsive websites. A quick round up of my personal favorites:• FitText: A plugin that makes font-sizes flexible.• Elastislide: A responsive jQuery carousel plugin.• Supersized: A full screen background slideshow plugin.• FitVids: A lightweight, easy-to-use jQuery plugin for fluid width video embeds. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 12
  13. 13. Thank youby Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 13
  14. 14. AuthorSameera Thilakasiri is a website designer based in Colombo. Specialist in UI,UX, SEO, IA, IxD, RWD. He is blogging technical areas while is leisure. He canbe reached by http://www.sameerast.com by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 14
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×