5 Tips for Developing Responsive Websites

Drew

Spoiler alert: your website is no longer being viewed on a just a desktop computer. There’s a high chance it’s being viewed on a tablet, a phone, a smart TV, a Roku box, a Chromecast or even your video game console.  As awesome and impressive as you thought your site was when you approved its design (and marveled in its beauty from your office computer), if you didn’t plan for your site to respond to all of these different scenarios, you might be in for a shock when you see outside of your desktop.

Don’t despair! Good designers and developers understand the importance of a responsive site and work in tandem to make your website shine regardless of the platform on which it is being viewed. However, even with our best intentions going into a project, there are always little things that crop up in development that we didn’t quite account for.

If you keep some simple things in mind as you build, your end result will be everything you had imagined — and hopefully more.

picjumbo.com_IMG_3642

1. Start with Mobile.

Either out of habit or preference for a larger palette, designers and developers tend to start their process on the desktop site. This is actually backwards. Rather than starting with a grand design and then scaling down while removing elements as you go to accommodate smaller screens, start with mobile and work your way up. It’s easier to expand your content and let it breath than it is to squeeze it down and compromise it.

Focusing on mobile first will also help you concentrate on your core message, presenting it up front and not diminishing it with peripheral design elements.

2. Forget About Pixel Perfect.

This might sound blasphemous, but with so many devices to think about, pixel-perfect designs are an outdated concept — and ultimately unrealistic. With all of the different-sized screens to think about, where would you even begin to establish your “standard?” The answer is, don’t. Instead, focus on fluid widths and sizes that will work with any size screen.

picjumbo.com_HNCK4005

3. Let the Content Be Your Guide.

This ties in with our point about pixel-perfection. It’s easy and tempting to have your breakpoints (the screen size at which your design will change) set to the width of common devices. The iPhone’s width for years was 320px, making for a simple go-to breakpoint for developers. But now the iPhone comes in several flavors, each with their own new widths. The iPhone 6’s width in portrait mode is 375px while The iPhone 6 Plus’ is 414px (not to mention the vast number of Android devices, each with their own viewport size).

Rather than relying on individual devices, let the content tell you when you should set a breakpoint and simply consider your general form factors – mobile, tablet, desktop and widescreen – and how your content is presented in each scenario. Your content is king. It should not be shoehorned or truncated just because of one particular device.

 4. Develop Concurrently.

Cool – your top content area looks great on desktop. Let’s move on to the secondary content area.

Pump the brakes! Developers may want to build an entire desktop site out first, saving the mobile versions for their next phase of development. But in the end, this will cost you more time than you realize.

Instead, develop each component of your site for each platform concurrently. Does the top content area looks good in desktop? Did you check it in mobile? How about tablet? Portrait? Landscape? You should do so before moving on to your next task. This will help you avoid headaches in our next step.

5. Cross-platform QA.

So you’ve finished developing your site. It certainly looks great on your desktop and you’re pretty sure you’ve viewed every page on your phone, too. But it’s easy to get tunnel-vision when developing, and that’s when cross-platform QA comes in.

Make a spreadsheet for yourself, and try to get a second pair of eyes on your site. View every page, every component, every nook & cranny of your site on as many screens, devices and browsers as you can. Before you mark something as fixed, check everything again to make sure your fix for something on the iPhone didn’t change something on the desktop site, or vice versa. Your audience will be viewing this site on any number of combinations of browser, screen size and operating system, so do your due diligence and make sure what they see is what you intend for them to see.

Need some help with your website? Our digital experts are here to answer your questions.  Contact us  for more information.

Questions? Comments? Tweet us @QuinlanCompany

We did it twice: Quinlan wins silver, bronze Telly Awards

Sarah

Great news for the Quinlan team — or should I say the award-winning Quinlan team? On Monday, April 13, we learned that we are the recipients of a pair of 2015 Telly Awards (including a coveted Silver Telly), which will look nice alongside the two Advertising Club of Buffalo Addy Awards that we won in March.

