Summary

We've seen in this chapter that developing a responsive site isn't just about the layout, it's also about usability or user experience. Specifically, we covered how to convert the text from pixels to ems and its benefits, adjusting text sizes on different devices for enhanced legibility, and designing a more ergonomic navigation menu for small screens with links that are large and easily tapped. We also covered changing the position of the navigation on small screens so that it doesn't dominate the top of the page and to make it easier to use. We also learned about adding a link to our repositioned menu, using a link and anchor, and styling them to fit with our design.

Our site is now looking and working really well, but there is yet more we can do to improve it. In the next chapter, we'll be focusing on images—how to ensure they fit within a responsive layout and how to optimize image files for mobile devices.