Making a website mobile friendly is one of the top challenges I faced over the past 2 years. Many of my older websites are not powered by WordPress but handcoded using Dreamweaver. So trying to make such a website looks good on an iPhone or iPad is a major undertaking and I tend to leave it as it is if there were not a pressing need or something was broken, badly. Not too long ago, I started to use the meta viewport tag and tweaked a couple of these legacy websites.
Then, I came across this article by Dmitri Lau on the “10 Ways to Make Your Website More Mobile Friendly”. By using these 10 tips, I hope to buy a little more time for my old website before I find time to do a complete makeover!
1. Set Form Input Attributes
2. Set a Mobile Friendly Preferred Width
3. Set Image Widths to 100%
4. Set Input Widths to 100%
5. Use Care When Disabling Submit Buttons
6. Use word-wrap With Long Strings
7. Use Extra Spaces Cautiously
8. Take Advantage of Media Queries
9. Avoid fixed Positioning
10. Use Standard Fonts
Read Dmitri Lau’s article here.