“It’s very exciting!” Frank Conjerti, Quinlan’s Creative Director, states. “It’s good for us, and our clients, to see that after all of the hard work, our projects are not only achieving our goals, but are doing so at a high level.”

AddAwards

We received a  gold Addy and a silver Addy award for our work with Northwest Bank’s 2014  television campaign for its MyNorthwest personal checking product.  The talent behind the winning work was our very own Director of Content Ben Kirst, Executive Vice President Dan Bartlo and Creative Director Frank Conjerti.

The team worked with cinematographer Chris Santucci, production expert John Takacs and dPost to create the light, colorful ads depicting humorous situations that call for the benefits of MyNorthwest.

Our winning work didn’t stop there. This past week, we learned that we were also the recipients of two Telly Awards; a prestigious silver Telly for our 2015 Show Reel and a bronze for our “Who Is Apple Rubber?” project.

 

tellysilverlarge

The 2014 35th Telly Awards included over 12,000 entries from all 50 states and numerous countries, which is why this year it is a rare honor to receive two Telly Awards for our work.

 The talented folks behind these projects include our VFX Producer MacLaine Russell, who created the motion graphics and 3D animation for the “Who Is Apple Rubber?” video.  That project was also supported by our creative team, including Conjerti, Kirst and copywriter Kristin Sullivan, who juggled the concept, script, visual effects, edits and post production.

 The 2015 Show Reel combined the masterwork of Conjerti and Russell. The reel features work by both artists, and the strategy for the piece was defined by Conjerti.

 We are working on more projects with our clients as the year continues and we want to continue to share them with you.  Be sure to subscribe to our blog for upcoming projects and tips on how to create brilliant content strategies for your next client.

 

Be sure to check out our winning projects for the 2014 Telly awards here!

Questions? Comments? Tweet us @QuinlanCompany.

 

Are you ready for Mobilegeddon? The Top 3 Things to Know About 4/21

Jessica

On Tuesday, April 21 — a week from today — businesses across the Internet face what’s being called Mobilegeddon: the official change of Google’s mobile search algorithm.

The main focus of this update: mobile-friendliness will become a key factor in organic mobile search results. If your website doesn’t fit Google’s criteria of mobile-friendliness, it will likely be penalized. Failure to act now could have catastrophic results for the mobile visibility of your website.

What does this mean?

Google defines “mobile-friendliness” as a website that is well-designed for mobile devices. You can find full details on Google’s Webmaster Central blog.

mobilefriendly

After 4/21, websites that are not mobile-friendly may experience a significant decrease in organic search traffic.

Is this bad?

Yes! According to comScore, mobile web and mobile app usage account for 60 percent of all digital media consumption in the U.S. Google Think Insights reports that 48 percent of mobile research begins with search.

What can I do?

There are three things to remember:

1. You can’t be kinda mobile-friendly. Google’s mobile-friendliness is a pass/fail test. A number of factors make up your grade, but ultimately your website is judged to be mobile-friendly or not.

2. You can test your mobile-friendliness. Do a Google search for your company in any desktop or mobile device. A small, light-gray “Mobile-friendly” label will appear below the URL if you have a passing grade. Google also provides a mobile-friendliness tool that allows you to test any URL.

3. There is hope! Google provides a wealth of resources to help businesses get mobile-friendly by 4/21.

The most important issues include:

  • Size of type. Yoast notes that Google recommends using a base font size of 16 px.
  • Spacing between touch buttons. Make sure your tap targets are at least 48 px.
  • Outdated media (such as Flash). Remember: mobile design is not the same as desktop design.

ThinkstockPhotos_Credit_Maksym_Yemelynov-810x608

Once addressed, your site will deliver a better user experience, get the Google seal of approval and — most importantly — more effectively convert mobile customers.

Still unsure?

Our digital experts are ready to answer any questions about making your website mobile-friendly for 4/21.

Be prepared for Mobilegeddon.
Contact us today with any questions and we can help
.

Six tips for creating highly shareable content

Grace

