Top 10 Responsive Design Tips and Tricks
Posted by Brock Nunn | Design, Showcase, Tutorial, Twitter Bootstrap | No CommentsResponsive design is changing how we view the web, literally! Whether you are getting started with responsive design or are a seasoned responsive pro we have a few tips that just might help with your next mobile project.
Choose A Great Framework
When beginning a responsive design, it is important to start with the selection of a solid foundation. Since the framework will inherently inform many design elements, you will want to carefully consider your needs. Will you choose a bare bones framework like Skeleton? Or does the scope of the project that you are working on require something with a bit more meat to it like Twitter Bootstrap or Zurb Foundation?
If you would like to know more about Bootstrap and Skeleton we have covered them several times in the past.
- Twitter Bootstrap Part 1: What is Bootstrap Anyway?
- Twitter Bootstrap Part 2: Design a Responsive Homepage
- Twitter Bootstrap Part 3: How to Load Sites Faster With BootstrapCDN
- An Introduction to Responsive Design with the Skeleton CSS Boilerplate
Minify Your Scripts & Stylesheets
It’s not rocket science but it is very easy to forget. Do you want your pages to perform to their maximum potential? Yes? Then get started with minifying your CSS & JavaScript.
Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.
Every website a user visits is downloaded in some form to their local computer. So, if you were downloading a large amount of files from a site, wouldn’t it be preferable if the content providers were to place all of those files into a single zip file? Minification essentially does the same thing, cutting out everything except for what is absolutely necessary. So be kind! Minify!
Squish Your Images
A majority of the time, the culprit for large download times is the ever-giant image size. So, why do we need to take care of image sizes? The very same reason that we minify CSS and Javascript. It is only to the benefit of our server and our users if, as a rule, we serve up the smallest file sizes possible that still serve to preserve the integrity of our vision.
Original size: 2.0mb
New size: 161kb … Which would you rather download on your phone?
Consider a Preprocessor
We have talked about CSS preprocessors in the past, and if you have not tried them yet, then please do yourself a favor and give a preprocessor a shot today! Once you begin to preprocess styles, not only will you have access to amazing mixins and in-stylesheet calculations but also automatic organizing and minification of your stylesheets.
Want to get started working with a preprocessor? It doesn’t matter if you use a Windows PC or a Mac, here are some helpful tools to get you started.
- WinLess (Windows)
- Compass.app (Win/Mac)
- Fire.app (Win/Mac)
- Codekit (Mac)
Develop For Mobile First
Perhaps you have caught on to the general theme of this responsive design roundup. So much of what constitutes responsive design can really be summed up in responsible design. Bob Dylan said that “the times, they are a’changing” and he was right! Mobile ready websites are no longer a luxury. If a brand wants to engage with its customers or if a restaurant wants to attract new clients on their night out, a consumer better be able to engage them from his or her phone!
Mobile-first design would dictate that the design of your site no longer has much to do with the layout of your site. Mobile-first design would suggest that a web designer must look to communicate a brand image through the use of color, graphics, fonts and design elements first. So, don’t think of the phone or tablet as a hindrance to your artistic brilliance. Start designing on the phone first, then with every iteration simply enjoy the extra canvas that larger screens allow for.
Get Testing
Does your site look great on the desktop, and pretty rad on your iPhone? Congratulations! However, I suggest that designers and developers take a look at the other screen sizes just in case. Not only can new electronics be cool, but they are also useful for testing! So go for it, grab that Kindle Fire or Nexus 7 that you have been eyeing.
Ensure Touch Friendliness
If you are using an awesome jQuery slider within your responsive design, it may be a good idea to double check that it is touch friendly. After all, having to mash around for little nav points on a slideshow is never fun. Engage your customers by integrating touch friendly elements.
Use A CDN (For Free)
Content delivery networks help to serve up files to your viewers in a responsive way that is likely closer to them than any single server company that you may host with. What’s better? Often, a good CDN will take care of image optimization and CSS/JS minification automatically for you.
Learn more about why we use CDNs by checking out these posts:
Use FitVids or FitText If Applicable
If you also serve up a bunch of videos on your site then maybe video size has become a problem. It can be hard to deal with video on responsive sites, especially since exact device widths can be unpredictable. We can fix that! The very kind folks over at Paravel and CSS-Tricks.com have created a few simple and lightweight scripts that will take care of large videos or even giant text for any screen that you can think of!
Be Inspired!
Responsive design is really cool! There are thousands of designers and developers that are learning how to morph their workflow to compensate for all of the new requirements that should be taken into consideration. So, take a look around! Check out cool sites like Dribble.com or Codepen.io and see how other pros are doing it! It is certainly cool to be inspired by the work of others and find ways to contribute as well.
