Tag: responsive

Dispatches from the Spry Hive 2015: Week 45

Posted by James McDonnell & filed under Tips.

Halloween may have been this past weekend, but that didn’t stop the working world. In fact, the holiday provided plenty of inspiration for designers, developers, and, of course, the internet. So, try not to fall out of your seats, and enjoy another week of the Spry Hive.

Tech

Superman isn’t the only one who can see through walls anymore, as developers at MIT have harnessed the superpower using wifi.

transparent-aluminum-640x425

Source = Naval Research Laboratory

Move aside, Glass. Furthering the legacy of Star Trek, Dr. Jas Sanghera has proven the feasibility of transparent aluminum.

Web & Apps

Step up your internet game with the ultimate Gif dance party.

If you’ve never heard of Basecamp, it’s about time to catch up. As of Nov. 3rd, Basecamp 3 is already available.

Have you been a fan of Snapchat’s sense of anonymity? Well, the company just reserved the rights to store your selfies.

Evidently, after luring customers into using OneDrive with unlimited storage, Microsoft has decided to drop the too good to be true offer, resetting the max limit at 1 Terabyte.

Design

Love the design of historic artifacts? Take a look at the Massimo and Lella Vignelli papers on Tumblr.

 

Mike Wasowski

Source = Go Monster Project

Acknowledging how creative our kids can be, the designers at Go Monster Project have created some stunning digital renditions of monster drawings from children.

Development

If you haven’t already heard, Drupal 8 will finally be released on November 19th! Join the celebration and find a release party near you.

Bring the weather to your users with Rain & Water Effects.

Interested in learning more about Apple’s cryptography?

Responsiveness is taking over the web, so be sure you keep up on all your CSS, jQuery, and JavaScript.

Front-end development has been, well… developing. So, what do we know now about the community?

Misc.

Watch out now, studies say your cat may want to kill you!

Space

Before NASA held another major press conference this week, the US Space agency put out an open call for the next generation of astronauts that will guide humanity to Mars.


So, as you can see, the holiday weekend did everything but hinder the week’s productivity. Hopefully you found something worth sharing with friends and family. Don’t forget to stop by next week for another dose of the Spry Hive!

Spry Digital Launches New Brand Identity and Website For The Olive Link

Posted by Ken Moire & filed under Case Studies.

The four and a half mile business district along Olive Boulevard in University City has long been recognized as one of the most diverse in the St. Louis metropolitan area, hosting a variety of ethnic communities, eateries, shops and businesses. When The City of University City decided to embark on an initiative to bring visibility to this burgeoning business community, Spry Digital was engaged to develop a unique identity and website that would showcase the diverse attributes of the neighborhood while attracting new businesses to the area.

With input from the Olive Boulevard business community and The University City Chamber of Commerce, Spry Digital forged a new identity, The Olive Link, that speaks to the neighborhood’s geographic and cultural significance. As a main thoroughfare, “The Link” connects St. Louis City to the County. With its many ethnic businesses and restaurants, it connects St. Louis to the World. Spry Digital developed a brand voice deck, key messages and a vibrant logo system. The new logo, featuring four intersecting rings, is universal in design and symbolizes the four distinct business districts within The Olive Link, united as one community. The tagline “Get In The Mix” entices businesses, restaurants and patrons from all around the World to come explore all that The Olive Link has to offer.

The Olive Link Responsive Design

Spry Digital designed and developed an eye-catching responsive website built on the WordPress content management system. Features of the website include a commercial property database that provides prospecting businesses and property owners the ability to search available properties by type or use, and an interactive feature that invites visitors to explore the neighborhood. Content that inspires and communicates the vision of the up-and-coming business district was developed by Spry Digital from the intial brand voice work.

Spry Digital Case Study: The Olive Link brochure

To accompany the website, a printed brochure was also created by Spry Digital to share with visitors to the region. With the new identity and website, University City can sell The Olive Link as a viable option for businesses in the Midwest and beyond looking to set up shop in the St. Louis metro area and University City in particular. Here’s what the Deputy Director of Planning, Zoning and Economic Development Raymond Lai said about working with Spry: “Working well with city staff and a community stakeholder group, the responsive and talented Spry team was able to create The Olive Link brand and an impressive website for the 4-mile, 4-district commercial corridor of our City.”

See more of this project in our Work section.

Why Mobile-Friendly Websites Win At Search

Posted by Ken Moire & filed under Web Design.

It’s no surprise that mobile traffic and referrals from mobile sites like Facebook are surging. While it’s convenient having the web at our fingertips, websites that require you to pinch and zoom to read content or to interact with the site are becoming more of a nuisance. If your website is not built responsively (or “mobile ready”), you may be turning off visitors and potential customers.

