Learn Responsive Design in 3 Easy Steps

1
Learn Responsive Design in 3 Easy Steps
Best Free Tutorial on Responsive Design
2
Learn Responsive Web Design Online

• Before few days back, one of my friend asked
  me that how to build responsive layout and i just
  replied him that my blog is responsive.
• Even I have worked with many websites
  responsive layout, you can have a look into
  devices and.
• You can see css into it to develop responsive
  layout.

3
Learn Responsive Web Design Online

• Still My friend was confused and not got much
• idea how to develop responsive layout.
• So today I am going to explain steps to how
  you the basics of responsive design for any
  website work with device orientations which
  detect the type of device and change the sites
  behavior accordingly.

4
Learn Responsive Web Design Online
5
Learn Responsive Web Design Online

• So, Lets go through the steps
• Step 1 Include the Viewport
• First of all, add below meta tag into your
• lt headgt tag.
• This is a most important meta viewport tag to set
  the correct scale of a website in devices.If its
  not added, responsive layout may suffer

6
Learn Responsive Web Design Online

• from some issues like fonts not matches with
  design.
• Step 2 Add Media Screen
• Next, Add css link with mediascreen into
  lthead gt tag which is shown in below code
• Its used to allow part of CSS rules to the

7
Learn Responsive Web Design Online

• specific configuration.
• Step 3 Media Queries
• CSS3 media query is play main role for responsive
  design. CSS3 media queries are one kind of
  conditions to figure out what resolution of
  device orientation its being served on browser.

8
Learn Responsive Web Design Onlines

• So Here, I am going to explain most used media
  queries are
• 320px iPhone Portrait
• 480px -iPhone Landscape
• 768px Ipad Portrait
• 1024px Ipad Landscape
• 1200px Normal views

9
Learn Responsive Web Design Online

• Lets see Breakpoints we need to put for most
  used media queries.
• / Media Queries for iPhone Portrait /
• _at_media only screen and (max-width479px)
• / Media Queries for iPhone Landscap CSS /
• _at_media only screen and (min-width 480px) and
  (max-width 767px)

10
Learn Responsive Web Design Online

• / Media Queries for iPad Portrait /
• _at_media only screen and (min-width 768px) and
  (max-width 799px)
• /Media Queries for Normal /
• _at_media only screen and (min-width 1024px) and
  (max-width 1200px)

11
Learn Responsive Web Design Online

• Here, I have explained basics about
  responsive layout but You can write as many media
  query as you like.
• I hope this post was useful it has helped
  you to create responsive design for your website.
• Thanks for reading and feel free to share your
  thoughts with us at CreativeDev!

12
Learn Responsive Web Design Online

• Thank You!!!

info_at_creativedev.in