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

ask about your project

Work With Us!

Get A Quote


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.


The 411 on 404 Reporter

Image of a classic 404 error pageIf you’ve seen it once, you seen it a hundred times: the frustrating roadblock that is the"404: Page Not Found” error. You wanted pictures of cute kittens, only to be stymied by a broken link and a missing page. Mistyped URLs, broken links, and missing content are annoying for Web site visitors, but they’re catastrophic for Web site publishers. After all, what could be worse than losing those page views, ad clicks, and traffic numbers—not to mention the potential for visits to other pages of your site?

Hop Studios is pleased to announce a new tool to help publishers monitor 404 error views: 404 Reporter.

This ExpressionEngine module logs each time a Web site visitor encounters a 404 error page, recoding what URL the Web site visitor came from, and what page they were trying to get to. As well as creating a file log, the module allows you to receive email notifications of each 404 error.

Using the information in 404 Reporter’s logs you can find and correct broken links on your own Web site, notify other Web sites about broken links to your content, and generally deliver a better quality and more successful Web site to your audience. We think that’s a win!

The 404 Reporter EE module is available on Devot:ee for $10. It is compatible with ExpressionEngine 2.7 and up.

more posts from January 2015 More From January 2015

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