To help users find mobile-friendly content, Google announced this week that they have made changes to search results that will call out sites that have mobile-friendly content.

Example of Google's mobile-friendly label

Example of Google’s mobile-friendly label

With the change, Google is adding a “Mobile-friendly” label next to sites that, according to Google, meet the following criteria:

  • Avoids software that is not common on mobile devices, like Flash
  • Uses text that is readable without zooming
  • Sizes content to the screen so users don’t have to scroll horizontally or zoom
  • Places links far enough apart so that the correct one can be easily tapped

How do you know if your website is considered mobile-friendly? Google provides a mobile-friendly tester for that. Type in your address and in seconds you’ll know whether your site is seen as mobile-friendly by Google.

If not, it may be a good time to consider a responsive website redesign so that you don’t lose out, as we expect this feature will drive more traffic than ever before to sites that have been optimized for the mobile experience.

Dispatches from the SpryHive 2014: Week 11

Posted by spry & filed under Tips.

Well, I’m going to be honest. That whole “Spring Forward” thing kinda kicked our butts this week. But today is Friday and we have many pies in honor of the geekiest of holidays, Pi Day (3.14).  So as we sat around the kitchen table stuffing our faceholes with nine kinds of pie, here’s what we chatted about:

  1. If you missed it yesterday, check out Appcropolis‘ contest to create a wicked mobile app that benefits a worthy nonprofit. Winners get prizes and the satisfaction of knowing they did something awesome.
  2. Why should you care when one tech company buys another? What does it all mean?
  3. Missed SXSW or totally sick of it? One thing we bet you’re not sick of: Oreos. SXSW had a vending machine that 3D printed edible color Oreos powered by Twitter. What a world.
  4. Want a beautiful, open sourced framework for mobile apps using HTML5? Check out Ionic.
  5. “Is it possible to upload and read the WhatsApp chats from another Android application?” YES.
  6. Sometimes weird ideas can be brilliant. “We had to create a circumstance where we were allowed to fail at a very high rate.” Inside the unexpected success of Fred Seibert, the cartoon mastermind behind Spongebob Squarepants and Adventure Time.
  7. Tired of Googling the syntax for curl and don’t have time to wade through the man page? Get examples right from the command line.

That’ll do it for this week. Have a delightful weekend, behave yourselves out there.

Dispatches from the Spry Hive: Week 50

Posted by spry & filed under Tips.

It’s been a while.  It doesn’t mean we don’t love you – it just means we’ve been super busy! As you’ve no doubt noticed, there have been a lot of awesome changes around the Spry offices.  Trust that we’re still working hard and geeking hard, as always.  Here’s what’s grabbed our fancy this week:

  1. If you feel like getting Sassy, front-end developers, here’s some shortcuts for Sassy math and handy Sass organization.
  2. Cool stuff you can do with css and javascript.
  3. A browser based responsive drum machine. We’re gettin’ the band back together! Party on, dudes.
  4. Looking for a flat UI design? We think these from Designmodo are slick.
  5. Speaking of site builds, have you seen the new WordPress update, Parker?
  6. We are loving ish 2.0 viewpoint reszing tool. I mean, it has something called “Disco mode”!
  7. “MAKE THE LOGO BIGGER!” Well, ok then.
  8. ICYMI: Instagram announced Instagram Direct, letting you filter your shares as well as your painfully twee, ultra hip latte.
  9. The workday goes by much more quickly when you’re rocking out.  Incredibox helps.
  10. If you ever need a hug, look no further than The Nicest Place on the Internet.
  11. The latest trending links from Twitter with Latest.is
  12. Half the office is giddy over the new Cards Against Humanity holiday pack. At least one of them got coal.

Don’t forget to be good. Santa’s watching.

Spry Hive Week 12: A Spring Classic

Posted by Ken Moire & filed under Tips.

It’s time again for that sugary jolt of sweet things found on the web. Stuff your mouf full of Peeps and enjoy.

  1. Works every time. [Link]
  2. Turn any site into a maze that you can navigate with your phone. [Chrome Maze]
  3. Drag and drop grids are neato. There’s a jQuery plugin for that: [Gridster.js]
  4. Lou Ferrigno gives his body 110%, should you? Actually, an article about font sizes in a responsive world: [Link]
  5. The future of Firefox.
  6. Don’t look at this if you have a font addiction. You will want them all. [Link]
  7. Because everybody wants to create their own Mailchimp: [Sendy.co]
  8. Look, none of us are getting any younger. [Star Wars Episode VII Conceptual Poster]

 

