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 +

Wrapping Up

tytonmedia.com