Tag: responsive design

Web Design and Development with Mobile SEO in Mind

We’ve broken down the key features of responsive web design and discussed the benefits that make it the go-to choice of web designers today. But how do search engines feel about all of this?

SEO is at the forefront of every web publisher’s mind.

So whether you’re an internet business pining for maximum clicks, or a new blogger luring readers to your corner of the web, it’s a topic that deserves priority consideration when deciding how you’ll approach ‘going mobile.’

Let’s look briefly at the top search engines.  These are Google, Bing, Yahoo!, and Ask.com (source). These four are far more popular than other search engines out there so it makes sense to focus your SEO efforts on these major players as they’ll be driving most of your indirect traffic.

The search engines primarily use a three-pronged approach comprised of: a web crawler to follow links and ping millions of sites efficiently; an indexer that, well, indexes their findings in a database; and a query processor to interpret your search terms and provide the best matches from the database.

Mobile SEO

Beyond traditional mobile web development.

While the SEO world still focuses its efforts on desktop design, the world of mobile design and development has boomed – inevitable considering our smartphone-driven lives. Traditional web development often calls for duplication of web content for desktop and mobile sites. This dual-mode presence calls for time-consuming URL redirects, separation of content, and splitting site traffic, which isn’t good for user experience or that all-important mobile SEO.

Again, we find ourselves landing on responsive web design as the solution (SEO mobile web development is the key!). Keeping your site and content singular is inherent in this web development technique  – no URL redirects, no multiple web crawls needed from the search engines, no split traffic hurting your rankings. All this is possible just by choosing a better web design strategy!

There are numerous ways to make your site responsive, including using a responsive framework like Twitter Bootstrap or coding a responsive page template with @mediaqueries.  Learn more about responsive design.

For an expanded look at mobile SEO and mobile design/development, reference: http://www.webdesignerdepot.com/2012/11/seo-for-the-mobile-web/

*Photo courtesy of Fotopedia, used under Creative Commons License.

So what IS responsive web design, anyway?

With the world going mobile there’s no way around it: your site has to adapt to any and every device that’s out there. Think about it… How many devices have you used today? I can count checking my email on three already!

Don’t get lost in buzzwords, understand why/how responsive web design works.

With the world going mobile there’s no way around it: your site has to adapt to any and every device that’s out there. Think about it… How many devices have you used today? I can count checking my email on three already!

In the past, the solution to differing device screens was to build an alternate version of your site, or even multiple apps optimized for the various mobile OS’s. However, these options often prove to be too costly in development and cumbersome to perform maintenance and updates. So what is today’s solution? Responsive web design!

Well, you ask… what IS responsive design? It’s one of those buzz words being thrown around a lot right now.

Responsive design allows for a single site to be designed and developed, yet performs effectively and beautifully across devices of varying screen sizes and orientations.

There are a few key features that allow this to work:

A flexible framework for content – the ‘grid’

The foundation of the responsive design, the grid provides easy content management across varying screen sizes through the repositioning of content areas or boxes.

Check out some great info on how to use the grid in design and download some basic templates here.

Responsive web design
Content moves based on screen size, but should still relay the same message in an aesthetically pleasing way. (Image courtesy of DezignMatterz)

Adaptable visual content

From images to backgrounds and graphical motifs, a solidly designed responsive site must be able to communicate your vision consistently, regardless of device and screen size. These elements of the page must be able to move around and make sense from a user perspective and still effectively tell the user what you’re saying/selling.

Check out some great examples of sites that do this here.

The ability to respond to devices

Generally done via ‘media queries,’ a responsive site must determine the best display configuration and adapt in an instant to changes in screen orientation and size. This should be done in such a way that the user doesn’t notice the site changing.

Check out some great examples of this here.

The Site Slinger understands the need to develop websites in a cost-effective, multi-platform manner. We love coding PSD to responsive design! You shouldn’t spend all of your resources managing updates or site variations across a seemingly infinite sea of different mobile devices. That’s why we build effective, high-value, responsive sites, giving you the ability to deliver content consistently and reliably to all visitors, whether they’re on a desktop, tablet, or smartphone.

If you’d like to discuss the options for translating your web design into a fully responsive site, please contact us, or submit a quote. We’re happy to turn your vision into a pixel-perfect site via our best-in-the-world PSD to HTML coding.

*For further reference on responsive elements see, “Understanding the Elements of Responsive Web Design”