- Responsive Design Principles
- Responsive Design Email Templates
- Mobile Website Responsive Design
- Responsive Design Checker
- Responsive Design Mode
Responsive websites are those crafted to use W3C CSS3 media queries with fluid grids and commonly also fluid images, to adapt the layout to the viewing environment. The idea of responsive web design is to make websites that fit multiple screen sizes. For the designer and developer that means they only have to work on one version of the website instead of designing one for desktop computers. Responsive design best practices. Mobile traffic in 2018 (so far) accounts for 52.2% of all traffic (+1.9% from 2017). By taking a mobile-first approach to responsive design, designers can deliver a progressive experience across all devices and screen sizes, prioritizing mobile as the majority (and growing) medium. Mobile responsive design takes care of this all “on the fly”, and without multiple versions of your site to maintain. How to Easily Create a Mobile Responsive Website All of this may be new to a lot of you, and fairly intimidating since it requires not only a change in code and design, but in your overall web strategy and philosophy. Responsive design. The term responsive design was coined by Ethan Marcotte in 2010 and described the use of three techniques in combination. The first was the idea of fluid grids, something which was already being explored by Gillenwater, and can be read up on in Marcotte's article, Fluid Grids (published in 2009 on A List Apart). What is responsive design? — Simply put, responsive web design (RWD) is an approach that allows design and code to respond to the size of a device’s screen. Meaning it gives you the optimal viewing experience whether you’re looking at a 4 inch android mobile, your iPad mini or a 40-inch cinema display. Compare how our site looks when it.
Mobile revolution that started a decade ago not only changedthe way we interact with products but also changed the way we design products.The first iPhone was a powerful computer that combined three things —phone,music player, and internet browser. The latter had a tremendous impact on theweb industry because designers had to adapt websites for small-size screens.And the situation got more complex whenother hardware manufacturers rushed to adapt toeven more niche mobile devices. As a result, designers who worked on webdesigns had to adapt the website not only for various desktop resolutions butalso for many different mobile devices.
It quickly became evident that creating a separate versionof the site for each resolution and new device was impractical. Design industryneeded a new approach for web design that would be flexible enough to supportvarious types of screens and resolutions. That approachis called responsive design, and it represents a fundamental shift in how we build websites.
In this article, I want to share foundational rules thatwill help you deliver a quality experience, no matter how large or small the display size your users will have.
What is responsive design?
Responsive web design is anapproach that allows design across various devices (mobile, desktop, tablet,etc.) and suggests design should respond to the user’s behavior based on screensize, platform and orientation.
Flexible grids are foundational elements of responsivedesign. All assets such as images adapt to various screen sizes & resolutions (using CSS media queries).As a result, the user has great UX no matter what device they use—whether it’sa large desktop or small screen of mobile device, the website automaticallyswitch to accommodate for resolution.
In 2010, Ethan Marcotte wrote an introductory article about the approach, Responsive Web Design, for A List Apart. Here is a great quote from Ethan: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”
Responsive vs. Adaptive vs. Mobile First
In the world of web design, we have a few terms that describe the process of design optimization for various screens— responsive, adaptive and mobile-first designs. You may wonder what exactly is the difference between all of them?
Responsive and adaptive web design are closely related, butthere are some differences between them. Responsive web design uses CSS mediaqueries to dynamically change the page layout based on the target device suchas display type, width, height, etc. Adaptive design, on the other hand, usesstatic layouts based on breakpoints which don’t respond once they’re loaded. Asyou can see, adaptive design is a less flexible solution for the problem ofdesign optimizations for various screens.
“Mobile-first” is a conceptual term. As the name suggests,mobile-first means that web designers start the product design from the mobilemedium and then design tablet, desktop, and monitors. “Mobile first” way ofthinking for design helps product teams to focus on the most important contentand deliver it to users.
Technical ingredients of responsive web design
It’s hard to understand the nature of responsive designwithout understanding its technical side. Responsive websites have threedefining features: flexible layouts, media queries and flexible media.
Flexible layouts
Flexible layouts are the practice of building the layout of a website with a flexible grid. Flexible grids are created using CSS. Web layout consists of columns that automatically rearrange themselves to fit the size of the screen or browser window.
Media queries
The flexible layout approach alone isn’t enough to optimizethe design for various screens. When the layout gets too small, the layout maybegin to break and create columns that will be too small to display contenteffectively. Media queries come to save the day.
Ethan Marcotte gives media queries the following definition:“A media query allows us to target not only certain device classes, but toactually inspect the physical characteristics of the device rendering ourwork.” Media queries allow web designers to create condition checks to adjustweb designs based on the properties of the user’s device. They also allow web designersto specify different styles for individual browser and device circumstances(i.e. various widths of the viewport or different device orientation).
Flexible images and videos
As viewports begin to change thesize, images, videos, and other media types should be scalable, adjusting theirsize as the size of the viewport changes.
All assets in responsive design are distributed in flexiblecontainers —those containers resize themselves as the user changes the browser window or switches to another device. A simple way to makemedia content scalable is to use the max-width property with a value of 100%.
The nature of responsive design
Some people think that responsive web design is all about fitting design to various screen resolutions. That’s not entirely true. Responsive design represents a whole new way of thinking about design. It’s about creating flexible design solutions. To represent responsive design, Josh Clark, memorably adapted the famous Bruce Lee quote Be Water, My Friend when he coined content is like water.
You put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put water into a teapot, it becomes the teapot.
Bruce Lee, Be Water, My FriendWhat does this mean? If you think of your content as waterand pour it from one device to another – the water remains the same, but theview of the water is changed per device. And you can have more water than adevice can handle, meaning you will need to optimize content per device.Responsive design is based on the idea of “flexible everything”—not only thelayout, but the content itself should be aligned to the medium.
Design recommendations
Now let’s share a few design recommendations for creating responsivedesign:
Grouping screen sizes in categories
Itis possible to group various screen sizes into a few major categories, anddesign for each group. A technique called fluid grids uses media queries min-device-width, max-device-width, and orientation to make web design as flexible as necessary.
Flexible images
In responsive web design, every image is loaded in itsoriginal size, unless the viewing area becomes narrower than the image’soriginal width. Avoid hardcoding the height and width; instead, let the browserresize the images as needed (CSS should adjust images relative size).
Show/hide content and functional elements
It is possible to shrink things proportionally to the screensize so elements will fit well on a smaller screen. Using CSS queries (visibility:hidden),it’s also possible to hide some content on mobile. Remember that mobileexperience should be highly-focused, that’s why it’s recommended to prioritizecontent that delivers maximum value for your users.
The show/hide content is applicable for all content elements, including navigation. One great solution is Priority+ navigation, which exposes the most important options and tucks the remaining options behind some form of “more” link.
Mouse Cursor vs. Touchscreen
Thesize of the interactive elements should be proportional to the input method. Onthe desktop we use mouse, while on touch screen we interact with our fingers. Here are a couple of things to remember whenoptimizing the design for touch:
- Forgetabout on-hover states on the touch screen. Touchscreens cannot displayon-hovers because there is no cursor.
- Increasethe size of interactive elements and introduce more whitespace betweeninteractive options.
Optimize images and video
Responsiveweb design requires optimizing media content:
Responsive Design Principles
- Avoid heavy visual assets. When the image asset is provided in large resolution (more than the size of a viewport) or in a Lossy compression format (i.e., PNG for images), the browser will have to resize the image to fit it to the viewport and the process of loading will take more time because the size of the file. Use Squoosh to compress, resize, and manipulate images. Check the article Front-End Performance Checklist for more information on performance optimization.
- Optimize images for smaller screens. It’s not enough to just change the size of images. On smaller screens, it’s worth cropping some images, so they retain their impact.
- Try to use more SVG than raster graphics. SVGs alter their resolution based on image paths, not pixels, so they remain the same at any size.
Pay attention to typography
Typography is the cornerstone of the design. People visitwebsites for content. That’s why when it comes to responsive web design, it’svital to choose typeface works well on all screens and device resolutions:
- Avoid dummy content. Avoid using “Lorem Ipsum” when designing web layouts. Dummy content isn’t very helpful in finding whether your design is ready for real content or not.
- Use em or rem instead of px. Ethan Marcotte wrote an excellent article on the Adobe Typekit blog explaining why it’s recommended to use em instead of pixels to size your fonts. In short, pixels should be avoided because they have a fixed dimension standard. Em or rem are based on percentage and scalable.
Start with the smallest view first
When you start working on responsive web design, it’s vitalto create a mobile layout first. The mobile-first approach in design isessential because it will help you create a content-first experience.
Design clear visual hierarchy
Visual hierarchies take center stage when you’re working onresponsive design. Depending on the type of content and the value it deliversto visitors, some content is more important and should be viewed first, whileother content is less valuable. The most important content is at the top of thehierarchy.
To make things easier, you can use multi-device layout patterns. Luke Wroblewski, in his article Multi-Device Layout Patterns defined five broad categories of responsive layouts. For the purpose of this article, I will select only four categories:
- Mostly fluid. A multi-column layout introduces largermargins on big screens, relies on fluid grids and images to scale from largescreens down to small screen sizes.
- Column drop. This pattern starts with a multi-columnlayout and ends up with a single column layout, dropping columns along the wayas screen sizes get narrower.
- Layout shifter pattern. This pattern tries to adaptacross different screen sizes. It usually works well for visual-heavy siteslike photo galleries.
- Off-canvas pattern. This pattern pushes secondarycontent out of sight.
Responsive Design Email Templates
Conclusion
Responsive web design enables designers to maintain aconsistent look and feel across multiple devices. No matter what device aperson is using, they always will have content optimized for this medium.
Related Content
→Being Shady: How to Use Gradient Color in UX Design
Gradient color is making a comeback. Here are some best practices to use this trend in your designs.
Website Heat Mapping On a Budget – How & Why
Website heat maps allow businesses to identify which areas are getting the most attention.
Women in UX: Meet Tina Gong, Designer of Labyrinthos Academy
As an artist, Tina Gong’s work pulls from her background in linguistics and weaving signs and symbols into…
Atomic Design Principles & Methodology 101
Mediahuman youtube downloader 3 9 9 7 download free. Atomic Design is the deliberate building of interface design systems with explicit order & hierarchy.
Mobile revolution that started a decade ago not only changedthe way we interact with products but also changed the way we design products.The first iPhone was a powerful computer that combined three things —phone,music player, and internet browser. The latter had a tremendous impact on theweb industry because designers had to adapt websites for small-size screens.And the situation got more complex whenother hardware manufacturers rushed to adapt toeven more niche mobile devices. As a result, designers who worked on webdesigns had to adapt the website not only for various desktop resolutions butalso for many different mobile devices.
It quickly became evident that creating a separate versionof the site for each resolution and new device was impractical. Design industryneeded a new approach for web design that would be flexible enough to supportvarious types of screens and resolutions. That approachis called responsive design, and it represents a fundamental shift in how we build websites.
In this article, I want to share foundational rules thatwill help you deliver a quality experience, no matter how large or small the display size your users will have.
What is responsive design?
Responsive web design is anapproach that allows design across various devices (mobile, desktop, tablet,etc.) and suggests design should respond to the user’s behavior based on screensize, platform and orientation.
![Responsive design checker Responsive design checker](https://www.bluecorona.com/wp-content/uploads/2015/04/what-is-a-responsive-website.png)
Flexible grids are foundational elements of responsivedesign. All assets such as images adapt to various screen sizes & resolutions (using CSS media queries).As a result, the user has great UX no matter what device they use—whether it’sa large desktop or small screen of mobile device, the website automaticallyswitch to accommodate for resolution.
In 2010, Ethan Marcotte wrote an introductory article about the approach, Responsive Web Design, for A List Apart. Here is a great quote from Ethan: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”
Responsive vs. Adaptive vs. Mobile First
Colibri books. In the world of web design, we have a few terms that describe the process of design optimization for various screens— responsive, adaptive and mobile-first designs. You may wonder what exactly is the difference between all of them?
Responsive and adaptive web design are closely related, butthere are some differences between them. Responsive web design uses CSS mediaqueries to dynamically change the page layout based on the target device suchas display type, width, height, etc. Adaptive design, on the other hand, usesstatic layouts based on breakpoints which don’t respond once they’re loaded. Asyou can see, adaptive design is a less flexible solution for the problem ofdesign optimizations for various screens.
“Mobile-first” is a conceptual term. As the name suggests,mobile-first means that web designers start the product design from the mobilemedium and then design tablet, desktop, and monitors. “Mobile first” way ofthinking for design helps product teams to focus on the most important contentand deliver it to users.
Technical ingredients of responsive web design
It’s hard to understand the nature of responsive designwithout understanding its technical side. Responsive websites have threedefining features: flexible layouts, media queries and flexible media.
Flexible layouts
Flexible layouts are the practice of building the layout of a website with a flexible grid. Flexible grids are created using CSS. Web layout consists of columns that automatically rearrange themselves to fit the size of the screen or browser window.
Media queries
The flexible layout approach alone isn’t enough to optimizethe design for various screens. When the layout gets too small, the layout maybegin to break and create columns that will be too small to display contenteffectively. Media queries come to save the day.
Ethan Marcotte gives media queries the following definition:“A media query allows us to target not only certain device classes, but toactually inspect the physical characteristics of the device rendering ourwork.” Media queries allow web designers to create condition checks to adjustweb designs based on the properties of the user’s device. They also allow web designersto specify different styles for individual browser and device circumstances(i.e. various widths of the viewport or different device orientation).
Flexible images and videos
Mobile Website Responsive Design
As viewports begin to change thesize, images, videos, and other media types should be scalable, adjusting theirsize as the size of the viewport changes.
All assets in responsive design are distributed in flexiblecontainers —those containers resize themselves as the user changes the browser window or switches to another device. A simple way to makemedia content scalable is to use the max-width property with a value of 100%.
The nature of responsive design
Some people think that responsive web design is all about fitting design to various screen resolutions. That’s not entirely true. Responsive design represents a whole new way of thinking about design. It’s about creating flexible design solutions. To represent responsive design, Josh Clark, memorably adapted the famous Bruce Lee quote Be Water, My Friend when he coined content is like water.
You put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put water into a teapot, it becomes the teapot.
Bruce Lee, Be Water, My FriendWhat does this mean? If you think of your content as waterand pour it from one device to another – the water remains the same, but theview of the water is changed per device. And you can have more water than adevice can handle, meaning you will need to optimize content per device.Responsive design is based on the idea of “flexible everything”—not only thelayout, but the content itself should be aligned to the medium.
Design recommendations
Now let’s share a few design recommendations for creating responsivedesign:
Grouping screen sizes in categories
Itis possible to group various screen sizes into a few major categories, anddesign for each group. A technique called fluid grids uses media queries min-device-width, max-device-width, and orientation to make web design as flexible as necessary.
Flexible images
In responsive web design, every image is loaded in itsoriginal size, unless the viewing area becomes narrower than the image’soriginal width. Avoid hardcoding the height and width; instead, let the browserresize the images as needed (CSS should adjust images relative size).
Show/hide content and functional elements
It is possible to shrink things proportionally to the screensize so elements will fit well on a smaller screen. Using CSS queries (visibility:hidden),it’s also possible to hide some content on mobile. Remember that mobileexperience should be highly-focused, that’s why it’s recommended to prioritizecontent that delivers maximum value for your users.
The show/hide content is applicable for all content elements, including navigation. One great solution is Priority+ navigation, which exposes the most important options and tucks the remaining options behind some form of “more” link.
Mouse Cursor vs. Touchscreen
Thesize of the interactive elements should be proportional to the input method. Onthe desktop we use mouse, while on touch screen we interact with our fingers. Here are a couple of things to remember whenoptimizing the design for touch:
- Forgetabout on-hover states on the touch screen. Touchscreens cannot displayon-hovers because there is no cursor.
- Increasethe size of interactive elements and introduce more whitespace betweeninteractive options.
Optimize images and video
Responsive Design Checker
Responsiveweb design requires optimizing media content:
- Avoid heavy visual assets. When the image asset is provided in large resolution (more than the size of a viewport) or in a Lossy compression format (i.e., PNG for images), the browser will have to resize the image to fit it to the viewport and the process of loading will take more time because the size of the file. Use Squoosh to compress, resize, and manipulate images. Check the article Front-End Performance Checklist for more information on performance optimization.
- Optimize images for smaller screens. It’s not enough to just change the size of images. On smaller screens, it’s worth cropping some images, so they retain their impact.
- Try to use more SVG than raster graphics. SVGs alter their resolution based on image paths, not pixels, so they remain the same at any size.
Pay attention to typography
Typography is the cornerstone of the design. People visitwebsites for content. That’s why when it comes to responsive web design, it’svital to choose typeface works well on all screens and device resolutions:
- Avoid dummy content. Avoid using “Lorem Ipsum” when designing web layouts. Dummy content isn’t very helpful in finding whether your design is ready for real content or not.
- Use em or rem instead of px. Ethan Marcotte wrote an excellent article on the Adobe Typekit blog explaining why it’s recommended to use em instead of pixels to size your fonts. In short, pixels should be avoided because they have a fixed dimension standard. Em or rem are based on percentage and scalable.
Start with the smallest view first
When you start working on responsive web design, it’s vitalto create a mobile layout first. The mobile-first approach in design isessential because it will help you create a content-first experience.
Design clear visual hierarchy
Visual hierarchies take center stage when you’re working onresponsive design. Depending on the type of content and the value it deliversto visitors, some content is more important and should be viewed first, whileother content is less valuable. The most important content is at the top of thehierarchy.
To make things easier, you can use multi-device layout patterns. Luke Wroblewski, in his article Multi-Device Layout Patterns defined five broad categories of responsive layouts. For the purpose of this article, I will select only four categories:
- Mostly fluid. A multi-column layout introduces largermargins on big screens, relies on fluid grids and images to scale from largescreens down to small screen sizes.
- Column drop. This pattern starts with a multi-columnlayout and ends up with a single column layout, dropping columns along the wayas screen sizes get narrower.
- Layout shifter pattern. This pattern tries to adaptacross different screen sizes. It usually works well for visual-heavy siteslike photo galleries.
- Off-canvas pattern. This pattern pushes secondarycontent out of sight.
Conclusion
Responsive web design enables designers to maintain aconsistent look and feel across multiple devices. No matter what device aperson is using, they always will have content optimized for this medium.
Related Content
→Being Shady: How to Use Gradient Color in UX Design
Gradient color is making a comeback. Here are some best practices to use this trend in your designs.
Responsive Design Mode
Website Heat Mapping On a Budget – How & Why
Website heat maps allow businesses to identify which areas are getting the most attention.
Women in UX: Meet Tina Gong, Designer of Labyrinthos Academy
As an artist, Tina Gong’s work pulls from her background in linguistics and weaving signs and symbols into…
Atomic Design Principles & Methodology 101
Atomic Design is the deliberate building of interface design systems with explicit order & hierarchy.