Blue Utopia Blog

Our approach to website templates

Mon, Jun 13, 2016 - 02:57 PM

Today, we’re launching over 400 new template-themes that make publishing a polished, professional, mobile-friendly website as easy as you can possibly imagine. But as we do that, we thought we’d write about templates and why our approach is different -- and better, at least for our audience.


Website templates sound great but hey can be a difficult feature to do right and deliver end-value. If you've ever scrolled through and purchased a template, you've encountered the problem – a brown and tan colored template for selling coffee beans. It’ll have a bunch of beautiful pictures (that you can’t use) and neat CSS and JavaScript effects. If you’re not selling coffee beans though and don’t want all the fanciness, then you end up with a bunch of useless JavaScript and CSS files and images that you can’t use. Now you’re faced with the considerable task (and cost) of designing a site that just hours ago looked awesome.

We take a slightly different approach to our templates.

At the onset, we divide the initial decisions into two parts. Part 1 is the template choice, which, for us, is limited to container layout and default content and always minimal JavaScript files. You can think of this as the wireframe and there is no color or ‘look’ considerations at this stage. The second step is the color theme but it’s more than just color. When you select a theme, we apply a combination of textures and colors that look great together.

Because we've built hundreds of political campaign websites, we have considerable knowledge of what content needs to be displayed and how. For example, a series of standard calls-to-action, a donate visible button, upcoming events, a list of endorsements, to name a few. We use that knowledge and build it into the templates and this saves our clients a lot of time and money.

Then we enable webmasters to have full control over the template files. Yes, it’s important to enable small campaigns with no technical expertise to have great websites but it’s just important to enable a webmaster to take much more full control where necessary.

Lastly, we complete the circle by providing all the support services around setting up, hosting, and supporting your website. This is critical for campaigns that normally don’t have resources to manage technology and deal with the inevitable technical issues that pop up.

  • Share It!

Tags: website

What is Responsive Design? (The Basics)

Wed, May 4, 2016 - 01:43 PM

Responsive design gets a lot of airtime but for people who don’t regularly create websites -- which is a lot of people in the political campaign world -- it’s not always clear what it means. So we’re going to give a quick background and explain the basics.

This post is by no means a full explanation. It does not include the implications on search, or conversion, etc. It is simply a basic description of mobile display and what responsive means for someone just starting to try to figure this out for their own campaigns.

Windows Mobile was relevant and ColdPlay was cool *

In the early days, smartphones were equipped with a mobile browser but website formatting was mostly lost in translation so mobile sites tended to look a little jumbled and much more text-oriented --- buttons were translated to text, containers overlapped or collided and most html was stripped from the mobile site.
* We're just kidding around. Coldplay was never cool.

iPhones, Android and Justin Bieber

Starting in 2007, mobile traffic starts picking up and mobile browsers get much better. Within a year or two, most website CMS's implement technology that makes your standard website to be correctly displayed on a mobile device. This was generally referred to as 'mobile-friendly' and what you ended up with was a pretty nice experience but where you needed to zoom to see the full screen or read small text. Anyone who remembers how great the zoom feature was at the time it was introduced can easily picture this.

The reason you had to zoom was because of the hard-coded width of websites. In the years leading up to this stage, almost all monitors were roughly the same size. As a result, websites were designed with widths that were specific to standard monitors. At about this time, when displaying a website on a mobile device became reasonable, all websites were designed for a regular full-sized monitor.

The result was that your website displayed great but since your mobile screen was only 400px wide and your website was hard-coded to be 900-1280px wide, you'd only see 40-50% of your website at a time. The other content was there. You just had to scroll over to see it. So mobile-friendly is a giant leap forward but text is still hard to read and forms are not easy to complete. Both require scrolling and/or zooming in.

Of course your grandpa has a smartphone and R.I.P. Prince

With responsive design, the website displays differently. Think of it as displaying your content in terms of layers and blocks. In the image below, the objects that are displayed in the monitor are treated more like independent objects (blocks). On a mobile device, the action buttons (which are just to the right of the slider on a desktop monitor) automatically display on the layer below the slider on a mobile device. Same with the containers below the slider - instead of displaying side-by-side, they are displayed on top of each other.

In addition to your content layout responding to the device, there are also rules for text that make your text a readable size on all devices. The end result is a display where all of your original content displays almost exactly as it would on your full monitor but in a very different layout -- typically much more vertical -- that works better on a small mobile device.

  • Share It!

New website system with mobile-friendly templates

Wed, Aug 19, 2015 - 02:29 PM

mobile-website-templates

Earlier this year, we began seeing more traffic to our client websites coming from mobile devices.  As a result, we began revising our website templates.  Today, we we’re happy to launch Blue Utopia’s new web publishing system.  Like the previous award-winning system, the new system allows you to create a great-looking website with an enormous number of features in literally just a few clicks.  Unlike the previous system though, the websites are now all mobile friendly, and come with a lot of new enhancements. 

Highlights of what’s new:

Mobile Display. The new system makes use of a new templating system that automatically responds to your visitors' device --- pc, mobile, tablet, etc -- and displays properly on any device. 

