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

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

2. This presentation is entirely based on Google’s great
Nir Elbaz
Web Fundamentals website and simply offers a
different presentation of the data in it

3. Google and AnswerLab undertook
an intensive research study examining
how 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 Elbaz Principles of Site Design

4. Home page and site navigation
A 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 Elbaz Principles of Site Design

5. Site search
Site search is vital for helping mobile users find what they’re looking for
in 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 Elbaz Principles of Site Design

6. Commerce and conversion
The 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 Elbaz Principles of Site Design

7. Form entry
Whether 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 Principles of Site Design

8. Usability & form factor
Mobile users will notice and be delighted by the small things you do for them to
enhance their experience.
Nir Elbaz
➔ 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

9. Start here to learn the
fundamentals 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 Multi-Device Layouts

10. Home Page and Navigation Principles
A desktop homepage often serves many purposes all in one, but the mobile
homepage should focus on connecting users to the content they’re looking
Nir Elbaz
➔ 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.

11. Home Page and Navigation Principles
A desktop homepage often serves many purposes all in one, but the mobile
homepage should focus on connecting users to the content they’re looking
Nir Elbaz
➔ Don't let promotions steal the show
➔ Keep users in a single browser window
Multi-Device Layouts
for.

12. Responsive Web Design Basics
Much 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.
Nir Elbaz
➔ Set the viewport
➔ Size content to the viewport
➔ Use CSS media queries for responsiveness
➔ How to choose breakpoints
Multi-Device Layouts

13. Responsive Web Design Patterns
Responsive Web Design patterns are quickly evolving, but there are a handful of
established patterns that work well across the desktop and mobile devices
Nir Elbaz
➔ Mostly fluid
➔ Column Drop
➔ Layout shifter
➔ Tiny tweaks
➔ Off canvas
Multi-Device Layouts

14. Navigation and Action Patterns
Learn how to integrate navigation patterns into your site and get users to
complete the actions you want them to.
Nir Elbaz
➔ App Bar
➔ Tab Bar
➔ Navigation Drawer
➔ Bottom Bar
Multi-Device Layouts

15. 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 Elbaz Forms and User Input

16. Create Amazing Forms
Forms 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 Elbaz Forms and User Input

17. Add Touch to Your Site
Touchscreens 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 Elbaz Forms and User Input

18. 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 Elbaz Look And Feel

19. Animations
Get a better understanding of animations and their use in modern apps
and 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 Elbaz Look And Feel

20. 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 Images, Video and Audio

21. Images
A 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.
Nir Elbaz
➔ Images in Markup
➔ Images in CSS
➔ Use SVG for icons
➔ Optimize images for performance
Images, Video and Audio
➔ Avoid images completely

22. Video
Learn about the simplest ways to add video to your site and ensure users get
the best possible experience on any device.
Nir Elbaz
➔ Add a video
➔ Provide alternatives for legacy platforms
➔ Size videos correctly
➔ Customize the video player
➔ Accessibility matters
➔ Quick Reference
Images, Video and Audio

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

24. Key Principles
The 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 Elbaz Monetization

25. Ads
Serving 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 Elbaz Monetization

26. 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 Elbaz Device Access & Integration

27. Add To Home Screen
Almost 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.
➔ Putting It All Together
➔ Hide the Browser UI
➔ Specify an Icon
➔ Use a Custom Title
➔ Additional Customizations
➔ Detect When Launched From The Home Screen
Nir Elbaz Device Access & Integration

28. User Location
Most 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 Elbaz Device Access & Integration

29. Click to Call
On 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 Elbaz Device Access & Integration

30. Device Orientation
Device motion and orientation events provide access to the built in
accelerometer, gyroscope and compass in mobile devices.
➔ Device orientation
➔ Device motion
Nir Elbaz Device Access & Integration

31. 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 Elbaz Performance

32. Critical Rendering Path
Optimizing 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 Elbaz Performance

33. Critical Rendering Path
Optimizing 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 Elbaz Performance

34. Optimizing Content Efficiency
The 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
Nir Elbaz Performance