Redirect To Mobile Site | CSS3 To the Rescue

Redirect To Mobile Site

Redirect To Mobile Site

The process of detecting a user’s device and having phones and tablets redirect to mobile site is thankfully over (for the most part). No more building and maintaining two, three or even more sites. Thanks to CSS Media Queries we can now build one site and have it fluidly display on any device.

One of the hangups of the old process of having users redirect to mobile site was the lack of a clear solution. There are myriad libraries that handle this, but there was a constant need for upkeep to respond to the ever changing array of devices.

This growing list of devices presented another problem with having users redirect to mobile site; What device were you suppose to be targeting with your design? Initially as long as your site looked good on an iPhone you were all set. As the list of devices grew to include Android, Windows Phone, Blackberry and Tablets of all shapes, it became an exercise in futility to attempt to maintain one mobile and one desktop site.

So what’s the solution if it isn’t having users redirect to mobile site? Responsive Design. With a solid Semantic layout coupled with CSS and Media Queries your site will be bullet proof on every device.

I tend to use a very simple set of media queries in places of having my users redirect to mobile site. This is my basic starting point:


@media only screen and (min-width: 768px) {
/* tablets and desktop */
/* CSS CODE GOES HERE */
}

@media only screen and (max-width: 767px) {
/* phones */
/* CSS CODE GOES HERE */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
/* portrait phones */
/* CSS CODE GOES HERE */
}

I’ll tweak this based on the complexity of the project, but it’s a good starting point.

Hopefully you’ll start using CSS Media Queries on your next project. It’s a much better solution than having your users redirect to mobile site.

Here are some resources to get you started:
http://mediaqueriestest.com/
http://css-tricks.com/logic-in-media-queries/
https://developer.mozilla.org/en-S/docs/Web/Guide/CSS/Media_queries
http://cssmediaqueries.com/
http://code-tricks.com/css-media-queries-for-common-devices/

Pin It

Leave a Reply