Creating more engaging content was B2B marketers’ top initiative for 2014. The first ingredient is to write a good story, and write it well. People aren’t going to share content that is boring or poorly written.

Once you’ve got that down, take a look at these six tips:

6 tips for shareable content
shareable content

1.) Add visuals. According to Forbes, blogs with images receive 94 percent more views than blogs without images. This makes sense, since 86 percent of buyers express some level of desire to access interactive or visual content.

How can you incorporate visuals? Photos are a safe bet — assuming you are using your own photography, appropriately licensed photography or license-free photography — but you can also creatively add videos, charts, graphs, screenshots and infographics (see #4.)

Social media updates containing images get far more likes, retweets and shares than those without. Hubspot found that Tweets with images receive 18 percent more clicks, 89 percent more favorites and 150 percent more retweets than those without.

content

2.) Write descriptive headlines. While eight out of 10 people will read headline copy, only two out of 10 actually read the rest. That can be a pretty intimidating statistic. If you’re looking for ways to spice up your headlines, consider Quick Sprout’s four u’s:

● Your headline should be unique
● Your headline should be ultra-specific
● Your headline should convey a sense of urgency
● Your headline should be useful

Using these guidelines will get you results. Neil Patel, co-founder of Crazy Egg, Hello Bar and KISSmetrics, found that descriptive headlines generate 29.1 percent more social shares over vague headlines. They also perform better long term and receive 65.2 percent more traffic overall.

3.) Back up your claims with data. Trust plays a major role in sharing content. Using statistics from credible sources will show that you did your research and that you can add an authoritative voice to the conversation.

By analyzing all of his blog posts, Patel found that blog posts containing stats and data received 149 percent more social shares and 283 percent more backlinks.

Try working stats into charts, graphs and infographics — this will add a colorful, creative and shareable visual element to your content mix.

content

4.) Use lists and infographics. The average attention span is only eight seconds. By including lists and/or infographics, you’ll be giving the reader an exact idea of what to expect in a skim-friendly, easy-to-read format that will quickly grab their attention.

“These type of posts and articles are perfect for building your authority and demonstrating a mastery of your area of expertise,” says Coppyblogger Founder and CEO Brian Clark, about lists. “If you’re business blogging, that’s key.”

5.) Incorporate thought leaders. According to Patel, having just one influential person sharing your content results in 31.8 percent more social shares.

“Before proactively engaging with influencers, first you have to find them,” says Hootsuite writer Kristina Cisnero. “Some influencer metrics to consider are: number of followers, Klout score and search engine ranking.”

People love to share things they are involved in.  By including influencer quotes, opinions or feedback in your content, these thought leaders will be much more likely to share your content in their social outlets. Just try not to be over-the-top in your flattery — sincerity goes a long way, too.

digital content

6.) Repromote old content. On all social networks, the number of content shares drop at least 96 percent after three days.

To combat this, repromote your old content at least one week after its been published– just make sure what you are creating is evergreen. If it isn’t, find timely events such as holidays and conferences that will make for an appropriate tie-in.

“If there is a new development or new advice you can share on a topic you’ve written about in the post,” says Pamela Vaughan, Hubspot contributor, ”take the old post, make some adjustments and additions, and publish it as new.”

What tips do you have for creating engaging content? Tweet us at @QuinlanCompany.

 

Our Web Design Secrets Revealed!

Kristin

You may have noticed that Quinlanco.com recently took on a new look.  If you haven’t, you’re missing out.

We recently sat down some of our key design and development players — Ryan DiMillo, Frank Conjerti, Greg Croniser, Brandon Stenzel and Michael Belfatto — to hear how the project went down.

Check out our video to learn the plan behind the design, the challenges we faced along the way, and tips on how we’re fitting self-promotion time into our already-busy schedules.

We can’t make any promises that things won’t get a little weird.

We can’t forget to give credit to MacLaine Russell, our own VFX Producer, for shooting and editing our roundtable discussion.

What are your self-promotional challenges? How do you split time between internal and external projects? Share your thoughts on Twitter (@QuinlanCompany) or give us a call at (716) 691-6200.