10 Responsive Website Design Tips for Your Project

We’ve talked previously about the importance of responsive web designs. Responsive web design (RWD) allows a website to provide an optimal viewing experience on a wide range of devices, from desktop computer monitors, to iPads to Android/iOS smartphones.

If you are thinking about building a responsive website, here 10 things you need to know:

1. Responsive websites need to be designed from the ground up to influence the fluid grid design concept. You can’t bolt a responsive design on top of an existing website without a ton of customization and pain.
2. A significant amount of content planning is required for RWD. For example, images can be shrunk down with CSS using the max-width = 100% on an image tag but will degrade if they are enlarged and the original image resolution is not high enough to support large layout. The look and feel of your imagery is critical to the website design process. A great layout with fuzzy photos just plain stinks.
3. Pages should be designed for mobile devices, first.  This is also known as lowest common denominator design. Simply stated, all content elements must be squeezed down to a minimum of 320 pixels wide or page elements need to be removed to fit it into the narrow layout. Oftentimes getting rid of elements altogether is the best option for mobile devices.
4.  Designs for larger devices will need to plan for six different widths: 320px, 480px, 600px, 768px, 900px, and 1200px to cover all your bases.
5. Conditional display logic will need to be applied to page elements based on a variety of devices and screen resolutions.
6. The site will be best built on top of a robust content management system that fully supports responsive web designs that can easily be changed out over time. A static design might put you in a corner that’s expensive to get out of in the future.
7. Your content management system must have tight incorporation with its theme layer and must expose conditional responsive design logic to your content editors. This will allow them to turn on and off particular content components based on screen width.
8. While moving content around to fit within a narrow viewport can pose a challenge, creating a menu/navigation system that works well under multiple layouts can prove to be especially vexing. One option is to create a dynamic menu (using CSS media queries) that converts a horizontal menu into a single column drop-down menu as the screen width narrows. This is assuming you only have a simple menu tree without a significant number of child elements.
9. Devices with touchscreens behave differently than computers with a mouse. For example, on a touch screen the CSS hovers are not available; users need to tap the screen. This behavior can cause some issues with certain dropdown menu systems.
10. You need to extensively test and debug your website design on a variety of devices during development and before going live. We can’t stress this point enough.  Testing will save you from the post launch house of pain.

Remember, if your current website isn’t responsive, it’s time to start thinking about creating a new website with a responsive web design. As we stated above, you can’t incorporate a responsive design on top of an existing non-responsive design in any reasonable fashion. It’s best to start with a new design that’s already responsive and incorporate your content from there. For more information about TigerHive Creative Group and our expert web design team in Raleigh NC, visit our homepage or contact us, today.