Web design has evolved considerably over the years. During this time, standards and best practices have been coming into play that help you design better websites now — and for the long-term. Here are 10 things you must know to keep your site responsive:
- Start with a Grid: When creating a design, fluid grids are best because they can scale proportionately. If you use this system properly, you can get great results.
As a starting point, consider grids for the three major browser types, which are: 1000 pixels or more for wide screen monitors, or a minimum of 768, 480 to 768, and 320 to 480. To get a feeling for grids and how they can help you, check out Bootstrap.
- Make Sure Everything is Flexible: Since there are many options, this can be a huge advantage. You can test out many designs, fonts, images, etc., until you find something that works.
- Use Media Queries: Media queries are relatively easy to use and they can deliver different styles to the various devices through CSS. Media queries make is simple to support multiple layouts. As for breakpoints, here are some common measurements to test out: 320, 480, 600, 768, 900, and 1200 pixels. It’s also a good idea to use percentages for size adjustments. This can create more flexible and more user friendly for various devices and screen sizes.
- Clean Design: One thing that will make or break a site is the design. All elements must be considered. Details such as fonts, logos, how the text is displayed, readability, white space, etc. are important. If the site experience is poor, users will abandon your site.
- Navigation: Along with clean design, navigation is important. The navigation much be constructed of type that is easy to read, of high contrast and the backgrounds should also reflect that. In addition, using few heading is advisable. Also, when possible, keep drop down menus to a minimum, partly because drop down menus don’t work well with touch screens.
- Responsive Type: When thinking about type one needs to realize the eye can only handle a certain number of letters and breaks. When you’re creating a layout, it’s important to optimize your type for screen width. Other issues are spacing between letters, above, below and to the side. Spacing above and below is important. If the letters are too close, they could overlap or seem ‘tight’ in terms of readability. If you have any doubts, test the fonts on each device.
Novelty fonts or dramatic lettering might look great on a desktop but the same font could look terrible on mobile. Type needs room to breathe and on a small screen it’s even more important. At a small size, your best font options are normal sans serif styles with even strokes.
- Short Loading Times: Short loading times are essential on all devices. If your pages take too long to load, you will lose your audience. Some ways to ensure your pages load quickly are clean code, minifying your code so it loads faster, minimal use of plug-ins if you’re using a CMS, and images that load quickly for each device.
- Use Multiple Image Formats: This step is essential. Contrary to what some people may tell you, one size does not fit all. In other words, using one image size and making use of scaling is a big mistake. At minimum, you need to format images for at least three browser formats. And when you do so, make sure you use JPEG for images, not PNG, because PNG can bloat your file sizes by 5-10 times. If your images are made up of text or line drawings, use GIF or PNG-8. These file formats will give you the best results.
- Effective Security: Good security is essential, to prevent hackers from breaking into your site and wreaking havoc. This is less important if you have built a simple site using programs such as Adobe Muse. However, if your site is built using a CMS such as WordPress, good security is essential. At minimum, you need to install the following plug-ins, IThemes Security, Updraft Plus, and Wordfence. Full details on how to configure them are in the article, 10 Essential Security Tips.
- Captcha Tests: These are becoming more popular to prevent bots from spamming a site. Bots can quickly use up your bandwidth. Captcha tests will stop that from happening. Another way of dealing with the problem is to write out email addresses as johntony AT yourhost DOT com. It’s inconvenient for users, though it will eliminate the spam problem.
Additional Resources
* 15 Responsive Design Tips
* 8 Responsive Design Mistakes to Avoid
* Responsive Web Design Close Up
* Respond to Media Queries with the matchMedia API
About the Author
Nathan Segal has been working as a freelance writer for 18 years. In that time, he has published more than 1,000 articles and has written 9 books. You can learn more about him at http://NathanSegal.org.
