Responsive Web Design

Cross-Device Design Responsibility

Mobile device use in the online market place has grown exponentially in the last few years, yet often web designers still don’t fully understand how to design for multiple screen sizes, device pixel ratios and device capabilities.
Device types and sizes will forever be changing (with smart jewelry being introduced we will no doubt have to start thinking of yet new ways to properly integrate content across even smaller screens (the device landscape keeps expanding and will continue to do so well into the foreseeable future). Designers and developers have to catch up and start thinking about future proofing websites to smoothly adapt to any screen or device capability.

Responsive web design was originally defined by Ethan Marcotte on A List Apart back in 2010, “…allows you to build one fluid site that can shrink or stretch to fit any screen size on any device. With fluid grids, flexible images and media queries, we don’t have to whip up a separate, mobile-dedicated website.”
However to expand upon that, we also need to think about device capability degradation, as desktop and laptop machines and browser capabilities get more and more powerful we can start creating extremely advanced animations and interactions, while we are also getting smaller and more restricted screens such as smart watches, so now we have to decide when and how these new capabilities are to be degraded.

Unfortunately there are still a large subset of designers who don’t understand devices, how content can be degraded appropriately, how and when to make the decision to use a responsive grid layout vs. dedicated device specific sites.
Often we will see designs that require monumental development labor to transition from desktop to mobile, are requiring pages of javascript to create a kind of hybrid mobile only and responsive design which should have been a simple responsive CSS grid based layout that works across more devices and is a much more solid and robust application with significantly less time-to-production.

To wrap up, multi-browser and device capability is not only “here to stay” but will no doubt get more and more complex as new technologies are introduced, so we all better get familiar with designing, strategizing, developing and degrading our sites to suit these new ways of content consumption.

Hello World

Mint Design Co. Re-envisioned

Wrapping up Mint Design Co’s re-brand, with a revamped logo and a brand new responsive site.
Designed around hand-drawn old-school traditional animation, custom illustrations, and html5 canvas elements – our vision has been to create the Mint Design brand around emotional story telling and hand-crafted artwork.
Instead of “just another WordPress” site, we aim to showcase the melding of art and technology to achieve something uniquely beautiful that evokes the feel of your old desktop doodle pad come to life.

Developed on the WordPress CMS with a smoothly animated html5 pushState UI built to work across all modern devices and standards compliant browsers.

The Grounds

Responsive site development on the WordPress CMS with a completely custom design. Implementing Bootstrap’s grid and using jquery and Edge for html5 cross-device footer animation.

Series of games developed in the html5 Canvas, built for multi-device use, utilizing dynamic physics and built with the pixiJS renderer for fast cross-device gameplay.

*NOTE: Unfortunately this site has since been degraded by later development and we’ve deactivated the link, view our reel to see it in action.

Posted in web

DigitalKick

Built on the ExpressionEngine CMS, created a fluid html5 pushState UI, implementing unique animation and transitional elements for a beautiful, yet highly useable and solid interface. Responsive design comprehensively tested across all modern devices and browsers.

Posted in web

Discover South Carolina

Completed UX strategy and wireframing for the responsive redevelopment of the South Carolina Tourism site.
Responsibilities included comprehensive research into the tourism sector, who our users are, how they interact, user paths, goals and demographics. Mint Design handled strategy and wireframing for a unique and responsive user-centric trip planner, login/share system, advanced search and tag functionality, and product pages covering every attraction/event/restaurant/etc. in South Carolina.
I worked with the BFG Communications team of developers and designers to properly transfer the wires into the final product.

Posted in web

Sheryl Crow and CSJ

Mini corporate site for the Chateau St. Jean and Sheryl Crow partnership. Built a custom responsive AJAX app optimized for all devices, using a unique html5 pushState smooth scrolling and animated UI.
A highly unique interface that had to adjust and smoothly fill both width and height as well as a responsive UI that detects and adjusts for any device size in real-time, implemented a responsive iFrame that scrolls, scales and interacts seamlessly inside the site design and on all devices, conceptualized and developed unique ways to smoothly load and animate each section of the site implementing key sprite and CSS3 animations where needed.

NOTE: We developed numerous Sheryl Crow and Chateau St. Jean partnership mini-sites for over two years, the promotions have since ended, view our reel to see it in action.

Posted in web