Hop Studios is Canada's top ExpressionEngine
Web consulting, design and development firm.

ask about your project

Work With Us!

Get A Quote


Dealing with Outdated EE Add-Ons

At Hop Studios, we all love ExpressionEngine’s wonderful community of developers. They come from diverse backgrounds, and have created so many excellent and powerful modules, extensions and add-ons. But sometimes those developers stop supporting their add-ons for one reason or another. The result? You end up frozen at the version of EE that works with your add-on, or you have to give up the add-on and re-develop your site in order to upgrade ExpressionEngine.

Neither of these solutions is healthy for your site. Postponing the upgrade only pushes the problem to some point in the future when you will be forced by a security concern or a necessary improvement to upgrade, this time under time pressure. And everyone gets irritated when you go back to remove code that used to work just fine, either giving up that functionality entirely, or switching to an alternate method that might be less efficient or simply a big investment of time.

We don’t think you should have to choose between two bad options, especially not when there’s another alternative: have us bring that unsupported add-on back to life. Put our years of experience with ExpressionEngine development to work for you. We’ll happily revise your unsupported add-on to be compatible with the upgrade you want to make, no compromise necessary. And we can help you keep that add-on current with future versions of EE as well.

We’ve built a multitude of ExpressionEngine sites, and we’ve created quite a few of those ExpressionEngine add-ons ourselves, so we get it: you should be able to have and eat your cake! [Editor’s note: Yes, I am saying that hiring us means you get to eat cake. Go ahead, we don’t mind a bit.]


Introducing: Hop Super Pulldown

Standard pulldown menus make it easy to re-use common data quickly, and without a mistake. But wouldn’t it be nice if you could also dynamically add an item to an existing dropdown menu? With Hop Super Pulldown, you can!

The Hop Super Pulldown add-on works within the ExpressionEngine entry editing screen. Quickly select one of the existing choices, or create a new one right then and there. Usually with computers you have to trade flexibility for consistency, but not this time. Build your dropdown menu options as you go, and then start using those new options in the next entry you create.

How would you use this functionality? Here are a couple of ideas to get you started:

Example of Hop Super Pulldown in use

  • Create a Hop Super Pulldown menu that contains photo credits you commonly use, but quickly add new ones as necessary.
  • Create a menu with names of neighborhoods, and let people add new ones.
  • Make a poll where people can vote for the best team name, or write in their own suggestions.
  • What about a menu where you can enter a flavor, but you don’t know at the outset what flavors will be? Use this menu, and let the choices grow over time.

We’ve gone the extra mile to make sure Hop Super Pulldown works with Grid and Matrix. And yes, you can include HTML in your list!

Hop Super Pulldown is available on Devot:ee for $6 and is compatible with ExpressionEngine 2.8 and up. Try it today—you’ll wonder how you did without it!


The 20 Largest ExpressionEngine Sites

People often ask us, “Can ExpressionEngine handle my HUGE TRAFFIC requirements? Because I’m planning to get [one gazzillion hits or something like that] and I heard Drupal or Wordpress is better for big sites.”

The answer is: Yes, EE can handle your traffic, if you know how to set it up properly and if your hosting provider is reliable and robust.  Here at Hop Studios, we have been building large ExpressionEngine-powered sites for years.  Nevertheless, until we first researched this list, it was hard to find concrete examples of enormous sites to back up our assertion that EE could handle large traffic.

So we made this list. And because we like to share, below is the current definitive list of the 20 largest ExpressionEngine Web sites. Why 20? Because 21 seems gratuitous.

But wait… What exactly defines “largest”?

That’s a tough question, because some sites that have a huge amount of visitors might still be just one page in scope. Or a site that serves a niche audience and has a low global Alexa ranking might have crazy active forums. We consulted with many other EE professionals to come up with the following important factors, which seemed to be the consensus about what determines “largeness.”

  • number of unique visitors and pages / month
  • number of entries and comments
  • number of members and forum posts
  • awards and buzz

