Posted on May 14, 2013 by Webfor When developing a new website with mobile we take into consideration the various modern technologies we can leverage to serve the site to mobile devices. There are three ways we can approach creating a mobile website, all with various strengths and weaknesses. Responsive Web Design Responsive web design (RWD) is a method of designing and developing the front end of a site to allow a site to naturally scale down and reconfigure itself for smaller screen sizes, from a maximized widescreen desktop browser, to a tablet, and down to a smartphone. RWD utilizes CSS (cascading stylesheet) and media queries to apply a different set of design rules based on a user’s screen size: such as the width of an image, the arrangement of the navigation, and the size of the page’s text. Using CSS, you can even hide and show elements only on mobile browsers (such as a Call Us button). Because you are serving the exact same site to mobile and desktop, just styled differently, you don’t even have to think about duplicate content or canonical URL issues for your mobile site. Responsive web design has a few negatives. First, the entire concept is based on an alternate stylesheet, and although you can hide and display elements using this stylesheet, those elements are always loaded, so RWD is best left to sites that have a minimalist design approach (and even then, they tend to load slower on mobile devices than a purely mobile site). Also, the continued development of RWD can take much longer, with every design choice affecting both desktop and mobile, and every future change to the site has to take into consideration how that change will ‘degrade’ to mobile screen sizes. Google recommends responsive web design, but that doesn’t mean it rewards it with higher rankings or conversely it doesn’t penalize properly configured server-side solutions. Google recommends responsive web design mainly because using a single url for a web page is a better user experience all around (this can also be achieved with a server side solution) and it requires less resources for Google’s web crawlers (can be achieved with a server side solution). Some examples of great responsive designs: Webfor (this site!) Polygon SB Nation Dedicated Mobile Site Many content management systems offer plugins to implement a framework in which only the data the mobile user needs is pulled from the server. This is done using PHP (PHP Hypertext Preprocessor… yes, it’s a recursive acronym!), JavaScript, and jQuery. For example, if you have a desktop site with a few paragraphs of content, an image, and a form. On mobile, the mobile browser may load that same text, a compressed version of the image, and a completely different form optimized for mobile. Unlike responsive design, this is done without loading one byte of the other elements for the site. This allows you to create a rich experience specifically for mobile users. Modern systems for implementing a dedicated mobile site help you avoid SEO-unfriendly duplicate content and canonical URL issues. Just make sure to stay away from old-school mobile site hacks like subdomains (m.domain.com) and different landing URLs (domain.com/mobile). If you already have a mobile site set up on a sub domain, to avoid duplicate content issues it is important to use the rel=”alternate” tag to identify to Google that this is a mobile version of this page. You should also use a rel=canonical on the mobile url. Upfront development time is very intensive with a dedicated mobile site, essentially having to create two websites. This can be even MORE time intensive if hand-coding the PHP and JavaScript to serve the mobile site. However, with modern content management systems, there is very little ongoing maintenance to the mobile end. When setup properly, new content written on the desktop site is pulled in and compressed down appropriately for mobile. Examples of dedicated mobile sites: NBC News W Hotels The Best of Both? Responsive Design + Server Side Components Combining responsive design and server-side scripting (RESS) allows a web developer to serve content for mobile, while styling it using a responsive stylesheet. This loads only what you need for your mobile site instead of simply hiding it CSS via the responsive stylesheet, making for a more consistent style between the two sites (like RWD) and an optimized experience for mobile (like a dedicated mobile site). Although this may be the best sounding solution, as web technologies, wireless connections, and smartphone speeds improve, we still see an eventual shift to a pure responsive process with only light use of scripting on the server side, if needed at all. This appears to be what Google is banking on. Additionally, developing a server-side script alongside a responsive stylesheet takes the most development time of the three options. Amazon is a great example of a great RESS mobile site. Which one is best? There is no one best solution for everyone. Your businesses is unique and the approach you take to your mobile site users should be unique as well. If you’re site is fairly simple and doesn’t have a lot of bells and whistles, using a responsive design can be a great way to go. A dedicated mobile site might be better when you want a fast loading site that is optimized for the mobile user and is (usually) a little easier on the budget. A good web development company won’t push one solution or the other. They will recommend the right solution for you. Keep in mind that the worst solution is not having a mobile optimized experience at all or a site that uses flash that doesn’t render on most mobile devices.