As we use mobile devices, they change how we interact with our devices and content. Developers and designers need to consider many things when developing a website. You have to think about responsive design, speed, UI/UX, patterns, touches and gestures. Sara Cannon explains how mobile design trends affect how we design.

Smart design is

• Content-focused
• Fast
• Informed
• Refined

How to you create a smart design?

Be content-focused

Your design should be Mobile First, Readable, Designed for Content and uses digital storytelling. It just works. A visitor can read your site on their computer, laptop, tablet or phone. They can read your website using what ever device they choose. Make the content the most important part of the design. Use web design techniques, like photos, videos, fonts and more to help tell a story.

Be Fast

Your design should be fast. People have a limited attention span when it comes to slow loading websites. Make sure your site loads quickly. Sara talked about balancing speed vs awesome. Some photos may make a design look awesome, but they take time to load. You need to decide if that photo is really necessary. If it is, you can optimize the photo for the web. A tool that smushit optimizes photos for the web. You can speed up how your site loads by using tools like Icon Fonts and SVGs (Scalable Vector Graphics). You can get Icon Fonts from Font Awesome, Fontello or IcoMoon. Nounproject is one place to get svgs. By replacing icons with fonts, you can increase the speed of your site.

Be Informed

Every website performs differently. You have well and bad performing pages. By using Google Analytics or another web analytic tool, you can learn more about how your site is performing and find out what works. Not enough people do user testing. User testing of your website can tell you a lot about what works and what doesn’t. You can also learn why someone uses your site in unexpected ways. Use usertesting.com to invited people to help you test your website.

Be refined

A little bit of motion can add refinement to your website. Add animated navigation icons with CSS Transformations. The motion lets people know that something has happened.

When you consider a new website or redesigning an old one, think about how to focus on the content and not just making the site look pretty. A site that is readable, fast and just plain works is going to have more people using it than one that looks awesome. Remember to make a site that is content-focused, fast, informed and refined.