Responsive website design for beginners
11
Responsive Website Design For Beginners By: Tyler Horvath What it is… Why you need it…. And how to implement it.
-
Upload
tyler-horvath -
Category
Internet
-
view
40 -
download
1
Transcript of Responsive website design for beginners
Responsive Website Design For Beginners
By: Tyler Horvath
What it is… Why you need it…. And how to implement it.
IntroductionsWho we are and what we do
Tyler Horvath
tytonmedia.com
CEO
What is Responsive Web Design?
• Web Design approach to allow website to work on any device (mobile, tablet, TV, desktop, etc)
• Uses HTML, fluid layouts and CSS3 media queries to change the layout based on the users device.
Why Do You Need Responsive Design?
62% of companies that designed a website specifically for mobile had
increased sales. (Source: Econsultancy)
• Good for SEO
• Visitors from Mobile
• More conversions
• Better Engagement
Making Your Website Responsive
Fluid Layouts Media QueriesResponsive Images
1 2 3
Fluid Layouts
• From fixed to fluid
• Widths are percentages
• Fluid layouts are the base
• Work with CSS media queries
Responsive ImagesAdaptive Images• Most widely used• Gives images a 100% width to adapt to container• Not 100% full proof
HISRC• Newer method• Uses JavaScript (jQuery)• Shows based on users internet speed
Media QueriesCSS based rules for device-specific user experiences
• Each device has specific rules for hiding and showing specific content
• Min and Max device width with custom rules
Putting It All Together
Fluid Layouts + Media Queries =Responsive Images +
