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

ask about your project

Work With Us!

Get A Quote


Hopping Down the Road: Chicago and Detroit

Over the next few weeks, Hop Studios will be at several conferences.

First of all, we’re attending LION Summit, Sep. 29 - Oct 1 in Chicago, a conference for local independent online news publishers.

We’ll be doing two talks there: One is a CMS showdown where we’ll be vigerously defending ExpressionEngine against all comers, and the other will be an introduction to some of the distributed publishing options that publishers currently have to choose from, namely Facebook Instant Articles, Google’s AMP project, and the growing beast that is Apple News.

Next, we’ll be dropping by the aptly named ExpressionEngine Conference in Detroit Oct 3-4, to learn how to, you know, ExpressionEngine-ize things.

If you’ll be at either event, we hope to see you there!


St Andrew’s Cathedral: Pairing Beautiful Design with Elegant Functionality

It’s not every day we get to create a Web site for a cathedral!

This month we were thrilled to launch the redesigned site of St Andrew’s Cathedral in Singapore. This was a redesign in every sense of the word: the fresh look is a dramatic change from the old site, but we also put a content management system into place, replacing the flat-file Dreamweaver site that was such a bear for staff to update.

St Andrew’s Cathedral is a thriving Anglican community with a diverse and busy congregation. Their new Web site is similarly complex—home to a chockfull event calendar, weekly audio sermons (also available as a podcast), and Vicar Writes, a weekly column by The Revd Canon Terry Wong. And don’t miss Courier Online, a blog featuring writings by clergy and congregation. The first few posts are an intriguing mix of testimony, historical writing, and news.

Since the old site had been maintained by hand, cathedral staff needed updating to be a quicker and easier process, if only to keep up with the many cathedral activities! We set them up with our favorite content management, ExpressionEngine, and got to stretch our muscles with our first implementation of ExpressionEngine 3.4.2.

In addition, St Andrew’s wanted to be able to cater to the increasing number of visitors who visit the site on mobile devices and tablets. Every page is designed responsively so that the site is only readable and attractive on smaller devices, but the functionality shifts so that it is also easy to use whether the visitor is wielding a finger or a mouse.

The final result is a site we all feel proud of, with the flexibility to feature any piece of content on the home page, but with enough complexity to allow staff to create small interior verticals from groups of pages, as with this tour of the cathedral’s history and facilities.

Congratulations, St Andrew’s!


UC Berkeley Cal NERDs Web Site Gets a Facelift

We’re always excited to work with universities, and today we’re pleased as punch to announce the re-launch of the Web site of a very special UC Berkeley program: Cal NERDs.

The Cal NERDs program brings together science, technology, engineering and mathematics (STEM) undergraduate and graduate students. While in the program, this diverse group of students can participate in a large number of programs, research opportunities, and receive advice and coaching. Many go on to exciting profession and academic careers thanks in part to the assistance and support they receive as a Cal NERD.

Screenshot of the redesigned Cal NERDs home pageCal NERDs is led by Diana Lizarraga, who reached out to Hop Studios after seeing our work on the Greater Good Magazine, another Berkeley project. Diana had two other key priorities in mind as well: the need for the site to display responsively across desktop, tablet and phone browsers; and accessibility support for disabled site visitors.

After talking with Diana about her updating needs and getting an understanding of her busy schedule, it was clear that what was most necessary was a site that could flex with the program throughout the school year. We limited the number of static content areas on the home page in favor of a series of easy-to-update boxes that can be used to highlight anything on the site, from students to awards to upcoming events. Some neat customization features allow Diana to pick the color, graphic treatment, and pair them with photographs of the NERDs and their projects. The resulting design is vibrant, modern and professional, and highlights the student-designed Cal NERDs logo.

Visitors using screen readers will find some features intended to make browsing the site a little easier: jump links make it easy to get to the page content; CSS styles can be turned off without also losing site readability; and the site can be navigated effectively using the tab key or other non-mouse input device.

Looking good, Nerd Nation!


Control Your (Page Speed) Destiny Using Google’s Accelerated Mobile Pages

Today’s fun quiz: Match up the big company in Column A with its approach to distributed content publishing in Column B. (Essentially, this is when news publishers publish their content somewhere besides their own web sites.)

Column AColumn B
• Google
• Facebook
• Apple
• Just do it our way; it looks better.
• If you just lived here, you’d never have to leave.
• Our Kool Aid is open source!

All three organizations want to sell publishers on utilizing distributed content publishing as a way to speed up delivery of news stories on mobile devices, and all three claim that faster, prettier mobile news publishing will mean more readers and more stories read. But only Google’s approach, Accelerated Mobile Pages, is open source and aims to change the entire industry.

(It also boasts the most highfalutin sell of the three. In the site’s introductory video, Richard Gingras, Google’s head of news, speaks reverently about the company’s desire to “make the web great again.” (wince.) “[With AMP,] publishers can maintain control over their own destinies.” Thanks, Google!)

