responsive web design basics by google
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 itTRANSCRIPT
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