Noozhawk—one that neatly removes the white space on a web page that is created when there is a longer column of content than advertising.

" />thecreativitycure.com a sparkling yellow ExpressionEngine site to promote the release of their new book.  It did well for them, and now they are re-releasing their book in paperback. They wanted a site revamp to match the new book’s look.

" />Rainmaker Lawyer Consulting.

" />Northern Voice conference—a speaking role! I’ll be talking on Saturday morning about ways to improve commenting on your blog.

" />Truthdig has won the Webby Award for best political website.  It is a truly amazing achievement for Truthdig, who were competing this year with FactCheck, 92Y, The Nation and Politico.  This is Truthdig’s fifth Webby win overall, and we at Hop are honoured to have been, and to continue to be, a part of Truthdig’s growth and development.  Congratulations you rabble rousers you!!

" />Stanford Social Innovation Review just won min’s Best of the Web award for the best B2B redesign.

" />Click Here for Holiday Cheer

" />interactive needle, dial and slider, to display some important and dense data in an novel way for the Global Footprint Network, a nonprofit organization established to enable a sustainable future.

" />2012 ONA conference in San Francisco this week.

If you would like us to eat any clam chowder in a sourdough bowl on your behalf, please let us know.

" />Rose Levy Beranbaum (realbakingwithrose.com) had put up on her YouTube channel, I found out that her book “Rose’s Heavenly Cakes” was the first Kindle ebook published with embedded media.

" />National Park Central Reservations is a fresh, modern take on how to plan and book an adventure across North America’s national parks.

" />fun quiz for The Greater Good site, using ee-quiz.  It’s a new third-party module for ExpressionEngine that lets you make sophisticated quizzes with lots of options on a per quiz or per question basis.

" />Graduate School of Journalism at the University of British Columbia, but it’s now three years later, and some things have changed.

" />the Foursquare Church, a large, evangelical Christian organization based in Los Angeles.  We’re pleased as punch with the new site, and so are they.

" />Truthdig.com, getting nominated for an Online Journalism Award.  Congratulations, folks, and good luck on Oct. 30!

" />Rachael Ashe, our beloved office manager, left Hop Studios at the beginning of this year to pursue her lifelong passion: art.

" />danAppelcreative.image

" />Greater Good Science Center and its magazine have been at the cutting edge of the science of compassion, happiness, and altruism—the science of a meaningful life. Many of their articles revealed that the secret of a meaningful life was to simplify and focus on what was important: good advice in life. That’s good advice in a Web site overhaul.  We took that to heart, and here’s the result.

" />Candy Blog came to us again recently.  They wanted to modernize their site, which has been up and running since goodness knows when. The biggest change for us is that we added several new data types so that candies could be cataloged and cross referenced in multiple ways. Going forward, there’s no limit to how you might be able to receive candy information when you need it most.

" />controversy over EEMatrix / FF Matrix, and the rhetoric has faded a bit, but I’ve been left thinking about it and wondering what caused such a heated debate. I believe the greater issue that’s been exposed is the rift between the initial add-ons that were created by the EE community, and the current batch.

" />a long profile of Susannah Gardner, one of the partners here.

" />Nangle+Partners launches a new web site, built in ExpressionEngine and designed and developed by Hop Studios and Turner-Riggs.

" />The School of Library, Archival and information Studies at UBC came to Hop Studios to have their flat file site redesigned.

" />Reason Project launches their first ever Video Contest system, custom built in ExpressionEngine by Hop Studios.

" />Devot:ee, the place to get information on all things ExpressionEngine, has just announced this year’s AcademEE Award nominations. (Or maybe not just, but we just heard about it now.) Hop Studios has three nominations. Woah.

" />Pass the Quilt is a group blog focused on the Filipino experience.

" />Pat’s Papers under a tweaked site design and newly added CMS.

" />ExpressionEngine Roadshow. We had 80 attendees, from 20 states and provinces, 14 speakers, 2 parties, and 1 heck of a good time.The conference went extremely well, and I’m not just saying that!

" />Heavenly Cakes, the brand new cookbook written by our client Rose Levy Beranbaum.

" />Gnomedex in Seattle last week.

