How to Build a Responsive Website
Update:
We’ve got some big news, everyone! According to The Next Web, Google will increase the rank of sites that are mobile friendly beginning April 21, 2015.
What does this mean for you? Well, if you want your site to rank higher on search engines—but don’t have a responsive, mobile-friendly website—now’s a good time to start. Keep reading to find out how you can make your site responsive.
I recently bought a tablet as part of a sales promotion with my new phone. Okay, fine. There are a lot of things I can do with a tablet. But one thing I have found annoying in the mildest sense is how difficult some of the websites–that I would have no trouble with on a desktop–are to use. So I got to wondering: what actually goes into building responsive websites? If your website is not responsive, where would you even start and what best practices should you take? I sat down with one our expert web developers, Doug, to get the scoop.
We’ve already established in a previous blog, iPhone 6 and Website Responsiveness, how important it is for today’s websites to be responsive. But what’s a person to do if their site isn’t? Where do they start?
Responsive sites are best built from the ground up, designed with responsiveness in mind. But if you wanted to start from an existing site, start by adding the viewport tag in the <head> element:
(Ed. note: surround the following text in <code>….</code>) <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
This will let you view your site on mobile devices as a responsive site would be viewed. On the desktop, you can reduce your browser width (less than 500px) to simulate the same view. With some designs, the viewport tag may be enough to make a passable responsive site. More than likely though, you’ll start to notice parts of your site that need changing. Viewing the site on a mobile device should key you into responsive problem areas. Components such as “content”, “sidebar”, “menu”, or “slider” may have hard-coded (fixed) widths, reliance on hover states, or styling dependent on wider screen widths (it just doesn’t “work”). From this point a web team can usually assess whether starting from scratch would be the better use of time.
If you’re starting from scratch, is it better to design for a desktop then degrade down, or design for a phone and build up?
IA and design should always be done mobile first. The constraints of a small screen force information architects and UI designers to surface the most important information first. As screen real-estate increases, adjustments can be made and additional information can be added.
But what if you already have an existing website? Do you still have to take a mobile-first approach?
Mobile first generally means flipping your entire style-sheet (CSS) inside out — not fun. While I believe mobile first to be best, it’s not required for building responsive sites. So if you must, work with what you have.
What about building out a separate URL for the hypothetical mobile phone, instead of making the main site responsive–yay or nay?
The M-dot technique (m.yoursite.com) is a way of serving content with a mobile friendly design. Implementation of these sites requires some form of browser sniffing to redirect the user to the appropriate URL. However, user agent detection is prone to errors and different URLs create sharing problems for users and SEO problems for content. Responsive can deliver a consistent design aesthetic and ease of use with none of these drawbacks.
What other considerations should someone take into account when looking to make his or her site responsive?
Progressive enhancement of modern web technologies to increase baseline compatibility with varied web browsers. OK—it’s not directly related to responsive, but if you’re going to make updates to your site, you might as well clean up your HTML to be accessible and remove your inline CSS and JavaScript. Don’t overdue the gimmicky stuff like animations and “sliders” until you’ve nailed a basic experience for all browsers.
In a nutshell, building a website with responsiveness in mind can save you a lot of hassle and trouble down the line. Want to learn more about website responsiveness? Check out our original post: Is Your Website Ready for the iPhone 6? Curious to learn more about what we can do for your current website? Give us a shout and learn how we can help increase the digital responsiveness of your brand.
