: How to make a website fit in mobile browsers How should a good website work in a mobile browser? Should it adapt to fit the browser window size, or should it redirect to a page that is

@Berryessa370

In addition to @joshuahedlund answer if your website architecture allow, you can change theme in the application layer based on user agent...

This way you can serve mobile/full version of a page in unique URL. In regards of about the design I always use fluid and simplified design to fit mobile browser

Vote Up Vote Down

@Shakeerah822

Until recently it was becoming increasingly common to see mobile versions of websites, where the URL is entirely different, such as m.example.com or example.com/mobile. This is often more convenient than sending mobile users to the regular site, but it has drawbacks, such as complicating SEO, doubling the design code you have to maintain, and making it harder for users to share URLs. Depending on how your redirection works, you may have to keep updating your list of agents that qualify for redirection as new devices come out. Additionally, many sites have poorly implemented mobile sites, such as redirecting users to a mobile home page when they wanted to go straight to a specific article.

A slightly improved technique is to use the same URL but serve different content to mobile users by using CSS or JS on the client side or user agent detection at the server side or some other method, and perhaps using a cookie to allow the user to switch back and forth. Many Wordpress blogs do something like this; so do Stack Exchange sites, actually. This solves the problem of sharing URLs but still has the problems of separate codebases and keeping up with how and when the redirection applies.

These techniques were OK when the choice was "desktop" or "smartphone." The new tablet market has complicated things further, however. Instead of needing your site to look good from either 320px width or 1000px+ width, you now need to think about almost any value between them as well. In some cases the "mobile" or the "desktop" version of the site may be better for tablets; in some cases neither is truly adequate.

Due to this, there is a new option that is becoming more and more recommended: creating a flexible "responsive" website that uses CSS to automatically show, hide, and/or reorganize page elements depending only on how wide the browser is. Older browsers (such as IE8 and smaller) have limited or no support for some of the CSS techniques (such as media queries, or max-width and min-width attributes) that make this possible, but as time goes by that is becoming increasingly less of an issue. And there are basic techniques, such as using percentages instead of fixed widths wherever possible, that will work on all browsers. A good place to start learning about responsive design is this article at A List Apart.

Responsive sites solve many issues caused by separate mobile sites, although there are a few drawbacks to consider: Your pages may contain more code than necessary for mobile browsers, including elements that they will never see, and may not be quite as fast as a separate mobile site could be. If you do hide elements, you will not be able to give mobile users a link to a "full" version that displays them. In general, however, I think the upsides of responsive design outweighs its downsides compared to separate mobile sites. Others, of course, may disagree.

Vote Up Vote Down