Detailed insight into adding mobile support for a website

Since the last few years, mobile web usage has considerably increased to a point where web designers and developers can't afford to ignore its significance. The gradual shift from web to mobile has fueled the need for faster broadband connections and affordable data network service. People have actually starting skipping over purchasing PCs and opted directly for the mobile phones. Those of you who own a website and want to equip the same with mobile support are definitely in luck. The reason being that you've landed on the right post which tells you everything about building a website that's compatible with multiple mobile platforms including Android, iOS, BlackBerry, Windows Phone etc. So, let's get started now!

Mobile Stylesheets- How to implement them?
Well, the very first step to adding mobile support to a website is the incorporation of a special stylesheet that would be used for adjusting the CSS for the mobile devices. Here's a brief on different methods that are used for implementing the mobile stylesheets:

Server-side method and the UA String

As per this method and while being indulged with iPhone Application Development Services, you need to detect the user agent string with the help of a server-side language such as PHP. Using the server-side method, your site will detect the mobile devices and either serve as a related stylesheet or get the user redirected to a mobile sub-domain. The server-side approach to adding stylesheets guarantees highest level of mobile compatibility in addition to allowing the website to render mark-up/content to the users accessing it via their smartphones. This technique works as the best solution for enterprise level websites.

Client-side method and media queries
As the second method of implementing mobile stylesheets, you can choose to detect the mobile device on the client side. Here, you can take the advantage of the mobile stylesheet's media type, for example:
<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />
As per the above code, two stylesheets have been included viz: site.css which targets desktops and laptops that use the screen media type and mobile.css which targets mobile devices that use handheld. The only issue with this approach is that older mobile devices support the handheld media type while others simply disable the screen stylesheets and load only the handheld. While a majority of newer mobile devices have already done away with handheld distinction, for saving the users' fully-featured web pages, you need to use media queries. These allow you to target styles to fit the device width. Since mobile devices usually have smaller screens, you can target handheld devices by detecting screens that have a width of 480px and less.

Hybrid approach

Since most of mobile devices don't support media queries, you'll need to opt for a hybrid approach for fetching maximum market penetration. Here, first define two stylesheets as explained below:
 screen.css- this has everything for the normal browsers
antiscreen.css- this is used for overwriting any styles that you don't want to show on the mobile devices.
After defining the two stylesheets, tie them together in another stylesheet core.css as explained below:
@import url("screen.css");
@import url("antiscreen.css") handheld;
@import url("antiscreen.css") only screen and
(max-device-width:480px);
Once you're done with the above process, define another stylesheet handheld.css and link the two stylesheets on the page as shown below:
<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld,
only screen and (max-device-width:480px)"/>

What all to change with mobile stylesheets?
After having implemented the mobile stylesheets, its time to talk about the styles that you would actually want to change. Here's a list of few changes that you can do to your mobile stylesheets:

Altering the screen layout

As per this, you can choose to Hire Dedicated iPhone Developer to reduce the multi-column layouts to single columns. With most of the mobile screens being vertical, adjusting the horizontal space becomes even more crucial. You must reduce the clutter available throughout the page by simply setting display: none; on some less important elements. Finally, choose to save additional pixels by simply reducing the margins and creating a tighter layout.

Reducing the Bandwidth
Yet another brilliant change that you can do for your mobile stylesheets is reducing the bandwidth for slower mobile networks. Here, you need to remove or replace any large background images used throughout the website. Lastly, set the display: none for any unnecessary content images used in the web pages. Likewise, if your website is using any images for buttons or navigation, consider replacing the same with plain text or their CSS counterparts.


ALSO READ: An insight into building iPhone apps without Xcode

Conclusion
With the continuous shift towards the mobile era, handheld device has become an absolute necessity. Here's hoping this blog would have left you with both the zest as well as the tool-set that's necessary for making mobile support a 'Dream that came true' for your website.