With an increasing number of people using their smartphones and tablets when reading emails and browsing websites, your site needs to respond to that traffic and offer a great user experience. Here are some resources to help get you started.
Tips for Turning Your Online Communications Into Responsive Design Masterpieces
- Have a “Mobile First” mindset when deciding what content should be on a page. This will help you decide what order the content should be in on a smartphone when the width shrinks. Is the picture more important than the copy? Do you want your Donate button to be one of the first things people see? Sketching out your emails and answering these questions before you start designing will help the design and code process.
- Think about your image size. High-speed Internet access has given us the ability to show larger images with more definition, but these images don’t always work well on mobile devices or they take forever to download (even over 4G). Resize your images to be mobile friendly.
- Test, test, and retest. At The Engage Group, we love tools like Email on Acid and Litmus that give you instant snapshots into how your email marketing looks on a wide variety of platforms. Adobe Browserlab is a good tool for checking landing pages across platforms.
- Get comfortable with CSS and media queries. CSS code can be scary, but there are a few simple things you can do with your code to help make any content more responsive.
- Don’t be afraid to borrow code from others to get started. Many frameworks have been created and released to the public to help you on your way. One of our favorites at The Engage Group is Bootstrap
- Ask for help! Responsive Design is a relatively new concept online. If you would like to discuss how to make your website, email marketing, or other online communications more responsive, The Engage Group can help.
Nonprofit Responsive Showcase:
- Responsive and mobile design: Mobile Presentation for the Professors Institute (1/8/13) – http://seanpowell.github.com/respdesign/
- The SEO of Responsive Design – http://www.seomoz.org/blog/seo-of-responsive-web-design
- Responsive email examples – http://mediaqueri.es/
- Responsive email examples – http://blog.lyris.com/us/email-inspiration-six-great-responsive-email-designs/