Combining all these data points from an initial list of more than 150 candidate sites, we came up with the ranking you see here, which was based on all the data we gathered plus a little bit of what we like to call “magic ordering sauce.” You might argue with the specifics of the order, however, we guarantee that you’ll be impressed, and surprised, by this list.

The 20 Largest ExpressionEngine Web sites, as of February 2015

  1. Garmin: many of their mapping sites
  2. Barack Obama: You’ve heard of him, yes? This is his campaign site*
  3. Periodicos Zocalo: newspaper in Mexico
  4. Trend Hunter: trends and gossip
  5. iLounge: everything about the iPod and iPhone

  6. Totally NSFW: adult content (porn)
  7. Penny Arcade: comic strip
  8. Pizza Hut: Get a pizza RIGHT NOW
  9. CBC.ca: Many of their show’s sites
  10. Vertical Response: Email marketing tool

  11. Playbill: Theater business news
  12. Fodor’s: the travel guides
  13. Gear Live: gadget news
  14. My Newsletter Builder: Really? Two email marketing tools? Yep.
  15. VKMag.com: online magazine

  16. A List Apart: resource for CSS and design
  17. Getty Images: The story behind the photos
  18. Alternative Press Magazine: that’s what it is
  19. The Gospel Coalition: Religious ministry
  20. Truthdig: progressive news site

(Items in green are new since last year; other sites may be new to the top 20, but were on the list last year.)

* Change.gov used to be the top site on this list; I’ve retired it because it hasn’t been active since 2009, though it would still easily rank in the top 5.

The largest confirmed traffic we know of is Garmin at 23,000,000 pages per month. The largest number of entries we know of is Periodicos Zocalo: 1,200,000. ZOMG.

If you’re looking for the names of big companies that use EE, the list includes Stanford, U of Miami, MIT, Mailchimp, Cisco, Boobieathon, Sony, Apple, Disney, Nokia, WB, Ford, BBC, Nike, Adobe, Toys R Us, Vodafone, GOP.com and Democrats.org. However, the sites (or sub-sites) of these big companies do not deal with the large amounts of traffic that the ones listed above do, and this isn’t about name dropping, this is about BIG SITES.

Much of the raw data we gathered is available for you to use, so long as you credit us. Take a look:


Click here to view the spreadsheet directly

Also note, the spreadsheet is a living document, so it may in the future show a different ranking than the list in this article does. That’s because we’ve learned more and updated it.  The list is still the list, but the spreadsheet reflects live data.

Special thanks to the folks on Twitter who chipped in with suggestions, and to some folks who couldn’t help us on the record.

Please let us know of any missing sites, either in the comments or by contacting us directly. Thanks!


How to Prepare your Site for High-Density Displays

If you've seen one of Apple's new 5K retina display iMacs or one of the other high density computer screens that are becoming more common (especially on mobile devices), you already know that on those screens, things can appear sharper, crisper, and easier to read -- basically, everything just looks better. Is your site ready for its close-up?

If you want to see what I'm talking about, your best bet is to borrow a high-DPI display from someone, or just walk into an Apple store and pick up the latest iPhone or iPad. (In fact, Hop Studios got an email just last week from a client looking at his own web site in an Apple store. And yes, he did email us directly from the store.)

The resolution of a screen is measured in pixels -- the number of individual dots that a screen can display -- and high-density displays are no different. But they are capable of displaying far more pixels in the same amount of space. Where a regular screen shows one pixel, the high-density screen shows four, or even eight or 16 -- depending on the screen pixel size. More pixels equals more detailed imagery and text, and a more readable, attractive web site. For mobile, the gains are huge: you can fit more on the screen and it'll be easier to read and use, but there are benefits for web sites as well. Perhaps more importantly, there are downsides: graphics created for standard displays show up on high-DPI displays fine, but they can look slightly blurry or jagged. Here's a quick visual representation of how this actually works:

Regular densityHigh-density

Today, in late 2014, not every site needs to be ready for high-density displays, but if you fit any of the criteria below, it is probably time to upgrade your site's images:

  • your audience mainly views your web site on new high-res displays, or on mobile devices
  • you rely on your high-quality imagery, like if you are a store, or if you feature photographs prominently
  • your audience is the kind that is impressed and influenced by sites using all the latest bells and whistles

