A website is responsive if it is able to adapt to the customer’s screen. Responsive web design is extremely important these days and is actually a technique you need to master as a web developer or web designer. Designing great user experiences for your users means you need to deliver a seamless experience to meet their needs. At Norin Digital, we pride ourselves on providing great web design services to create the best online presence for our clients. Based on our experience, here are the most crucial web design rules you should never break.
-
Screen resolution:
Some are in landscape, others in portrait, others still completely square. Our developer will be able to take your desktop designs, if they use a grid, and define a tablet and mobile behaviour that looks good. However, sometimes our partners want to take full control of how designs appear on mobile in order to create separate design files for different breakpoints, for example. 768px for tablet and 375px. These are the most common resolution measurements on iPhone and iPad. In recent years, Google has increased the importance of the mobile experience when ranking websites in their website research.
-
Consider-context:
Too often, responsive web design isn’t all about “tailoring” a site to different screens. A single-column layout adapts to multiple columns as the screen size increases, ending up with the largest supported screen size. The “fit-to-size” process makes sense from a layout scalability perspective, but it ignores the actual content that is presented in that layout. Obviously, you want the layout of this site to fit well on the screens of mobile. The context goes beyond this requirement to consider what content may be most relevant to visitors using these devices. When working on a design, speak with the project development team to find out what data you can collect during a visitor’s experience on the site and how that information can better establish context.
-
Navigation button:
Navigation is one of the most difficult aspects of a responsive website to design effectively, especially when you are dealing with very large and deep menus.
What works great for larger screens will break down completely on other devices. This is why, when designing the navigation of a site, you don’t look for a consistent browsing experience across every screen site or across major layout versions of your responsive site. Instead, you focus on creating clear, user-friendly navigation every step of the way, even if the exact way to access the navigation differs from screen to screen. You should be as consistent as possible in your navigation, including the labels used on buttons and links and the visual characteristics of those buttons (choice of font, colour, etc.).
-
Use high-quality images versus download speed:
Pictures are one of the biggest culprits in size. As designers, we want these images to look their best, especially when they’re the primary visual that greets users. As important as this quality is, you need to work to strike a balance between rich visuals and overall page performance. When designing a responsive web page, consider each of the visuals on the page will be aggressive in removing unnecessary ones.
Reconsider things like homepage carousels, which require multiple large images as well as the JavaScript needed to “animate” these billboards. By simply removing a carousel with 4 images and switching to 1 static image, you can significantly reduce the size of this page by removing 75% of the images as well as animation scripts.
-
Use appropriate icons:
Used correctly, icons can enhance responsive web design in several ways. Well-designed and appropriate iconography helps replace long bursts of text, which is useful on small screens where space is limited. Icons can be delivered to a website using the SVG or JPG file format. These scalable vector graphics are ideal for sites that are compatible with multiple devices, as they can be resized as needed without adding to the file size of the images themselves. SVG files can be animated with CSS, add some interesting effects to a design without confusing it with lots of additional scripts that will negatively impact site performance. Rescue media will be needed for browsers that do not support SVG, using this file format can have a number of advantages.
-
Test your design on an actual device:
Planning to scale your design to different sizes is an important part of designing these devices, but you can’t stop at this theoretical approach. You have to interact with your design on real devices to show you how it really works, either by confirming the decisions you’ve made or showing you where improvements need to be made. Check the existing analytics first to see the percentage distribution of users by the device. Prioritize your tests based on breakpoint information. If you moderate the on-site testing, it’s also worth buying commonly used devices. If you can save the resources, it is worth testing different devices with different users. While this multiplies the number of users required for testing, it is the surest way to avoid bias due to familiarity with the design.
Final thoughts:
Using a lean UX workflow where responsive design is guided by internal testing and feedback will ensure the user experience works seamlessly across all platforms and screen resolutions before being presented to a real user for the first time. Each personalized solution allows for a better user experience. We will need to constantly work with new devices, resolutions and technologies to continually improve the user experience as technology evolves in the years to come. Responsive web design creates a great personalized experience for everyone. As web designers, we all strive to achieve this every day on every project anyway, right?
