October 29, 2012
In Part 2 of our series, we’ll reveal the benefits and certain drawbacks of responsive design along with the design challenges that are involved.
Responsive design is the most flexible way to address the many screen sizes on the market today. When implemented correctly, a responsively designed site can be effective on practically all screen sizes, in both portrait and landscape orientations.
One of the primary benefits of utilizing a responsive design is its need for only one code base. In other words, utilizing a site built this way can eliminate the need to develop a separate mobile site or even build a native app – both of which require the use of additional time, resources and money.
Savings can also be seen when performing maintenance and updates on the site. Changes can be made in one place unlike having two sets of code for desktop and mobile. Once you publish those changes, the updates will conveniently be seen immediately across all devices – pretty cool stuff.
Your site’s web presence will also benefit from having one set of code. The site will live on one URL with one site path, allowing you to focus your search engine optimization (SEO) efforts. Additionally, the use of a single site path eliminates the need for site redirects, allowing mobile users to easily navigate between pages. Keep in mind that native apps aren’t accessible through a search engine, so a site that caters to both desktop computers and mobile devices is ideal for SEO. Search engines favor responsive design over having a desktop and mobile version with repetitive content. For instance, Google favors a single URL because it helps their algorithms assign indexing properties to your content. Bing is also in favor of responsive sites and even states that, “redirection to alternative URLs for mobile content…is not the approach we recommend for best SEO results.”
Despite the many advantages of utilizing responsive design, slower loading times can be a considerable drawback. The same images and graphics that are used in a desktop design are also loaded on mobile devices. Where a mobile site may be able to load smaller images and omit certain features or content, a responsive design site will potentially load larger images and content which can affect the speed.
Well-executed responsive design can load smaller graphics first, then conditionally load larger graphics if the browser is large enough. If this is done correctly, the effect on loading times can be mitigated and the site can deliver a speedy mobile experience.
In Part 3 of our series, we will uncover the enhanced user experience that responsive design can offer your site, and discuss times when a separate mobile site or native app makes sense. If you would like to find out how building a responsive site can help your business or client, please contact Smooth Fusion at 806.771.3873 or email@example.com.
July 13, 2011
Traditional Search Engine Optimization (SEO) isn’t good enough anymore. Today’s digital marketer must think beyond SEO. There are new techniques which now allow developers to link data on a page such that it can be understood, formatted, and reused. As a marketer trying to share information with the world, this is a good thing.
Let’s take a look at search results from Bing and Google for Aloha BBQ, a Lubbock, Texas eatery that caters ~80% of Smooth Fusion events.
Organic search results are no longer just lists of page titles, descriptions and URLs. Search results are enhanced with maps, ratings, photos, contact information, and all kinds of goodies. The question is “How do I get search results for my site to display neat stuff like this?” The answer is Microformats.
Microformats are simply standardized formats for HTML that allow you to add context to existing information on a web site. In other words, you can use the technology that already exists on your site, but just tweak the formatting to allow search engines and information aggregators (e.g. TasteSpotting) to pick up on the data and format it in their results. Google calls this technique rich snippets.
There are lots of microformats to choose from. For example, hCard is a microformat used for contact information. Markup your contact us page with hCard so that your address and phone number get mapped like Aloha BBQ above. If your site has events, use hCalendar so that search engines and other event sites can pick up on it.
At microformats.org you can find peruse a full list of useful microformats. Check out hReview for reviews, hAtom for news articles, hRecipe for recipes, and hProduct for products.
Microformats aren’t just nice for search. Users can use browser plugins like Operator to do neat things with linked data like add hCalendar events to a personal calendar, or add hCard contacts to a personal address book.
Microformats come with a small caveat. When you link your data with microformats, there is no guarantee that Google or Bing will format it like you specify. But nevertheless, you should mark your site up with microformats where possible. Doing so is usually easy and can result in big gains for visibility of your content across the web.