There are several strategies for accounting for high-DPI displays:

  • Provide alternate graphics for high-DPI monitors. Yeah, it's a pain, but there's really no substitute for creating graphics of the right resolution and size for each screen you're trying to support.
  • Use fewer images and more fonts and vector graphics. This sounds obvious, but also is sometimes impractical. I'm not saying you should get rid of all your photos and logos, but I am suggesting that you ensure that your web site design takes every advantage of the alternatives to images that are available now. For example, you can use icon fonts instead of graphics for email/print/other iconography. And use actual text when you're displaying text so it scale crisply at any size.
  • Use code to create graphics. CSS can be used to create some fairly sophisticated visual effects that, since they originate with code, scale well in any direction. Buttons, drop shadows, curved edges and other visual effects can all be used in place of graphic elements.
Graphic buttonClick me!
This button is a graphic, and won't scale well.This button is created using CSS code, and will scale well.

Realistically, all of the techniques I describe here are fairly technical and you can't just snap your fingers to make it happen. Your best bet is to talk with your web designer about your audience and your goals, so you can figure out the best custom solution to your situation. You will need to find the right balance between the expense of development, site speed, and flexibility in design and content, so it's quite likely that a combination of strategies will be the way to go.

If you're groaning over the necessity for this, remember that high-density displays aren't going away. In fact, they are going to become more and more prevalent. This means, of course, that if you don't take on this task now, it will become necessary at some point in the not-so-distant future!


Job Opening: Project Manager

We have an immediate opening for a full-time intermediate project manager.

We’re Canada’s leading ExpressionEngine design and development firm. You’ll be working on interesting and meaningful projects, using the latest tools and techniques, for clients in multiple countries. We’re looking to add a key role to our team—someone who can help grow our business by managing existing projects, improving our internal processes, and ensuring that new clients are brought on successfully.

The project manager will be responsible for proposal writing, project estimation, project planning, managing expenditures, scheduling, co-ordinating resources and personnel within the competing priorities of our existing workload, and managing sub-contractors and freelancers.

The best applicants will have many of the following skills at the “Very Fine”, “Near Mint” or “Mint” level, in something approximating this order:

  • Proven success in managing web site development
  • Experience using shared project management tools like Basecamp
  • Familiarity with mobile design and development issues
  • Excellent written and phone communication skills (we do most work remotely)
  • Experience and skill working with ExpressionEngine
  • PMP certification or equivalent
  • Experience and skill working with other CMSs
  • Advanced Microsoft Word, Excel, PowerPoint skills

Yes, that’s a long list and no, you don’t need to be expert in everything on it; we’re primarily looking for someone with experience planning and executing Web site projects—the rest will make you stand out and get noticed. Be sure to mention if you have previous experience doing other aspects of online or offline development; being well-rounded would be considered an asset.

What are some other requirements?

  • Self-starter with healthy curiosity
  • Ability to keep tabs on all the details without losing sight of the big picture
  • Tenacious attitude towards tracking down loose ends
  • Good at hitting deadlines with a thump
  • Excellent emotional intelligence
  • Can foster teamwork and excellence among co-workers

Who can apply?

  • you must want a permanent position (i.e. not part-time or contract)
  • you must be able to start on Jan. 26 or so (i.e. you can give notice now)
  • you should live, or be willing to live, in Vancouver, BC, Canada
  • you should be able to work in Canada

Who are we?

  • We’re a 12-year-old company with a focus on media, non-profit and educational Web sites.
  • We’re fun to work with (if we’re allowed to say that about ourselves [we are -ed.]), and our clients are excellent as well; there are no waterfall death marches here.
  • We are located in downtown Vancouver, and we have an open, collaborative work environment (no closed doors).
  • We pay a competitive wage tied to experience
  • We work hard, but also have lives outside of work.

To apply, send a cover letter, your resume, and links to Web sites you’ve built. Send them to .(JavaScript must be enabled to view this email address).

And don’t send your resume as a Word document. We mean it.

more posts from January 2015 More From January 2015

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