Smart phones and tablets have changed people’s web experience dramatically.

If you are a web developer, you would probably require a mobile ready website.

There are two options one create two different sites one for the large screen devices and other for mobile devices. Managing two different websites and become a difficult task after some time.

The solution, build a mobile ready website which can change its appearance depending on the device you are viewing your site.

For this purpose, one must:

  • Focus on creating semantic markup – use CSS and JavaScript for appearance and behavior
  • Avoid embedding inline styles and JavaScript in your page – use external styles and scripts
  • Create media queries to apply styles based upon the form factor of the device display
  • Use CSS properties such as “display” to create layouts that work well across devices
  • Avoid embedding images directly in the page in cases where the page will be used across platform – use CSS to specify background images
Typical feedback form, laid out for desktop screen size
Same form, laid out for mobile device screens
Read the actual post at Building Mobile-Ready Content and Layout on the Windows Phone Developer Blog.
Advertisements

Share your thoughts

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s