Table of Contents for
Responsive Web Design with HTML5 and CSS3 Essentials

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Responsive Web Design with HTML5 and CSS3 Essentials by Asoj Talesra Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. Responsive Web Design with HTML5 and CSS3 Essentials
  4. Responsive Web Design with HTML5 and CSS3 Essentials
  5. Credits
  6. About the Authors
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. Introducing Responsive Web Design
  16. Exploring how RWD works
  17. Understanding the elements of RWD
  18. Appreciating the importance of RWD
  19. Comparing RWD to adaptive design
  20. Preparing our development environment
  21. Considering a suitable strategy
  22. Exploring best practices
  23. Setting up a development workflow
  24. Exploring mistakes
  25. Summary
  26. 2. Creating Fluid Layouts
  27. Understanding the different layout types
  28. Setting the available viewport for use
  29. Exploring the benefits of flexible grid layouts
  30. Understanding the mechanics of grid layouts
  31. Implementing a prebuilt grid layout
  32. Exploring the use of flexbox
  33. Visiting the future
  34. Taking it further
  35. Summary
  36. 3. Adding Responsive Media
  37. Making video responsive
  38. Making text fit on screen
  39. Summary
  40. 4. Exploring Media Queries
  41. Understanding media queries
  42. Identifying common breakpoints
  43. Putting our theory into practice
  44. Creating some practical examples
  45. Examining some common mistakes
  46. Exploring best practices
  47. Taking things further
  48. Summary
  49. 5. Testing and Optimizing for Performance
  50. Understanding why pages load slowly
  51. Optimizing the performance
  52. Testing the performance of our site
  53. Best practices
  54. Providing support for older browsers
  55. Considering cross-browser compatibility
  56. Testing site compatibility
  57. Following best practices
  58. Summary

Exploring mistakes

With the best will in the world, we are only human; there will be times when we make a mistake! As the playwright Oscar Wilde once said, "...to err once is human, to err twice is careless." Well, in the hope that we don't go that far, there are some common errors that are regularly made when working responsively; let's take a look at the top five candidates:

  • Failing to allow for touch input: It might seem odd, but failing to allow for touch is surprisingly common! Some users expect a site to simply work, and to have a consistent approach across the board both for desktops and mobiles. This will include any mechanism for activating links (such as buttons). What might work on a desktop client will very likely fail on a mobile device. It is absolutely key that we include something to allow mobile users to navigate around a site using touch. This can be achieved (in the main) with CSS3 styling, so there is no excuse!
  • Insisting on a consistent navigation: A part of creating a successful site will be to have some form of navigation that retains a consistent look and feel across all pages; it does not mean to say that we have to carry this over to mobile devices though! Navigation on a mobile device will of course act differently; we have the added extra of touch input to cater for, as part of our design. At an absolute minimum, links and buttons, along with our choice of typeface and colors should remain consistent; the size of buttons, our visual layout, and how we click on buttons can change.
  • Building in links to non-mobile friendly content: How many times have you accessed content via a mobile device, only to find it is a huge image or substantial document that has to be downloaded? I'll bet that this irked you. Make sure your content is suitable for downloading on different devices. On a broadband connection for a desktop, we might think nothing of using 100Kb images; try loading these over a 3G connection, and it is easy to see why we need to reconsider what we've previously used on standard broadband connections.
  • Ignoring performance: In an age of modern broadband connections, it is easy to be complacent about what is made available for download. If we think desktop first, then we will be building ourselves a real problem when it comes to designing our mobile site! We can't compress a desktop environment into a mobile experience—it won't be efficient, will offer poor user experience, and ultimately lead to a drop in conversions in sales. To avoid issues with performance, we should aim to use a minimalistic or mobile-first approach, as the basis for our site designs.
  • Testing: A common error to make is not sufficiently testing our solutions on multiple devices, running them prior to release will uncover any UX issues that need to be resolved before making our solution available for general use. A sticking point is likely to be the question of how many devices we test for. If we have access to analytics for an existing desktop version of the site, then this should give us a starting point we can use to double check our design is working as expected. Failing this, we can make use of device emulators in browsers to run some basic checks. We can also use online testing services, such as MobileTest.me (http://mobiletest.me), to ensure our design is working sufficiently to release for wider use.

These common issues can easily be solved with some simple changes to our development workflow process, building at least some of these steps to avoid the grief we may get from these errors, early on, will save a lot of heartache later during development!