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 ( 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.

" />, 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.

" />Picture Kitchen came to us for help in bringing their half-completed ExpressionEngine site to the finish line.

" />

Work With Us!

Get A Quote


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!



Dev tip : Embed a Twitter timeline on a website without OAuth


To embed a twitter timeline or a tweet feed on a website, you have 2 choices : use the widget provided from Twitter or use their 1.1 API.

Using the 1.1 API

To use Twitter 1.1 REST API, you’ll need an OAuth or an app token. This API very complete and you can do whatever you want with the data you get.
The worst part is, you are limited on number of queries per time.

All info about available data :

Each query has a rate limiting, divided into 15 minutes intervals :

It’s easy to use the API to display tweets on a website with AJAX. But as it’s limited, if there are to many visitors, your queries will be rejected.

The best way would be to get tweets on server side every 5 minutes, save it into the DB so you won’t query twitter api each time the page is loaded.

Using the Twitter widget

This widget is really easy to use. Twitter even has an assistant to help you set it up :

The Twitter WidgetBut this widget is quite limited. Its main drawback is that you can’t customize the way tweets are displayed. You can always use CSS but it’s limited and it also has a few customization options but nothing really advanced.

More info there :

Cheating the Twitter widget

To avoid REST 1.1 API and its limitations, Jason Mayes has created a JS script to get tweets from the widget. So you avoid OAuth and limited queries and you get only tweet data as JSON so you can process it the way you want. Very handy !

You can get more info on his website :


We’ve Added an Accent to Our Office


Louis DekeisterHop Studios has added a new accent to our office.  Not a color—a voice, attached to a developer.  His name is Louis Dekeister, and he joins us from France.  Ooh la la!

He’s a top-notch PHP developer with experience in several content management systems and a love for clear, readable code. He has just moved to Vancouver from across the pond, and so far seems to be enjoying our rustic native lifestyle.

We expect that Louis will do great things, not the least of which will be helping with the growing client roster here at Hop Studios. We also hope to increase our add-on development - breadth and depth of features, and to offer a broader range of services, such as e-commerce, app development and additional Web marketing and SEO work.

Take a peek at our staff page for a glimpse of Louis (and the rest of us)!

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