Two great agencies have become one! Henry Russell Bruce (HRB) and ME&V Advertising have merged to create a combined company of more than 50 people with offices in Cedar Falls, Cedar Rapids, Des Moines and Quad Cities. The combined agency represents more than 200 clients across 10 states and offers branding, marketing, public relations, and advertising services in healthcare, higher education and banking, corporate communications and nonprofit fundraising. Take a look around →
No invitations needed to try out Google Maps new web app design. Multiple added features makes Google Maps even better as it tailors to your searching needs. View it with Google Chrome for a fully 3D satellite view!
This screenshot doesn’t really give the same effect as visiting the site.
Apple recently announced a new Mac Pro, but that’s not what this is about. I just want to draw some attention to the teaser page that they created for their site. You can take a look here: apple.com/mac-pro/
It’s unlike anything else on their site. You’re greeted with a full screen video that is advanced with each scroll (bulleted navigation is included on the right of the page for those that need something to click and a sense of place). Each section is then augmented with content that transitions nicely to and from the page.
Wanted to take a moment to highlight this well-built webpage (built using HTML5, CSS3, and actually uses a single pre-rendered video that pauses/plays as needed). I should note that some browsers may see a simplistic version of the page as a fallback if it doesn’t support the features they utilized on the full-featured page.
I’m not sure how, but the first thing I ever saw of GitHub was their mascot, Octocat. Now it’s a face I, and many other developers, see quite regularly.
At its core, GitHub is a place where people share code & collaborate with others. It is currently the largest code host in the world. I personally have the Smart Web App Banner project I’ve written about on there, and contribute to ThinkUp among other projects.
GitHub also functions as a version control system, issue tracker, and discussion platform. I won’t go into too much detail, but these features are amazingly powerful on their own. Some projects have chosen to be private to protect their work & assets while enjoying these features.
Meanwhile, you will find countless projects that are 100% publicly visible (every line of code, every image, etc.), open to outside contributions, and allow people to fork their work to be customized in a way that someone else will be responsible for managing that version of that project (read more about forking here). Code merging can be done if the work done to a fork (big or small) is worth adding back to the main project.
If you’re a programmer, you should definitely browse & search through some of the great work on GitHub (some of these great tools come directly from Facebook, Twitter, etc.) Then you know that project you’re using is open to being improved by you whenever you happen to find a bug or want a new feature to be added. That freedom is valuable to have.
Font Awesome is a great free icon font. It isn’t new (even TurboTax uses it), but it’s definitely worth sharing for those who have yet to check it out. It comes packed with a ton of icons, and it seems to have most use-cases covered as it’s open to contribution & is in active development (version 3.1 is on its way).
It looks great on retina & other high-resolution displays since it uses scalable vector graphics, and it’s easy to integrate & use (it was created for Twitter’s Bootstrap, but it can be used on any site).
HRB is pleased to learn that our client, The Iowa City Area Development Group (ICAD), has received two “Gold Excellence in Economic Development Awards” for its Datacenter Flip Book and the Pick Your Pace Website. Both received the highest recognition by the International Economic Development Council (IEDC). The honors were presented at an awards ceremony October 2, during the IEDC Annual Conference, in Houston, Texas.
HRB was honored to have been selected by ICAD to develop the Pick Your Pace website and is continually improving the site to help interstate commerce companies with workforce retention and attraction in Iowa’s Creative Corridor.
A glimpse of Smart App Banners in the Apple Developer Library.
Apple’s latest iPhone & iPad update, iOS 6, introduced a feature called Smart App Banners. This isn’t a headlining feature. It’s something that only applies to app developers as a means to inform people of their app when visiting their website. What makes it different/important is that it does so in a way that’s helpful, restrained and consistent.
Smart App Banners are great… until you want to do the same for a web-based app. Apple forces you to provide an iTunes Store App ID in order to use their App Banner, and that’s something web apps don’t have. This was a gap waiting to be filled, so I stepped in to take it on.
Introducing Smart *Web* App Banners!
Adding this website to an iPhone’s home screen.
Smart Web App Banner is a jQuery plugin that can be quickly and easily added to any web app to inform visitors of the fact that they can save the web app to their iPhone or iPad’s home screen just like any other app.
I’ve used countless jQuery plugins & dabbled in creating my own before now, but this is the first time I feel confident enough to release this as something that others can use on their own sites. You can see it in action on this site if you’re using an iPhone or iPad with Safari (note: Chrome for iOS can’t add items to the home screen so it isn’t shown), but the example page has it shown at all times with a live theme switcher.
This app banner is freely available for anybody to use seeing that the idea of the original is to provide a consistent look & feel across all websites. This is something we feel everyone should be able to enjoy implementing, customizing and using. A new version (1.1) has already been released since it’s initial reveal (which coincided with the release of iOS 6) adding a new feature that allows you to customize the icon’s label. This, and other features/options, can be found on the official Smart Web App Banner plugin page.
I definitely welcome any feedback you might have & please let me know if you come across any hang-ups… both of which can be done using the support section of the plugin’s page.
The concept of separating style from content was very impactful, and this lead to the rise of CSS in web development. A CSS file is text document where all of the colors, sizes, etc. are defined for a website (yes, even this one). There was then a realization that CSS isn’t quite as quick/easy to work with as it could be.
For example, most sites have a color scheme where the same colors are used throughout the site, but CSS requires that the color be defined every time it’s used. This causes adjustments made later on require that every instance be updated… why not make it so this color is defined once and that one color is then called upon when needed?
Well, this idea isn’t new. Sass and LESS have been developed to help with this and provide a few other features as well.
What are Sass & LESS?
Sass and LESS are both stylesheet languages that introduce a new way to program a site’s CSS. They add new concepts such as nesting, variables, etc. to a language that doesn’t support that natively in an effort to speed up development and improve code management. They use CSS as their base and augment it from there so people familiar with CSS will be able find their bearings relatively quickly.
Let’s take a quick look:
How does this factor into development?
Sass & LESS Support in Coda 2.
Editors such as Panic’s Coda support Sass and LESS so it provides accurate syntax highlighting when working in the code. They use their own file extensions (Sass uses .scss while LESS uses .less) since they are not functional CSS files on their own.
Sass can be compiled using a program like CodeKit before it’s uploaded to the site (making the .scss a working file and the resulting .css the production file). Note: pre-compiling can also be used for LESS. Another option is to use a sever-side function to convert the .scss file to .css on the site itself (eliminates the need to manage two separate files during development). This makes the process similar to working with LESS, but the code is compiled on the server rather than via the visitor’s web browser.
The Firefox web browser isn’t as much of the web world’s darling as it once was seeing how quickly Chrome has gained adoption, but they’re still releasing new, interesting, and often useful features in their updates. The latest is the 3D View that they’ve added to their Inspect tool (a feature that is quite useful for web developers).
In short, the Inspect tool allows people to view a webpage’s structure, content, styling, and additional information in a much more digestible way than simply looking at the site’s source code (speeding up both development & testing).
The 3D viewer augments the, already useful, Inspect Element tool with the ability to view a webpage in full 3D with each of the site’s components busted out to help visualize the pieces that make up any given page. At first, this seems like an “ooh shiny” add-on feature, but revisiting it a few times showed that it can help people understand how a page is built at a much deeper level at first glance than most other tools. Users can see all of the wrappers, buttons, images, etc. that a page consists of without having to look at any code or navigate any DOM trees… it actually can be a valuable tool.
I could go into further detail covering what all a DOM inspector does for web development, but I’d like to give some examples of popular sites/services with a head-to-head comparison of a competitor so you can see, at a glance, what kind of differences the 3D viewer exposes in terms of how a site was built.
*All sites were set to the default scale & turned to show depth.
** Warning: Some of what you’re about to see isn’t pretty.
Microsoft vs. Apple
Google vs. Bing vs. DuckDuckGo
GoDaddy vs. Namecheap vs. Hover
Constant Contact vs. Vertical Response vs. MailChimp
DotNetNuke vs. Drupal vs. WordPress
Digg vs. Reddit
Facebook vs. Twitter
HRB (we have to include ourselves, of course)
Speaking as a web developer, this is just one way to help demonstrate that advanced functionality & interactivity doesn’t always have to succumb to complexity.
You might’ve seen our recent post announcing our new mobile site. We’d like to dive deeper into the design process, and point out the key components we set out to achieve. There were a few clear goals we had in mind while designing & building our mobile site. We chose some of them in order to go beyond what we’ve seen with the usual assortment of mobile sites today.
Seamless & Responsive Design
This phrase has been getting thrown around in website design for mobile devices discussions quite a bit lately, and we know that means the need for keeping focused on what people want becomes more difficult than simply following trends without fully understanding the rationale behind it. To counter that, we found that taking some common conventions head-on would help focus us on making the user experience better than ever.
Initially, we found that the use of something like http://m.hrb-ideas.com is fine & something that people have grown to terms with, but there are still some issues with detecting a mobile site by using a separate web address. For instance, link sharing has a discrepancy from person-to-person due to the device-specific URL rather than simply pointing to the content and adjusting for the visitor when the page is being viewed. It also restricts and isolates the mobile site in a way that we didn’t want to limit. For instance, we had the idea that, by having everything located at a single URL, the site could seamlessly respond to what the user is using/wants in a (hopefully) useful way. As a result, we’ve introduced a new feature on our site where the site automatically switches to the mobile site as soon as the screen is too small to show the full site.
Here’s a video of it in action (running in Google Chrome & sped up 2x for the sake of keeping the demonstration short):
This is especially useful when viewing the site via an iPad as the screen isn’t wide enough to show the full site when held vertically, but it is wide enough if held horizontally. It’s entirely up to the visitor to determine which way works best for them, and the level of control & custom tailoring is something we haven’t seen much of yet. If the mobile site isn’t for you, there’s still a button to switch between the full & mobile site that will remember the preference from that point forward.
Designing for Touch
The use of touch screens changes some fundamental design concepts set with a keyboard & mouse in mind. This is not just due to hardware limitations (e.g. you can’t have stuff happen when hovering over something anymore [a tap is required]), but there are also design decisions that have to be made in order to avoid overlooking the niceties that people have come to expect when using a mobile device. To address this, we reworked our entire navigation to fall in line with modern mobile and touch conventions while streamlining the featured navigation to be tailored to what people would want when using a mobile device. Another important aspect was adding touch gestures where one would expect, and now all of the content cycles/slideshows (e.g. homepage & portfolio) have the ability to be navigated via swipes left & right rather than needing to tap on the left & right buttons.
Details, Details, Details
There are certainly things that many visitors will overlook while using our mobile site. We set out to use CSS layouts, shadows, etc. when possible so they show at full-resolution at all times. In addition to that, some of the primary images on the site were made at 2x resolution so they show at full-resolution on Retina resolution displays (which is not exclusive to Apple devices).
Text was made to be more compact on smaller screens so it’s a more efficient use of space (while still being legible), and text is shown at a larger size on tablets since they have more room and are usually held farther away when reading.
iOS users get the added benefit of complete home screen integration as they can add our site alongside all of the apps on their device. They then get treated to a high-res app icon on their app screen, can visit our site with one tap, and don’t have any of the web browser’s interface taking up room on the screen. It’s really worth checking out.
There’s definitely more to our mobile site than what was highlighted, but this should cover the three primary goals that we set out to achieve while we asked ourselves to “build a mobile app” with us as the client. We’re excited to hear what you think about it, and we would love to hear feedback or any questions you have that we could address in a future article. Most importantly, we hope you enjoy our new mobile site!
On the heels of Apple’s iAd last year, Google announced that they are adding rich ad serving to mobile devices courtesy of HTML5. This announcement has flown under the radar for the most part so what makes this stand out from Apple’s service? The biggest difference is that these ads can be shown on regular websites whereas iAd is limited to only be used in apps. Google has added this service to DoubleClick, a company Google acquired in 2007 for $3.1 billion, under their rich media toolset called DoubleClick Studio.
Downloading the information sheet (pdf) that Google provided alongside this announcement shows that Google predicts, by 2015, mobile devices are going to be the number one screen though which people engage with advertiser’s brands. This is no small claim considering the level of adoption the personal computer has reached, but I’m not sure if television is included in that claim seeing how they are talking about interactive advertisements.
Mobile advertising can provide a level of usefulness that other forms of advertising haven’t been able to achieve. People bring these devices with them everywhere, and that on its own is an incredibly important aspect (ex. seeing an advertisement for a restaurant while at home might bring it to your attention to go there someday, but an ad for the same restaurant while you’re looking something up on your phone might help you choose where you’re going for lunch that day).
These devices have integrated cameras and a bunch of sensors so the level of interactivity and intuitiveness can surpass previous mediums. What has been seen on mobile devices thus far is just the tip of the iceberg, and having established distribution platforms evolve to accommodate these capabilities is a good starting point.