A recent article from UX Movement (uxmovement.com) states that, “a quarter of all Americans use mobile devices only to access the web. One out of every five people in the world own a smartphone, and over half of those people use it to surf the internet.”

So, if your site doesn’t read well on mobile devices, you are losing a huge chunk of your users.

UX Movement has come up with a list of 10 tips to get you started in responsive design.

1. Go mobile first – Focus on how users interact with your website over their mobile phones first. Then build out your design for larger screen sizes.
2. Get acquainted with media queries – Media queries are a feature in CSS3 that allow content to respond to different conditions on a particular device.
3. Understand what mobile means for your users – People interact with websites differently over a smartphone than they do over a desktop. Use analytics to figure out why a user is visiting your website on their phone.
4. Use percentages – Instead of designing breakpoints for every possible viewport, set a maximum layout size. Then define the widths and height by proportion, not pixel. This allows the site to rearrange the layout based on percentages.
5. The need for speed – The main reason behind a slow site are non-optimized images. Don’t let those images drag your responsiveness down. Quickly scale down hefty images with tools like Adaptive Images and TinyPNG.
6. Eliminate the unnecessary – Get rid of excessive elements that inhibit speed and usability. Use a program like GZIP for compression.
7. To hamburger or not hamburger? – The Hamburger icon – otherwise known as the three lines that show a hidden menu – is the source of fierce debate. For responsive design, the best practice is always a matter of convenience. If a user must always tap the icon to see menu options, it becomes tiring. If you make the most popular menu items visible you can save users from frustration. Keep less popular links in the hamburger menu navigation.
8. Make it readable – Don’t make your users squint to read or pinch-to-zoom. A text size of 16 px, 1 em, or 12 pt is recommended. Here’s a useful conversion guide for px to em. When designing headlines, use a tool like FitText to create responsive text.
9. Use the right button size – Avoid small button sizes. Make sure your buttons are at least 44 x 44 px for comfortable tapping. Use padding instead of margins. Padding increases the tappable area, but margins do not.
10. Design for screen orientation – According to statistics, landscape orientation wins over portrait orientation 59% to 41%. Design your site to look good on both orientations, but pay more attention to landscape.

These basic practices should help you on your way to better responsive design. Feel free to share your tips with us!

For the full article visit: http://uxmovement.com/mobile/10-tips-to-get-you-started-with-responsive-design/