" />@hopstudios

" />Gnomedex 9.0 in Seattle.

" />

Work With Us!

Get A Quote

Blog

Innovative Ad Behavior


 

At the beginning of the summer, Hop Studios set up an new type of ad placement with our client Noozhawk. Their timely, seasonal Summer Fun section merged news stories about summer activities for kids, with a browsable directory of activities, camps, teams, and workshops. Traditionally speaking, this kind of content is catnip for advertisers—it’s specific, reaches people looking for information related to a specific type of service or product, and in this case, targeted parents of children who had the money to spend on their kids this summer.

We thought it was an ideal time to try a new way of presenting ads on the web site.

We started with the commonly seen stack of ads down the right side of the page. At the top, you see the top ad. Scroll down a bit, there’s more content and the next couple of ads in the stack. So far, so good. But we have long been frustrated with what happens next: scroll down far enough and on pages with more content than ads—which can easily happen in a directory with a lot of entries—the right column ends up just being empty space. What a shame to lose the possibility of showing an ad in that space, space already reserved for just that purpose.

Thanks to some creative thinking and the magic of Javascript, our solution was simple: when the reader scrolls past the final ad, where white space would normally appear, we moved the first ad down to there, and then the second, the third… you get the idea. Basically, no matter how long the page was, the ads remained visible alongside the viewable content, scrolling in order, 1, 2, 3, 4, 5, as the page was scrolled. You get a more pleasing, symmetrical design with no white space in the right column and (most exciting for advertisers), a second or even third chance that an ad could be viewed.

Animated GIF showing Noozhawk page with scrolling ads

It’s a neat trick we haven’t seen before, and one we think actually adds (pun intended) opportunity and convenience to the user, publisher, and advertiser.

 

Are Visitors Blocking Your Site’s Ads? Find Out, and Do Something About It


 

If you’re web user that uses ad-blocking software, you’re in good company. And by good, of course, I mean there are a lot of you.

For Web site visitors, there are lot of upsides to turning on ad-blocking software: more privacy, faster page loads, and most of all, relief from distracting ads. In fact, for most web users, there doesn’t seem to be a downside—ad-blocking software subtracts out annoying, perhaps even malicious, content from valuable content. The idea that advertising-supported sites may suffer or disappear because they can’t deliver pages views and clicks to advertisers isn’t on their site visitors’ minds.

But when a publisher’s web site visitors opt to block ads, the publisher loses click-throughs and page views, the currency of the online advertising market. The consequences of this are dire for sites that rely on advertising to survive.

The strategies publishers have deployed in response have largely been unsuccessful. For example, in our experience, very few visitors will pay even a small amount of money to turn off the ads on a given web site. It’s difficult to ensure you’re not displaying tasteless, obnoxious, and scammy ads if you’re using an ad network instead of selling ads yourself, and almost everyone does use ad networks to maximize returns and minimize lost page impressions.

Enter PageFair, an Irish company started in 2012 that lets online publishers measure how many of their visitors are blocking ads, and then helps them to display alternative non-intrusive advertising to those visitors. PageFair says they will show advertising that is easily identifiable as advertising, non-intrusive, and easy to turn off. In other words, visitors who block ads still see ads, but they see ads that aren’t annoying, distracting, or malicious, and they see them on your site, which, we hope, is a worthwhile, well-run and honorable endeavor. And, it turns out, since most people use ad-blocking software because of bad and overwhelming ads on bad sites, they seem to be okay with ads that don’t play those games—according to PageFair.

A 2013 PageFair report (PDF) said that of 220 sites they monitored, the typical ad-blocking rate was 23%, and that use of ad-blocking software is growing by 43% each year. Most interestingly, PageFair says that the click-through rate for their alternative ads is the same as for web users that don’t use ad-blocking software—good news for publishers.

If you’re not sure whether you’re losing money to ad-blocking, you can install PageFair for free to simply track your traffic and give you details on ad-blocking usage by your site’s visitors.  It’s worth checking out.

P.S. If you want to use ad-blocking software, but want to know in more detail what you’re blocking (and revealing) for the web sites you visit, consider Ghostery, which lets you choose on a case-by-case basis what you will block, per site and per ad-network.

 

