Do your research:
When designing for mobile, you have to know your audience and the type of devices they’re using. Look at your analytics to determine what platforms and browsers are most popular for your audience. Also, take a look at the geographical regions that your clients reside in; ensure that your design is appropriate to your audience.
Take a look at caniuse.com.
These websites have very useful information about the kinds of languages and scripts that are compatible with different mobile devices.
Seriously consider using a framework:
Using a framework is a good way to eliminate variability and improve consistency. The two most popular frameworks are Bootstrap and Foundation. Here at LAUNCH we prefer Bootstrap, but other companies swear by Foundation. Either way, the frameworks expedite the programming process and improve the websites accessibility from mobile devices. There are other frameworks that are more popular for mobile user experience elements. One such framework is called JQuery Mobile. The framework does not focus on page layout or structure, but rather on mobile usability and interface elements.
Remember the old days:
Use an emulator to test compatibility:
There are many tools that will mimic various devices and display your website as it would appear on them. One emulator to consider is called “Firefox OS simulator.” This emulator provides an entire platform to explore, rather than just the browser. Another popular simulator through Firefox is called Fennec; it is a browser based system that allows you to resize your window to the desired device size. There are also other emulators specific to Android and IOS devices.
Keep it simple:
Don’t forget, whether it’s mobile web design or responsive development, the idea should be: “what do I include on the mobile version?” rather than “what do I omit from the desktop version?” When it comes to responsive design, simple, easy to navigate websites are very important.