We thought it would be helpful to review the fundamentals of web design for aspiring web professionals in this article.
Responsive Web design is a Web design approach aimed at crafting sites to provide an optimal viewing experience. This is also aimed for easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices.
What Is Mobile Responsive Design?
When a website is responsive, the layout and/or content responds or adapts based on the size of screen they are presented on. A responsive website automatically changes to fit the device you’re reading it on. Typically there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop or laptop, the tablet and the mobile phone.
Josh Byers 2012 article – A Beginner’s Guide to Mobile Responsive Design – StudioPress has examples given as the screen gets smaller, the content shifts and changes to the best display for each screen. This article also has more detailed information about
- Why Should I Care About Mobile Responsive Design? These days we need to think of mobile first.
- We first need to optimize the layout of the content.
- Next, we need to adapt the content that is shown (and only show content that is really needed).
- It has been amazingly easy to create a mobile responsive website for some time.
Why Responsive Images?
In article Responsive images by MDN Web Docs we can learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them.
It also has a detail overview of
- How do you create responsive images?
- Resolution switching: Different sizes
- Useful developer tools
- Resolution switching: Same size, different resolutions
- Art direction
- Active learning: Implementing your own responsive images
Why Responsive Design?
Use of responsive web design is highly recommended because it
- Makes it easier for users to share and link to your content with a single URL.
- Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
- Requires less engineering time to maintain multiple pages for the same content.
- Reduces the possibility of the common mistakes that affect mobile sites.
- Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience (see Pitfalls when detecting user agents” section for details).
- Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh.
Google provides many more details in this article.
Other Resources which may be helpful
- 2 Indispensable Elements of Excellent Mobile Responsive Design
- Mobile Responsive Design: The Flexible Grid
- How to Make Your Website Respond to Different Mobile Devices
We always try to deliver something new in our Web professional’s world. Also we hope you find these overviews useful and always look forward to your comments and feedback (whether you are a member or not).
If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web. As a member, your first class is free.