TLDR: Get to grips with the future of web design – Responsive Web Design. Understand the importance of designing for various screen sizes, appreciate the key concepts of design, explore media queries, build a responsive frame, understand the layout of responsive content, and how to install and use Masonry for dynamic page reorganization.
Introduction
Responsive Web Design (RWD) is undoubtedly leading the future of web design. As designers, it’s crucial for us to adapt and embrace this wave. But, we understand the challenges it can pose, especially when developing designs that reorient based on the viewing medium. Let’s demystify the complexities of RWD together.
Understanding Screen Sizes
When designing responsively, we must accommodate all screen sizes. Classic PC monitors, modern ones, laptop monitors, smartphones, tablets, and android tablets all have different dimensions. We must consider everything from the smallest smartphone size (320 x 480) to the largest modern PC monitor size (1920 x 1080), and even plan for resizable windows.
Design Concepts
Start by designing for the smallest size, the mobile site at 320 px width. For index pages, prioritize image placement; make them clickable and lead to other pages. Consider implementing a masonry layout that comprises stacked vertical blocks and could potentially eliminate the need for a sidebar. For navigation, use topnav for top-level navigation and sidebars for more in-depth content access.
Menus
Aim for a balance of readability, usability, and accessibility in your menu design. Avoid drop-down menus in responsive themes as they can hide content. Instead, include secondary links in the content or place them in the sidebar.
Images, Videos, and Media Queries
Use CSS for responsive images and JavaScript for responsive videos. Your design also depends on CSS media queries, conditional statements that direct the browser to use certain styles depending on its behavior. Remember to use the meta tag in your header.php file to check for device width.
- Targeting Different Screen Sizes
The most common use of media queries is to design for different screen sizes. The following example targets devices with screen widths up to 600px (typically smartphones):
cssCopy code@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
In this example, if the screen size is 600px or less, the background color will be light blue.
- Landscape and Portrait Orientations
You can also use media queries to target devices based on their orientation (landscape or portrait). The following example targets devices in landscape orientation:
cssCopy code@media only screen and (orientation: landscape) {
body {
background-color: lightgreen;
}
}
In this case, if the device is in landscape orientation, the background color will be light green.
- High Resolution Displays
Media queries can also target devices with high-resolution or retina displays. The following example targets devices with a minimum resolution of 2dppx:
cssCopy code@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
/* Styles for high resolution displays */
}
In this case, the styles inside the media query will apply to devices with high-resolution displays.
- Multiple Conditions
Media queries can also combine multiple conditions using logical operators like and. For example, you can target tablets with the following media query:
cssCopy code@media only screen and (min-width: 600px) and (max-width: 800px) {
body {
background-color: lavender;
}
}
Here, if the screen size is between 600px and 800px, which is typically the size of a tablet, the background color will be lavender.
Remember, media queries are a powerful tool in responsive design, allowing you to create a user interface that adapts to the device’s capabilities and provides a better user experience.
Building a Responsive Frame
Use max-width instead of width (fixed) on the wrapper and define pre-defined step regions with media queries. This is where you tweak styles like margins and font sizes for smaller browser windows.
Crafting a Responsive Header
A header typically contains a title, tagline, topnav, and image. Use percentages while developing and apply media queries once the header gets condensed.
Creating Responsive Menus
For smaller screens, enlarge buttons for feasible navigation. Change text links to buttons or orient them differently.
Responsive Content Layout
Ensure your text is readable, use floating for clean content layout, and make images and videos responsive. For embeds, use the fitVids.js library.
Working With Sidebars
Maintain sidebar at a fixed width until its width approaches the width of the main content. At that point, move the sidebar below the content or remove it entirely.
Footer
The footer is a great place to add extra site info and relevant content links. Always add a return-to-top link.
Featured Content Sliders
Use plugins like Flexslider to handle the responsiveness of sliders. Customizations can be made inside the function if needed.
Masonry Web Design
Masonry is a jQuery plugin that allows dynamic reorganization of content on the page. To install, download masonry.js, add it to your website’s js folder, and enqueue it to your site.
Conclusion
Responsive Web Design is not just a trend; it’s an essential approach to ensure optimal user experience on various devices. As designers, it’s up to us to embrace this wave and learn to develop adaptable designs that accommodate a wide range of screen sizes. With these insights and tips, you’re well on your way to mastering the art of RWD. Happy designing!