Dispatches from the Spry Hive

Posted by Julia Koelsch & filed under Tips.

This is the first of a semi-regular series of links and articles that caught our attention this week.

1. We like HipChat a lot and use it as our internal group chat. Now we like it even better with the discovery of hidden HipChat emoticons.

2. Nifty list of .htaccess tricks.

3. There are tons of articles about how we all check email too much. But this article presents an interesting alternative: deep work.

4. This little tool is invaluable for testing responsive behavior.

Welcome to the Nut House – Spry Digital Announces Launch of What-A-Ya Nuts?! Website

Posted by Ken Moire & filed under News.

Howie Sher is a man on a mission. As “Head of State” for What-A-Ya Nuts?!, an all-natural snack food company based in St. Louis, he wants you to think about what you’re eating and he’s going to make you smile in the process. With a grin-inducing brand and a hardcore following on Facebook (not to mention distribution at local grocery chains, movie theaters, and specialty stores), when What-A-Ya Nuts?! asked us to to produce the Whatayanuts.com website, you can imagine what we said.

What-A-Ya Nuts?! Interactive Feature

What-A-Ya Nuts?! interactive feature

The goal for us was clear: create a delivery mechanism for the What-A-Ya Nuts?! brand to express itself in the only way it knows how: FULL ON. The site, built on the WordPress content management system, includes a jQuery interactive feature and animated “easter eggs” that invite the visitor to explore the depths of “Snack In Sanity”. We also employed responsive web design techniques so that What-A-Ya Nuts?! is always putting its best face forward, whether viewed on a desktop monitor, tablet or smart phone.

What-A-Ya Nuts?! Responsive Website

What-A-Ya Nuts?! Responsive Website

What-A-Ya Nuts?! is truly a one-of-a-kind brand and we’d be nuts to say that we didn’t have a great time building it. Tell us what you think and make sure to check out What-A-Ya Nuts?! around the web:

Website: whatayanuts.com
Facebook: whatayanuts
Twitter: @whatayanuts

Mile-High Inspiration from DrupalCon 2012

Posted by Julia Koelsch & filed under Drupal.

I had the fantastic opportunity to attend DrupalCon 2012 for Spry Digital. We met many fellow Drupalers, attended tons of sessions, and enjoyed a pint or two of Denver’s finest brews. I was blown away by the quality of the presentations as well as the friendly and supportive community that make up the Drupal community. I’ve had a little time to reflect on the past week, and am really excited by some of the trends that emerged:

DrupalCon Denver 2012

Collaborative publishing for every device.

1. Mobile, Mobile, Mobile!

The theme for the conference was “Collaborative Publishing for Every Device”, and the message came through loud and clear. Luke Wroblewski, author of Mobile First, gave a compelling keynote address on this topic. I’m writing this post on a mobile device, and chances are that a significant portion of those reading this post will do so on a mobile device. How does this impact our site development process? It means that:

  • The focus must be on the primary content and message of your site. Clever design is great, but it’s wasted effort if a user can’t find the information they were looking for when viewing your website on a smartphone.
  • The days of optimizing for the average desktop screen resolution are over. Page content should shift as needed based on various screen resolutions, so don’t get hung up on the pixel-perfect desktop experience. Here’s a clever example that demonstrates how page elements can shift around.
  • Speed and page size optimization are as important as always, but it must be done carefully. Poorly optimized images look even worse on high-resolution screens like the latest iPhones and iPads.

2. CSS preprocessors are hot

The days of spaghetti CSS are numbered. With technologies like SASS, LESS, and many others, you can write cleaner markup and modularize your CSS. These technologies have been around for awhile now, but many sessions I attended demonstrated how easy it is to use them in your projects. As we rely more on CSS to provide a richer online experience to a broader range of devices, these tools will help maintain your sanity while maintaining your CSS.

3. Harder, Better, Faster, Stronger Websites

Many of the “coder” sessions I attended covered topics like security, performance, and the operations side of development. The Drupal platform is secure and performs great out of the box, but developers need to know how to write secure and well-optimized code, regardless of your language and platform of choice. Security covers many aspects: not just avoiding writing code that can be compromised, but also automating repeatable processes and monitoring all aspects of your environment to provide a rich set of data for trend analysis. Tools like Hudson can help automate repeatable processes like site deployments and cron jobs. Monitoring tools like Nagios can monitor and report on all aspects of your environment to ensure your site continues to be fast and secure.

One last observation – while I learned lots of great Drupal-specific techniques, much of what I took from this conference can be applied to any web development project.

Thanks to all the volunteers and sponsors that helped make DrupalCon such a worthwhile experience!