Responsive Web Design basics by Google

Nir Elbaz

RWD BasicsBased on Google’s Web Fundamentals

P M F L I M D P

Nir Elbaz

This presentation is entirely based on Google’s greatWeb Fundamentals website and simply offers a

different presentation of the data in it

Nir ElbazPrinciples of Site Design

Google and AnswerLab undertookan intensive research study examininghow a range of users interacted with

a diverse set of mobile sites.The goal, to answer the question:

what makes a good mobile site?

Nir ElbazPrinciples of Site Design

Home page and site navigationA desktop homepage often serves many purposes, but the mobile homepage should focus on connecting users to the content they’re looking for.

➔ Keep calls to action front and center

➔ Keep menus short and sweet

➔ Make it easy to get back to the home page

➔ Don't let promotions steal the show

Nir ElbazPrinciples of Site Design

Site searchSite search is vital for helping mobile users find what they’re looking forin a hurry.

➔ Make site search visible

➔ Ensure site search results are relevant

➔ Implement filters to narrow results

➔ Guide users to better site search results

Nir ElbazPrinciples of Site Design

Commerce and conversionThe customer journey is getting more complex, and users expect to convert on their own terms.

➔ Let users explore before they commit

➔ Let users purchase as a guest

➔ Use existing information to maximize convenience

➔ Use click-to-call buttons for complex tasks

➔ Make it easy to finish on another device

Nir ElbazPrinciples of Site Design

Form entryWhether it’s making a purchase, getting a quote or joining an email list, your user’s conversion experience should be as seamless as possible.

➔ Streamline information entry

➔ Choose the simplest input method

➔ Provide visual calendar for date selection

➔ Minimize form errors with labeling and real-time validation

➔ Design efficient forms

Nir Elbaz

Usability & form factorMobile users will notice and be delighted by the small things you do for them to enhance their experience.

➔ Optimize your entire site for mobile

➔ Don't make users pinch-to-zoom

➔ Make product images expandable

➔ Tell users which orientation works best

➔ Keep your user in a single browser window

➔ Be clear why you need a user's location

Principles of Site Design

➔ Avoid 'full site' labeling

Nir ElbazMulti-Device Layouts

Start here to learn thefundamentals of responsive design.

We've taken a show-and-code approach:showing how design principles look to your

users and how to code them.

Nir Elbaz

Home Page and Navigation PrinciplesA desktop homepage often serves many purposes all in one, but the mobile homepage should focus on connecting users to the content they’re looking

➔ Tell users which orientation works best

➔ Avoid 'full site' labels

➔ Keep Calls To Action Front and Center

➔ Keep Menus Short and Sweet

➔ Make It Easy To Get To The Home Page

Multi-Device Layouts

for.

Nir Elbaz

Home Page and Navigation PrinciplesA desktop homepage often serves many purposes all in one, but the mobile homepage should focus on connecting users to the content they’re looking

➔ Don't let promotions steal the show

➔ Keep users in a single browser window

Multi-Device Layouts

for.

Nir Elbaz

Responsive Web Design BasicsMuch of the web isn't optimized for those multi-device experiences.Learn the fundamentals to get your site working on mobile, desktop or anything else with a screen.

➔ Set the viewport

➔ Size content to the viewport

➔ Use CSS media queries for responsiveness

➔ How to choose breakpoints

Multi-Device Layouts

Nir Elbaz

Responsive Web Design PatternsResponsive Web Design patterns are quickly evolving, but there are a handful of established patterns that work well across the desktop and mobile devices

➔ Mostly fluid

➔ Column Drop

➔ Layout shifter

➔ Tiny tweaks

➔ Off canvas

Multi-Device Layouts

Nir Elbaz

Navigation and Action PatternsLearn how to integrate navigation patterns into your site and get users to complete the actions you want them to.

➔ App Bar

➔ Tab Bar

➔ Navigation Drawer

➔ Bottom Bar

Multi-Device Layouts

Nir ElbazForms and User Input

Learn how to create compelling experiences that users will love to use.

Create forms users can fill-out on any device. Make it easy, not painful,

for users to engage with touch.

Nir ElbazForms and User Input

Create Amazing FormsForms are hard to fill out on mobile.The best forms are the ones with the fewest inputs.

➔ Design efficient forms

➔ Choose the best input type

➔ Label and name inputs properly

➔ Provide real-time validation

➔ Simplify checkout with requestAutocomplete API

Nir ElbazForms and User Input

Add Touch to Your SiteTouchscreens are available on more and more devices, from phones up to desktop screens. Your app should respond to their touch in intuitive and beautiful ways.

