Ted Talks – Beware online “filter bubbles”

An older but interesting Ted talk from Eli Pariser about “filter bubbles” created by customization of things like the Facebook news feed and google search results.

As web companies strive to tailor their services (including news and search results) to our personal tastes, there’s a dangerous unintended consequence: We get trapped in a “filter bubble” and don’t get exposed to information that could challenge or broaden our worldview. Eli Pariser argues powerfully that this will ultimately prove to be bad for us and bad for democracy.

Relevant and food for thought as I’m working on sorting algorithms in my new app.

Subdomain vs. New Domain or use a subfolder?

When clients want to start a new website or add a blgo/shop to there existing site they often ask if they should use a subdomain or set a new primary domain.  Well there are actually a few options to choose from, a new primary domain, a subfolder,  a subdomain, and a combination of these through the use of redirects.  Let’s me walk you through some of the advantages and disadvantage of each as well as a quick look at the use of redirects.

New Domains / Separate Primary Domains

A new domain can be a powerful thing, and is great for new opportunities and reaching new audiences.  A new domain would be a good option when the credibility can be affected for either the new domain (ie a blog) or the main company domain.  It is also a good choice if there is a different tone or style on the new site.  Value can also be found in smartly linking between the two domains.

We see this used in small to medium sized blogging companies, or publishing companies coming over from the magazine industry. It’s clear why the publish company used this method, it magazines where run different and had different subscribers, so different domains were setup. This is a trend we see disappear with some of the larger online publishers, like msn.com and yahoo.com. Although I think the trend of individual domains for digital publishing will continue due to smaller companies being targeted to a particular niche market. Even when these companies grow and are acquired they maintain the some domains to not loose users.

You might want to use if:

  • Your new website is significantly different
  • Your website needs to be tailored for different countries, for example youtube.ca, youttube.co.uk, etc.
  • You want different branding from your primary domain

Good:  Freedom!  Linking between the two domains.

Bad:  Can take a long time to page rank, can be a confusing message to user.

Popular Examples:

  • youtube.com – the video sharing service from google.
  • gmail.com & hotmail.com – These used to be separate domains but now are redirected to the mail.google/accounts.google.com and login.live.com accordingly. This I believe was done for the reason of branding, and the inclusion of services into the account, like social networking, videos, and other services offered by google and microsoft.com. However microsoft is still a great example, on Microsoft.com they feature the products and software they offer, bing is there search engine, msn.com is there news portal but features a search bar, and live.com is there webmail platform.
  • Ebayinc.com – the corporate site is kept separate from ebay.com, because it has a different look and feel, serves a different purpose and targets a different audience.

Subfolder

A subfolder is almost the complete opposite of using a new domain.  It is integrated into the site, and will be perceived as part of the site.  It is common opinion that the style and layout should remain the same in subfolders.  Search engines will recognize subfolders as part of the site, and will inherent the parents domain page rank relatively quickly.

You might want to use if:

  • It is a section of your website, such as a blog, or shop
  • The layout will remain the same
  • It is often used for categories in news and blogging websites

Never use a subfolder if you want the branding or server side technology to change!

Good: Integrated on the site, one channel, quicker recognition for page rank.

Bad: Hard to use a different layout or tone.  Can be tricky to use a different CMS or server side technology

Popular examples

  • Intel and Jobs at Intel – the primary domain is intel.com while the jobs reside at intle.com/jobs/, the Jobs site offers a different layout and feel from the rest of the Intel site. This is common among large companies job sites and corporate blogs, although they often have the same look and feel, why Intel has a different look and feel i’m not sure, it could be an oversight, or yet to come.

Subdomain

Using a subdomain can be seen as using a mix of both a new domain and a subfolder.  It creates separation from the primary domain, well still carrying some of it branding.  The use of a strong primary domain may make it easier for people to recognize.

You might want to use if:

  • You want keep brand recognition from the primary domain.
  • You are going to use a separate style from the rest of your web site.

Good:  Can use a different layout and technical setup than the primary domain and is somewhat easier to rank.

Bad:  Not as integrated as a subfolder, not as free as a new domain.

Popular Examples:

  • autos.msn.com & weather.msn.comMSN.com uses subdomains for different news areas, autos, to weather and travel. The topics covered are so expansive a subdomain makes it easy for someone who is only wants to find the weather information easy and convenient.
  • Craigslist.org – Craiglist uses subdomains for different regions, like toronto.craigslist.com, boston.craigslist.org etc. this keeps the branding and user interface identical but gives users separation and an easy to remember domain to browse ads for there city or country.