Hundreds of canned options. There about 20 color themes for every template, meaning you can select from about 250 different template+theme options by doing nothing more than making two selections. This makes is very easy for the novice to publish a full great-looking site. 

Easy Basic Customizations. If the above themes don’t give you the exact look you’re looking for, we have now implemented LESS variable system. This allows you to choose colors, fonts, background images and more and automatically update your css files. This gives a lot of control over your look and feel without having to modify css files directly, making it perfect for the intermediate user. 

Much More Flexibility. You now have the ability to leave your css files (those that control the look of your site) in the cloud and take full advantage of our continuous improvements. We are constantly tweaking and making our templates better and when you rely on these cloud files, you automatically get the benefits. However, some webmasters want more control over customization and now your webmaster can download the css files locally and make comprehensive customizations. This gives your advanced webmaster much more control than they've had in the past. 

To learn more about our website system, go to blueutopia.com/website 

Current Clients.  This upgrade is included at no cost.  So if you are thinking about an upgrade to your site, this is a great opportunity to get it.  We will even help you do it.  Simply start a support case, let us know you want to go through this template upgrade process and we’ll prepare your system. 


  • Share It!

Tags: mobile, website,

What makes a website mobile-friendly?

Wed, Aug 19, 2015 - 11:17 AM

For a long time, in the early phases of mobile, it was enough if your website displayed okay but required the user to zoom in, for instance, fill out a form or read longer text.  In Apirl 2015 though, Google changed the conversation about mobile, making it clear to all that it was time for companies that derived traffic from mobile to take the stet of being mobile-friendly, not just display on mobile device without breaking.   I wrote about that effort from Google and what it meant here

So if you have a website or need to put one up soon, do you really need to care and what does mobile-friendly mean?

Do you need to care?  The answer is probably yes.  At this point, pretty much everyone who generates website traffic gets at least a reasonable part of their traffic from mobile.  Some more and some less but even those that are not very mobile-centric are still probably getting enough traffic to matter.  We wrote about mobile traffic here

The next question is what does mobile-friendly mean?   For this, there is a list of things that are required.  Not every item is required to be considered mobile-friendly but the more you have the better your site will display and perform.    

REQUIRED:

  • You do note require users to zoom to see parts of the page.
  • You don't need to use software like Flash to see it.
  • Places links far enough apart. 

OPTIONAL BUT IMPORTANT FOR THE USER EXPEREINCE:

  • Quick to load.  Not just images but all of your css and javascript files.  This usually requires compression of your files.
  • No large images.  For instance, the sliders (carousels) that have been used on homepages in recent years are still ok but there are changes to the approach.  Instead of an image with text, they need to be an image with text overlay.  That way, the text still displays on mobile instead of sizing down in proportion with the image.    

Is your site mobile friendly?  You can test it here:  https://www.google.com/webmasters/tools/mobile-friendly/

  • Share It!

Tags: mobile, website,

Mobile websites: When to make it a priority

Mon, Aug 10, 2015 - 11:07 AM

In April 2015 Google announced it was updating its search algorithm to show preference for sites that were mobile-friendly.  This announcement brought some real panic and craziness for a while but has since settled a bit.  I wrote about the actual impacts of this change here.

In short, most of the panic about Google’s changes was unwarranted.  However, the announcement did usher in some useful milestones. 

For years we’ve been hearing about the dominance of mobile.  Mobile was where it was at.  All mobile, all the time.  But how much do you need to care about mobile?  The answer has been, it depends – it depends mostly, on how much of your traffic is mobile. 

There is no shortage of reports about overall mobile traffic.  One report by ComScore in 2014 noted that 60% of all traffic was coming from mobile devices but that was for all traffic, including from mobile apps.  Another study by The Brick Factory, which serves the political space, pegged mobile traffic in the range of 20%.  Here at Blue Utopia, we run websites for hundreds of political clients and have seen mobile traffic grow from around 8% in 2014 to around 18% in 2016.  That’s considerably less than the rates seen for news and media, as you would expect, but probably more in line with the expectations for a political campaign website.  

So back to the question of whether you need to care or not.  Up until 2015, the vast majority of mobile traffic was to core activities like mobile apps and news and entertainment, which are inhernetly aligned with the consumption of mobile content.  But starting in 2015, mobile behavior began to spill over into other areas, including campaign websitess.  Thus the doubling of mobile traffic we've seen here with our own client web traffic.  In 2015, we launched all new mobile-friendly website templates.  

We wrote about what mobile-friendly actualy means here.  

To see if your own website is mobile-friendly, plug in your domain into the testing tool here:    



 

  • Share It!

Tags: mobile, website,

Blue Utopia pushes button. Wins Pollie Award

Thu, Jul 25, 2013 - 11:02 AM

We won a 2013 Pollie for best state/statewide website. 

In a category where campaigns will spend tens of thousands of dollars on a website, our client's website (No On I-1185) won from a standard template from our click-n-publish website system. 

Related Article

  • Share It!

Tags: website
[6 total]