➔ Stateful Elements Respond to Touch

➔ Implement Custom Gestures

Nir ElbazLook And Feel

How your project looks and feels matters to your users. Learn how to choose the

right animations, colors, and typefaces to match your site or app's branding and personality.

Nir ElbazLook And Feel

AnimationsGet a better understanding of animations and their use in modern appsand sites.

➔ CSS vs. JavaScript Animations

➔ The Basics of Easing

➔ Custom Easing

➔ Choosing the Right Easing

➔ Animating Between Views

➔ Animating Modal Views

➔ Asymmetric Animation Timing

➔ Animations and Performance

Nir ElbazImages, Video and Audio

Images, video, and audio engage users,but they also drive users away when they

don't fit, don't load, or the page renders slowly.

Nir Elbaz

ImagesA picture is worth 1000 words, and images play an integral part of every page. But they also often account for most of the downloaded bytes.With Responsive Web Design, not only can our layouts change based on device characteristics, but images as well.

➔ Images in Markup

➔ Images in CSS

➔ Use SVG for icons

➔ Optimize images for performance

Images, Video and Audio

➔ Avoid images completely

Nir Elbaz

VideoLearn about the simplest ways to add video to your site and ensure users get the best possible experience on any device.

➔ Add a video

➔ Provide alternatives for legacy platforms

➔ Size videos correctly

➔ Customize the video player

➔ Accessibility matters

➔ Quick Reference

Images, Video and Audio

Nir ElbazMonetization

Learn how to maximize your revenue on any device. Improve user experience and get paid.

Nir ElbazMonetization

Key PrinciplesThe customer journey is getting more complex, and users expect to convert on their own terms. Put your users in control.

➔ Let users explore before they commit

➔ Let users purchase as a guest

➔ Make it easy to finish on another device

➔ Use existing information to maximize convenience

Nir ElbazMonetization

AdsServing advertisements provides a way for web developers to make their content and site free while still earning money. Learn how ads work and how to serve responsive ads on your site.

➔ How ads work

➔ Include AdSense ads on your site

➔ Customize your ads

➔ Optimize your ads

Nir ElbazDevice Access & Integration

There are a surprising number of ways to integrate with and access features on the user's device, from geolocation and device

orientation, accessing the communication stack such as the dialer and SMS, to making apps

sticky on the home screen. Learn how to take advantage of features that your users will love.

Nir ElbazDevice Access & Integration

Add To Home ScreenAlmost all of the major browser vendors allow users to pin or install your web app. So-called “stickiness” is a common argument for native apps but can be achieved with just a few tweaks to your markup.

➔ Hide the Browser UI

➔ Specify an Icon

➔ Use a Custom Title

➔ Additional Customizations

➔ Detect When Launched From The Home Screen

➔ Putting It All Together

Nir ElbazDevice Access & Integration

User LocationMost browsers and devices have access to the user's geolocation.Learn how to work with the user's location in your site and apps.

➔ Obtain the user's current location

➔ Monitor the user's location

➔ Getting the user to consent to location sharing

Nir ElbazDevice Access & Integration

Click to CallOn devices with phone capabilities, make it easy for users to directly connect with you by simply tapping a phone number, more commonly known as -click to call.

➔ Click to call

Nir ElbazDevice Access & Integration

Device OrientationDevice motion and orientation events provide access to the built in accelerometer, gyroscope and compass in mobile devices.

➔ Device orientation

➔ Device motion

Nir ElbazPerformance

Performance is a feature. Deliver your content to users as quickly as possible. Once they're in your app, make page interaction and rendering

as smooth as possible.

Nir ElbazPerformance

Critical Rendering PathOptimizing the critical rendering path by prioritizing the display of content that relates to the primary action the user wants to take on a page.

➔ Constructing the Object Model

➔ Render-tree construction, Layout, and Paint

➔ Render Blocking CSS

➔ Adding Interactivity with JavaScript

➔ Measuring the Critical Rendering Path with Navigation Timing

Nir ElbazPerformance

Critical Rendering PathOptimizing the critical rendering path by prioritizing the display of content that relates to the primary action the user wants to take on a page.

➔ Analyzing Critical Rendering Path Performance

➔ Optimizing the Critical Rendering Path

➔ PageSpeed Rules and Recommendations

Nir ElbazPerformance

Optimizing Content EfficiencyThe amount of data downloaded by each app continues to increase.To deliver great performance we need to optimize delivery of each and every byte!

➔ Eliminating unnecessary downloads

➔ Optimizing encoding and transfer size of text-based assets

➔ Image optimization

➔ Webfont optimization

➔ HTTP caching