The use of redirects

Lets say you have mycompany.com, but you want to provide a site for customers to buy your products directly from you, you might want to use shop.mycomapny.com or buy-mycompany.com. buy-companyname.com might be easier for users to remember but you want to keep branding consistent, and not have users taken to a new site when they click on a shop menu item on mycompany.com.  So what’s the solution here? Redirects!

you can set up a redirect for buy-mycompany.com to include in marketing materials such as emails, brochures, or on posters, when he users enter the domain in there browser they are taken to shop.mycomany.com. This can also work in the reverse where a subdomain redirect you to a primary domain, but is much less common, and I wouldn’t use it unless you are switching over from subdomain to primary domain, or you’re using a blogging platform like WordPress MultiSite.
Some great examples of this are gmail.com and hotmail.com as previously discussed.

Conclusion

So which method is better?  A new domain, a subfolder or a subdomain?

Well it entirely depends, on the particulars of the project.  If the it is an integral part of your website and has the same tone and layout, use a subfolder.    You’re launching a store, and using a new server side technology like ecommerce software?  My recommendation would be use a subdomain, because the layout would be difficult to match, or you might want a slightly different layout.   Do you want to start blogging about a new topic that wouldn’t interest readers, or launch a site for just corporate clients?  A new primary domain might be the way to go, as it creates a clear distinction, and can have its own look and feel.

Popular Media Queries for Responsive Web Design

responsive-design

I’ve been working on a new design for a personal project (WindsurfPress.com) over the last few weeks and of course the design has to be responsive.  So what solutions do I have?  I could use one of the popular frameworks, or grid layouts.  Alternatively I could build my own responsive design from scratch.

There are a lot of great responsive boiler plates around, and my personal favorite is Bootstrap on GetHub.  It’s even highly customizable  with close to hundred (I didn’t count) components you can select or modify in the download package.  Even with this I still prefer to do things myself, because I find frameworks and boilerplates often bloated with functionality I don’t need, or they can’t quite meet the requirements of my design except with lots of tweaking that usually ends in a headache.

I do feel these frameworks and boilerplates are great things to hack apart, learn from, and use portions of in your designs and code.

The first question you need to ask is what are the common screen sizes to design for?  Well here’s my list and what most of the boilerplates and frameworks are using, and in my opinion the best media queries to use for responsive design.  And there’s only 4 of Them!

Large Display – 1200px and up

/* Large desktop */
@media (min-width: 1200px) { ... }

These are the new standards for desktop browsing, witht he most common resolution 1366×768 23.2% of the global resolution.  With over 60% of total screen resolutions using a display larger than 1200px, some stat counters have this number even higher, W3Schools reports it at over 90% above at 1024 resolution.  This is clearly the new standard, and what I design my default designs in now, and work down from there.

Dated Display – 980px and up

/* Landscape tablet and dated desktop */
@media (min-width: 980px) and (max-width: 1199px) { ... }

Displays with resolution of 1024, the old standard is only 14.7% and steadily falling.  Any smaller than that in desktops and laptops are slim, and a mobile version will be served up for those few, yielding them an excellent viewing experience anyways.

Portrait Tablets – 768px and up

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

This media query will be what most tablets server up to viewers.  Stats where a bit unclear in this area, but it is a growing segment, and will be served up on older desktops and laptops.

Phone to Tablets – 767px and down

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

This makes up a market of about 10% of mobile traffic, many small tablets will also use this media query.

Phones – 480px and down

/* Landscape phones and down */
@media (max-width: 480px) { ... }

By far the most popular resolution for smart phones.   About 30% of mobile traffic is below 480px, and a total of 14.5% of total web traffic is mobile.

These statistics are estimates only using data from Gs.Statcounter.com.  I’m not a statistics expert either and some of these numbers have been rounded and approximated by myself.

How to add a Widgetised area in a WordPress theme

In this tutorial I will show you how to add a widget to a theme template file.

Most WordPress themes have widget-ready sidebars, but you may want to display a widget somewhere else in your theme.  For example a home page with three columns of widgets.  If your theme does not have widget areas already set up or you need more then you need to create a new one in your theme files.

Continue reading “How to add a Widgetised area in a WordPress theme”