How to Defend Your Site from Intrusions, Threats and Really Annoying Punks


 

Hop Studios has been up and running for 13 years, and every year, one or more of our client’s web sites has been hacked in some way. Some of these have spectacularly obvious—home pages overwritten with strange content—but most have been relatively hard to spot immediately, regardless of how significant a hack it was.

Typically, a site is hacked for one of two reasons: to gain access to the personal information of its members (from email addresses and passwords to credit card numbers) or to put code in place that exploits the web site’s visitors. Whatever the purpose, having a web site hacked is bad news for the web site publisher, who must re-establish the trust of their audience, spend a lot of time and money on cleanup and prevention, and even in some cases have to deal with legal issues.

We’ve had a client whose site was hacked to add small links to gambling sites to give those sites a boost in search engine rankings.  We’ve also had sites that were hacked for political reasons.

Now, if you’re saying, “Hey, if your sites are getting hacked that means that you suck!” I would of course return, “We do not!” The truth is, although we’re careful and conscientious, the possibility of a web site hack is real for any web site built by any developer, much in the way any house is potentially vulnerable to a determined burglar regardless of who built it. Of course there are things you and we can do to make hacks less likely. Here are a few tips.

When a site gets hacked, the big question is usually “how did this happen?” and it can be unsettling to realize that often it’s hard to determine how with 100% accuracy, at least not in detail. The least-detectable hack, of course, is when the hacker has obtained a password: for FTP, or the content management system, or the site database server, or… . This is why we are very careful with creating and handling your web site’s passwords. We change them from time to time; use complex passwords with capital letters, numerals, and punctuation or that are very long; we don’t email them. We recommend you do the same.

But passwords are really just the start. As web software has become more complex and multi-layered, hackers have more opportunities and have developed better tools to exploit common security errors. Not surprisingly, this is one of the reasons we’re always keen to update your web site software, whatever it may be, to the latest version. The older your software and server—and that means every part of it, not just your main admin tool—the more exploitable your site is, as a general rule.

The good news is that as hackers have gotten more sophisticated and pernicious, the folks offering tools to detect and prevent them from getting into your site have gotten faster and better. Even if you don’t have time or budget to update everything all the time, you can use Web-based monitoring to look for trouble as it happens.

One we are especially pleased with is Sucuri, a 24/7 web site monitoring service that verifies your site is clean, watches for unauthorized changes to your web site’s files and pages, and alerts you immediately when suspicious activity occurs. They also can assist with cleanup when a hack happens. There are several levels of Sucuri service depending on your needs, but for most web sites, the $89.99/yearly package will do the trick, and we can order and set it up for you.

Sucuri monitors your site internally (have files changed on your Web site’s drive?) and externally (are your site’s Web pages transmitting malware and viruses to visitors?). The service scans for changes to your files, content management system, SSL certificates, and domain records. Best of all, if your site is hacked, their cleanup response time is typically a few hours.

Although we recommend you sign up before your site gets hacked, you can certainly sign up after it happens and Sucuri will assist with cleanup and prevention of future hacks. It’s important to note that this company isn’t a security consulting service, but is more like a home security service that puts detectors in place to warn the homeowner of signs that there might be a break-in and provides a response team for dealing with trouble promptly.

You’re probably wondering if this is something you really need to worry about, and I’m sorry to say, you probably do. A hacked site can leave you with legal liability, or at the very least a very upset group of visitors and customers.

If your Web site allows users to register, offers products for sale via an installed shopping cart, has a lot of traffic and search engine ranking, or you’re likely to be targeted by bored or malicious internet hackers, we suggest you seriously consider Sucuri (or a service like it).

 

It’s Time to Update the Search on Your Site


 

Customization options for Google Custom Search Engine

Though we commonly refer to web browsing as “surfing,” most of us aren’t surfers at all. We often rely on search engines to take us directly to the information we want at that moment. If your site is more than thimble-sized, offering search to your visitors is a no-brainer.

There are two ways to go with site search: you may use ExpressionEngine itself (with or without additional add-ons), or you pick Google’s proprietary search algorithms via its Custom Search Engine service, a free tool that allows a Google search to be embedded in your web site.