The basics are straightforward: Sign up for AMP, code your stories with Google’s AMP HTML and AMP JS, and any publisher (including you!) can start serving super quick, interactive, and publisher-branded news stories to the mobile Web. Publishers can serve their own ads, or sell ads using Google’s AMP for Ads.

Unlike Apple News Format or Facebook Instant Articles, AMP stories can be crawled, cached, and served anywhere across the mobile web via Google’s free AMP Cache.

Although Google promises that there is no “significant learning curve” for AMP HTML and JS, a peek at the code makes it clear that getting started is work for a Web developer and not merely a weekend blogger. And, although some traffic data is available, the AMP Roadmap shows a fair amount of analytics development is still in the works.

Given Google’s development track record, it seems likely that AMP will indeed become a robust and fully featured mobile publishing format, but the sheer scope of the organization’s goals mean it will take some time to reach their full flowering.

If you’re interested in joining the many web publishers now serving AMP content, give us a call. Although the Google documentation may look overwhelming, any publisher with a good content management system, can integrate AMP publishing without adding to their daily production load. We think that’s a good bet.

(Last month we talked about publishing in the Apple News Format; we moved on to cover Facebook Instant Articles.)


Increase Sharing, Reach and Readership by Publishing Facebook Instant Articles

Facebook Instant Articles are a distributed content publishing format developed by Facebook. With it, they hope that news stories of participating publishers, viewed on the Facebook mobile app, will:

  • Load super quickly
  • Be easy to read and uncluttered
  • Be bug and malware free
  • Include advertising (that they might be able to help with and thus get a slice of)

According to Facebook, reader engagement increases when content loads quickly, particularly on mobile. No doubt we can all use our own experience as anecdotal evidence that this is true! Faster loading, says Facebook, means more readers reading more stories. In their FAQ, Facebook says:

“[a]ny publisher — of any size, anywhere in the world — will be able to easily create fast, interactive articles and deliver a better mobile reading experience to people worldwide on Facebook.”

The way FIA works is this: As you publish a story on your site, you also publish an “Instant Article” version. This “shadow” copy is extremely lightweight, in part because of how Facebook is able to serve it (from their huge global network of servers), and in part because many elements of a standard web site aren’t used: site navigation, sidebars, popups, and so on, are not included.

Screenshot of an FIAHere’s a screenshot of an FIA in action from our client Truthdig.com.

FIAs also load more quickly because the Facebook app preloads FIA content, and readers stay inside the Facebook app proper, rather than getting pushed to the Web browser to load the publisher’s Web site.

In practice, here’s how it works:

  1. A publisher creates a custom version of one of their stories and publishes that custom version into Facebook’s system, telling it the URL of the original story. (This can be automated.)
  2. When a reader shares that story either from the original Web site, by pasting in the URL, or by resharing it, Facebook checks to see if there is a FIA that matches that URL.
  3. If there is a FIA, any user of the Facebook app that clicks on the story will see the FIA version without leaving Facebook. If there is no FIA (or if it’s been removed by the publisher), the app opens the story in the browser.

FIAs are for mobile only—Facebook users on regular old computer get the publisher’s Web site, not an FIA.

There are just a few steps to get started:

  1. Sign up for Facebook Instant Articles
  2. Create an RSS feed of stories to be automatically published to Facebook
  3. Submit sample articles for Facebook approval

And that’s it—once you’re accepted, articles get updated as quickly as the RSS feed is updated, and there’s no limit to the number of articles a publisher can include. Stories can be somewhat customized with the publisher’s general look and feel, and publishers can include features like videos, maps, and other interactivity, depending on the content management system that they use.

It’s worth noting that creating an FIA does not publish that article to your Facebook feed automatically—that’s a separate process, and you’ll still be in control of which stories you share and when. Instant Articles are served when anyone (you or any Facebook user) shares an article from your site that has a matching Instant Article.

Advertising and traffic analytics aren’t overlooked, either. Publishers can still serve their own display ads (and keep all revenue), or they earn advertising dollars by using the Facebook Audience Network and splitting revenue with Facebook, or both.

Facebook also allows views of an FIA to be incorporated into analytics tools, like Google Analytics, which means publishers can measure those views in their usual traffic statistics. Additionally, using Facebook’s own tools, publishers can see how many viewers each article gets, how far down viewers scroll, number of shares, and number of clicks.

Screenshot of Instant Article Insights

Facebook Instant Articles do appear to be a useful addition to a good web publishing strategy, but it’s worth paying close attention to the last couple of words in that quote I mentioned earlier:  “on Facebook.” All of the effort you put in to making Facebook articles efficient, unique, or to add special content—could also be put into making your general mobile site streamlined and fast to load. It’s a good idea to do FIAs, but it’s not a bad idea to make your Web site’s mobile delivery just as sharp.

(Last month we talked about publishing in the Apple News Format; next week we’ll discuss Google Accelerated Mobile Pages.)


more posts from August 2016 More From August 2016

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