Logo

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

ask about your project

Work With Us!

Get A Quote

Blog

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.

 

It’s Time to Look Beyond Google

Logos of Yahoo, Google, and BingMany of us have gotten accustomed to Google dominating the search engine market. However, according to Business Insider, both Yahoo and Microsoft are actively trying to convince Apple to choose their search services over those of Google to be the default search provider in Safari, Apple’s browser. Safari, of course, is the default browser on all Macs, iPhones, iPads, and other Apple devices.  Bing, Microsoft’s search engine, is already being used for Apple’s voice recognition software, Siri, so the idea of Apple switching wouldn’t be a complete surprise, but it would cause a pretty significant shift in the importance of ranking well in Bing.

This follows an early November announcement that Yahoo will become the default search provider for Firefox, Mozilla’s browser. This is expected to roll out this month. Firefox has a 14-19% share of the browser market, and I think we all can see how ubiquitous iPhones and iPads are.

What does this mean to you, besides having new search results if you’re a user of Firefox or Safari? It means this is a great time to think about how your site displays (or doesn’t) in Yahoo and Bing search results. This is especially important to verify and improve now, because it often takes quite a bit of time to improve how your site is indexed by search engines. Don’t delay!

 

Tweet Louder: Get Your Site Using Twitter Cards

If Twitter is a significant source of traffic and referrals for your site, consider dressing up those tweets by implementing Twitter Cards.

Twitter Cards (which look no more like “cards” than Twitter posts sound like “tweets,” but let’s not get hung up on that, it’s not like that’s bothered me since Twitter launched … oh right, moving on) let you modify any tweet that includes a URL for your web site beyond basic text, with a custom layout that includes photos, multimedia (kids today call it video), and even product information. They’ve been around for about a year and appear fairly stable at this point.

There are seven types of Twitter Cards available. Let’s talk about the Summary Card with Large Image first, because it’s the most broadly useful and appealing. Essentially, it works like this:

  1. A page on your site includes some custom code that provides Twitter with a specific title, text, and an image.
  2. A reader decides to tweet about that page. This could happen through any mechanism that handles tweets, from in-page sharing links to the Twitter Web site itself. He or she types in a snarky/hilarious/ironic/informative comment and includes the URL in the tweet.
  3. Twitter a) posts their tweet, but, where supported, displays extra text that says “View Summary.” When clicked, Twitter displays the tweet card, which includes the title, summary, and photo you set up, no extra work by the person doing the tweeting.


The advantage here is that content you choose always accompanies tweets about your URLs, giving you much better exposure on Twitter itself, and some additional persuasion that will send readers of that tweet to visit your site themselves.

If you’re using a content management system with templates, the “few extra lines of code”—makes it sound so simple, doesn’t it—can be implemented once and then never touched again unless you want to add additional types of Twitter Cards or change how your Twitter Card is working.  The code can be based off things you already do (i.e. selecting an image for an article) or it can be custom for Twitter, so you can have a slightly different headline or image designed to tease people more than the image on the content itself.

Hop Studios has implemented Twitter Cards for several clients and found the process (which does include getting overall approval from Twitter) usually takes only a couple of hours to put in place. This is proving to be an especially useful tool for Web site publishers who update frequently, have lots of content, and who are interested in leveraging social media to drive traffic.

The image in this post is a screenshot of a Twitter Card generated from a September Hop Studios blog post. This is the Summary Card with Large Image. With this graphic, the Twitter Card for this post is going to be very Inception-esque!


These are the seven card types you can choose from:

  • gallery cards featuring up to 4 images
  • single photo cards
  • summary cards with a title, description, and link
  • summary cards with a title, description, link, and image
  • app cards, for creating a direct download link for mobile applications
  • player cards that showcase audio, video, and other media
  • product cards for merchants with a title, image, description, and product details, and of course a link to purchase the product.

Twitter also offers some analytics tools (i.e. traffic results) that let you track clicks on your card, app installs, retweets, and of course compare how different types of cards are working for you. We think this is a pretty cool tool for Web publishers, and we’re particularly keen on the idea that this is work that can be done just once, but that will benefit you on an on-going basis.

 
more posts from October 2014 More From October 2014

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