Although we love the content management system ExpressionEngine at Hop Studios, we frequently replace EE’s search tool with a customized installation of Google Custom Search. (There are certain reasons to stick with ExpressionEngine’s search functionality, but usually Google’s advantages win out; it’s pretty hard to beat the most popular search engine in the world.)

Although there is no cost to using Google CSE, the Google logo is required to be displayed on the search box and search results page, and Google Adsense advertising shows up in the results (though you should be getting a portion of that revenue; let us know if you aren’t!) On the other hand, if you are willing to pay, for about $100 per year minimum you can remove the branding and the ads by using Google Site Search.

Here’s the important bit: Google is always improving CSE and in late 2013, Google made some bigger changes and improvements to the way Google Custom Search Engine works. However, to get them, you need to upgrade your old HTML code. The latest CSE version has:

  • instant search completion as you type
  • gives the site owner direct control over additional autocomplete results
  • sorting by date or by relevance
  • better spell checking
  • integrated image search results
  • and finally—and for us, this is the big win—the CSE code loads asynchronously, which means that page load time for your site is reduced. (Asynchronous code means that the page can load its other elements as needed, instead of waiting on CSE to finish displaying.)

If you want to keep up to date on the CSE changes, you can read the Google Custom Search blog … or you can just let us geek out for you and tell you the important bits… like in a blog post… like the one you’re reading now smile .

Finally, if you want to get truly fancy, it is also possible to customize the way Google CSE records (indexes) your site data, and how it displays results—so you can offer even better search customization. Details are available if you want them, but this isn’t necessary for most types of sites.

What does all this mean to you today? If you use Google CSE now, you really ought to update your CSE code—or ask us to do so for you—so that you’re offering your visitors the best possible search experience on your site. And if you don’t use Google CSE, you may want to consider switching to it.

 

Responsive Design Requires Responsive Ads


 

Responsive web design is all about setting up a web site to display well across the many varieties of computers, monitors, screen resolutions and screen sizes—especially mobile platforms—and it’s a rare designer who hasn’t wrestled with this issue more than once by now.

Typically a responsive design will allow site visitors to easily view the same page on different platforms without a lot of zooming, resizing or scrolling. When a design is “responsive,” the page automatically changes how content is displayed to best suit the the platform, fluidly adjusting font sizes (larger body text on phones, for example), image sizes, and of course matching the overall width of the page with the available viewing area.

Functional responsiveness is also critical. If you’ve ever struggled to make tiny drop-down navigation menus work on a tablet or phone, you already know that some of what works on a traditional computer with a mouse and a large screen, just doesn’t work on a smartphone. A good responsive design accounts for functionality differences like text fields, checkboxes and drop-down menus, just as it does the content display differences.

However, one of the areas where responsive design has often run into display issues is with advertising. Ads are typically served up as images or multimedia files of a fixed shape and size. So while you might have a large ad at the top of the page, and a square ad in a story—what should be displayed when someone comes to your site on a small screen? Should the top banner be hidden, and the square become a rectangle? And how do you track impressions if the screen size changes (say, the person rotates their tablet from horizontal to vertical)? Even if advertising is served responsively (small ads to small screens), it’s even more rarely designed responsively. Creating multiple versions of the same ad for each platform is a solution that is easy on the site visitor, but tough on the advertiser and the publisher.

Recently, we’ve learned of a number of advertising agencies promoting use of responsive ad creatives. In 2013, Google’s Doubleclick for Publishers added a responsive ad unit. The Internet Advertising Bureau publishing a report on responsive design and ad creatives in Sept. 2012 that is an excellent place to begin learning about this topic. So it’s now possible, if your site is responsive, to serve creatives that are just as responsive.

I’ll leave you with a few links to explore if you’re interested in responsive advertising, and a word of caution: Don’t forget that you’ll need to test your responsive designs extensively to be sure they are effective. We recommend you review your site analytics data and pay particular attention to the platforms most commonly used by your web site visitors to see how often, comparatively, people come to your site from a hand-held device. You might be surprised!

Links:

 
 
Web Design and ExpressionEngine Development Consulting - Vancouver (BC) Canada