Building a responsive design
Why building a responsive design is important for development and user experience.
Why we must think about the mobile experience on the websites?
Nowadays, most people use mobile applications or visit websites using smartphones. The tendency is that people use what is easier for them, independent of where they are or what they are doing. For this, is important the teams deliver a product prepared for any device that the user wants to use.
What means Responsive Web Design?
“Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. RWD is one approach to the problem of designing for the multitude of devices available to customers, ranging from tiny phones to huge desktop monitors.” — NNG
Responsive design in users’ experience
Ensuring that elements fit within a page is not enough. For a responsive design to be successful, the design must also be usable at all screen resolutions and sizes.
When elements move around the page, the user experience can be completely different from one view of the site to the next. Design and development teams must work together not to just determine how the content should be shuffled around, but to also see what the end result of that shift looks like and how it affects the user experience. Currently, Material Design have been helped me, with actual principles, to build a patterned and Accessible Design.
Responsive design during handoff with developers
Responsive development uses so-called breakpoints to determine how the layout of a site will appear: one design is used above a breakpoint and another design is applied below that breakpoint. The breakpoints are commonly based on the width of the browser. Knowing this, Design and development need to work closely together to ensure a usable experience across devices.
Many teams look to popular responsive-design frameworks, such as Bootstrap to help create designs, these frameworks can be a great help in moving development along. As Designers, is recommended we know what frameworks the development team uses and to make the handoff the EASIER way possible. I recently utilized the Breakpoint plugin at Figma, which made it possible for me to prepare a presentation for developers where they could understand how the elements will be adept in different devices.
Even though you know the frameworks, is always recommended to test the designs. For responsive designs, we can test across platforms. It’s tricky enough to design a website that is usable on a desktop. It is even trickier to design a website that is usable in many configurations of its elements, across various screen sizes and orientations. The same design element that may work better on a desktop may work horribly on a smartphone or vice versa.
To sum up, helpers like Nielsen´s Heuristics and Material Design are always welcome but is important to keep the focus on OUR users. Sometimes, the layout can look “perfect”, however, may happen the user can not finish the tasks. For this is important, instead of trusting our opinions or guesswork, conduct usability tests (our best friends) that will help us ensure a better experience that is possible.
