34
Nir Elbaz RWD Basics Based on Google’s Web Fundamentals P M F L I M D P

Responsive Web Design basics by Google

Embed Size (px)

DESCRIPTION

This presentation is entirely based on Google’s great Web Fundamentals website (https://developers.google.com/web/fundamentals/) and simply offers a different presentation of the data in it

Citation preview

Page 1: Responsive Web Design basics by Google

Nir Elbaz

RWD BasicsBased on Google’s Web Fundamentals

P M F L I M D P

Page 2: Responsive Web Design basics by Google

Nir Elbaz

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

different presentation of the data in it

Page 3: Responsive Web Design basics by Google

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?

Page 8: Responsive Web Design basics by Google

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

Page 9: Responsive Web Design basics by Google

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.

Page 11: Responsive Web Design basics by Google

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.

Page 15: Responsive Web Design basics by Google

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.

Page 17: Responsive Web Design basics by Google

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

Page 18: Responsive Web Design basics by Google

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.

Page 19: Responsive Web Design basics by Google

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

Page 20: Responsive Web Design basics by Google

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.

Page 23: Responsive Web Design basics by Google

Nir ElbazMonetization

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

Page 26: Responsive Web Design basics by Google

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.

Page 27: Responsive Web Design basics by Google

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

Page 29: Responsive Web Design basics by Google

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

Page 31: Responsive Web Design basics by Google

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.

Page 32: Responsive Web Design basics by Google

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

Page 34: Responsive Web Design basics by Google

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