![\"DataReportal](\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/image1-1024x575.png\")
With this much traffic coming from mobile devices, you would want to make sure that your website is mobile-friendly. You could do this through responsive web design.<\/p>\n\n\n\n
What is responsive web design?<\/h2>\n\n\n\n![\"Responsive](\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Stackable-Responsive-Small.gif\")
Responsive website in action<\/figcaption><\/figure><\/div>\n\n\nResponsive web design is a concept that approaches website design and development in a way that changes a user\u2019s experience on a website according to the user\u2019s viewport, device or platform. The objective of responsive web design is not just to make sure that the design is aesthetically pleasing across all device types, resolutions or orientations. Its objective also includes making sure that the user\u2019s experience is efficient and enjoyable.<\/p>\n\n\n\n
Ethan Marcotte<\/a> discusses that responsive web design is not necessarily one piece of technology. He argues that responsive web design is a mixture of techniques. Responsive web design has three foundational components, namely: fluid grids, media queries, and flexible images.<\/p>\n\n\n\nThinking Responsively<\/h2>\n\n\n\n
It\u2019s easy for beginners in web design to have difficulty understanding what responsive web design really is and more importantly, how to implement it. As a guide, here are some questions that Jason Grigsby formulated in his article<\/a> to help users in designing a responsive website; whether beginner or professional:<\/p>\n\n\n\n- Does it adapt to screen size?<\/li>
- Does it take advantage of device capabilities?<\/li>
- Is it accessible anywhere?<\/li>
- Does it work well?<\/li><\/ul>\n\n\n\n
Responsive Design Considerations<\/h3>\n\n\n\nFluid grids<\/h4>\n\n\n\n
Make your website adapt to a device\u2019s screen size by using fluid grids. Fluid grids work in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another. <\/p>\n\n\n\n
The most common resolutions for designing responsive websites are 1920\u00d71080, 1366\u00d7768, and 360\u00d7640. When your website is being viewed from a viewport that\u2019s too narrow, the design can start to severely break down. This is where media queries come in. <\/p>\n\n\n\n
Media queries<\/h4>\n\n\n\n
Media queries are conditional CSS properties. Through media queries, you are able to set CSS rules that will be executed depending on whether the conditions you have set (e.g. viewport width, orientation) are being met. <\/p>\n\n\n\n
For example, you can hide a section from your website when viewing from a mobile device. This is how that media query would look like:<\/p>\n\n\n\n
@media screen and (width: 300px) {\n.section {\nDisplay:none;\n}\n}<\/code><\/pre>\n\n\n\n.section-reviews is what you call a CSS class. This media query dictates that when viewing from a screen that has a minimum width of 300 pixels, it will not display this section by calling the CSS class out and setting the CSS rule Display to \u201cnone\u201d.<\/p>\n\n\n\n
Learn more about media queries on W3School’s comprehensive discussion<\/a> on it!<\/p>\n\n\n\nDevice Capabilities<\/h4>\n\n\n\n
Take into consideration what the different capabilities of a device are when designing your website. Touch screens come with different design guidelines than cursor-based interaction. <\/p>\n\n\n
\n![\"Button](\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Button-hover.gif\")
Button hover in action<\/figcaption><\/figure><\/div>\n\n\nFor example, link hovers won\u2019t work with touch screens since there is no cursor that could navigate around the website. It\u2019s a great design feature for desktop viewing. However, it might become difficult for website visitors to tell apart links from plain text if there are no added design considerations for those viewing from a mobile device.<\/p>\n\n\n\n
Responsive web design is a concept that approaches website design and development in a way that changes a user\u2019s experience on a website according to the user\u2019s viewport, device or platform. The objective of responsive web design is not just to make sure that the design is aesthetically pleasing across all device types, resolutions or orientations. Its objective also includes making sure that the user\u2019s experience is efficient and enjoyable.<\/p>\n\n\n\n
Ethan Marcotte<\/a> discusses that responsive web design is not necessarily one piece of technology. He argues that responsive web design is a mixture of techniques. Responsive web design has three foundational components, namely: fluid grids, media queries, and flexible images.<\/p>\n\n\n\n It\u2019s easy for beginners in web design to have difficulty understanding what responsive web design really is and more importantly, how to implement it. As a guide, here are some questions that Jason Grigsby formulated in his article<\/a> to help users in designing a responsive website; whether beginner or professional:<\/p>\n\n\n\n Make your website adapt to a device\u2019s screen size by using fluid grids. Fluid grids work in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another. <\/p>\n\n\n\n The most common resolutions for designing responsive websites are 1920\u00d71080, 1366\u00d7768, and 360\u00d7640. When your website is being viewed from a viewport that\u2019s too narrow, the design can start to severely break down. This is where media queries come in. <\/p>\n\n\n\n Media queries are conditional CSS properties. Through media queries, you are able to set CSS rules that will be executed depending on whether the conditions you have set (e.g. viewport width, orientation) are being met. <\/p>\n\n\n\n For example, you can hide a section from your website when viewing from a mobile device. This is how that media query would look like:<\/p>\n\n\n\n .section-reviews is what you call a CSS class. This media query dictates that when viewing from a screen that has a minimum width of 300 pixels, it will not display this section by calling the CSS class out and setting the CSS rule Display to \u201cnone\u201d.<\/p>\n\n\n\n Learn more about media queries on W3School’s comprehensive discussion<\/a> on it!<\/p>\n\n\n\n Take into consideration what the different capabilities of a device are when designing your website. Touch screens come with different design guidelines than cursor-based interaction. <\/p>\n\n\n For example, link hovers won\u2019t work with touch screens since there is no cursor that could navigate around the website. It\u2019s a great design feature for desktop viewing. However, it might become difficult for website visitors to tell apart links from plain text if there are no added design considerations for those viewing from a mobile device.<\/p>\n\n\n\nThinking Responsively<\/h2>\n\n\n\n
Responsive Design Considerations<\/h3>\n\n\n\n
Fluid grids<\/h4>\n\n\n\n
Media queries<\/h4>\n\n\n\n
@media screen and (width: 300px) {\n.section {\nDisplay:none;\n}\n}<\/code><\/pre>\n\n\n\nDevice Capabilities<\/h4>\n\n\n\n
![\"Responsive](\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Gutenberg-Responsive-1.gif\")
![\"Live](\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Stackable-Editor-Responsive.gif\")
![\"Show\/Hide](\"https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Stackable-Show-Hide.gif\")