flipoutdesign

flipout who?

Who is flipout design? That would be me, David Vespoli, a DC area front end developer who moonlights as a do-it-all freelancer by night. I work for clients needing anything from full life-cycle web development to the one-off, front end component (think: "I need this kick ass map app and my team is a bit thin"). Often, I collaborate with any number of talented colleagues, contacts and friends in my network, especially on more involved engagements. We come together to create beautiful, functional, accessible websites for people who couldn’t otherwise afford a full scale design/development shop.

Focus

Self Service: I put clients in amazing open source content management systems like Drupal and WordPress, empowering them to author and update their own content without having to have the slightest understanding of things like PHP, XHTML or JavaScript.

Accessibility: Using standards in anything I build for you ensures that your message is delivered to the widest range of users, from those using assistive devices like screen readers to clients that want sites that look great on an Android, iPhone or iPad.

Efficiency: I work as an individual or collaborate with others depending on a client’s needs. Being flexible allows me to stay nimble and on target. It also means low overhead and value for my clients.

Projects

I typically work for non profits, small and medium sized businesses, sole props or start ups. And I can work for them from concept to launch. But I'm happy to help with those small, one off projects too, like popping a photo gallery on to your existing site. Did I mention I was flexible?

flipout does

have a cuppa

  • Information Architecture

    Your website is about delivering your message to your audience. And to do it effectively, your site needs to be organized in a way that makes it easy for visitors to use and find what they’re looking for. I'll work with you and your stakeholders to understand exactly what your message is and how best to deliver it.

  • Design

    My natural style is simple, clean and pure, with a dash of subtlety. If you are looking for deep and thick conceptual design, I can bring in others. Let's talk requirements and figure out what works best for you.

  • Development

    I typically develop sites for clients in Drupal or for simpler setups, WordPress which empowers you to take the reins of the site once the project is complete. While were at it, let's spice things up a bit with interactive nifties built using jQuery!

  • À la carte

    What can I help you with? I can work on an hourly basis for small one-off projects.

  • Relationships

    Want to stay in the fold? For sites I build, I also offer hosting and an ongoing relationship so clients have built in time to make structural or functional changes to their site as they need to. Those sites fly on secure, green Servint powered servers. That means automated nightly backups of your site, stellar uptime as well and great set of admin tools to allow you to easily manage things like email accounts and lots of other stuff...if you choose to.

flipout did

See it now

Mid America Apartment Communities

Project role: Front End Development

Navigation Arts has some really amazing designers which makes my work as a front end developer, breathing life into those designs, extremely enjoyable. This was definitely one of those sites.

This project makes extensive use of JSON feeds coming from a SiteCore backend to populate things like dropdown menus, search results for apartments/communities and kicking out coordinates to the Google Maps API to plot them on a map. Check it out here

See it now

The Public Diplomacy Council

Project role: Soup to nuts

PDC came to me and wanted to take their website, which was loaded with great content, and put everything in a CMS to help them manage their content and wrap everything into a crisp, clean design.

We built this site in Drupal 6 using wrapped in a custom template making use of HTML5 spec. We made use of modules like profile so that commentators could be referenced as a content type. Check it out here

Check it out

Google Maps Application for Georgetown University

Project role: Application development and integration

Making use of Google Map's V3 API for a fresh look and fresh functionality for Georgetown U's Campus Maps.

Made extensive use of jQuery on the front end to deliver dynamic JSON map information (Autosuggest search and map pointers/repositioning) from a back end built on Python's most excellent Django Framework.

See it in action

See it now

The Alliance Exchange

Project role: Soup to Nuts

The Alliance Exchange is a local non-profit that had great content but needed a facelift. With some help from my trusty Project Manager Karen Roberts, I created a functional clean space to help them tell the world about International Exchange all using Drupal 6. If you're interested you can Check it out

Let's see some more ↓

Parent's Council of Washington

CMS (Drupal) integration. Custom calendar setup

Georgetown College

Front page refresh - Markup

GU Video

Application development and integration

Georgetown School of Foriegn Service: Qatar

CMS integration (KeySite)

Noble Pest Management

Soup to nuts

Working World Careers

Themeing (WordPress) and setup

Georgetown School of Foriegn Service: CIRS

CMS integration (KeySite)

Feline Urban Rescue

Soup to nuts

Hungry Bastard

Setup and Theme tweak (WordPress)

For My Foodie Friends

Setup and Theme tweak (WordPress)

Preferred Home Wndow and Door

Soup to nuts

Rich Meyers Consulting

CMS (Drupal) setup and theme tweak

Georgetown School of Medicine

Partial front end development and CMS (KeySite) integration

McDonough School of Business

CMS integration (FatWire), interactive component develpment (jQuery)

Lombardi Cancer Center

CMS integration (KeySite)

GU Medical Center

Front end development and CMS (KeySite) integration

Communication, Culture & Technology

Front end development and CMS (KeySite) integration

Center for Education and the Workforce

Design, Front end development and CMS (Keysite) integration

experiments

Navigation Arts Bubbles

Playing around with canvas led me to a few different varieties of solutions. The ultimate goal being the maximum efficiency that could be achieved. The project was exremely interesting since I dont get a lot of opportunity to work with canvas outside of playing around with things like this since many clients need legacy IE support. Unfortunately none of the solutions I came up with were able to overcome these limitations as the currently available "fixes" for lack of canvas support were simply not efficient enough to run smoothly. And granted, this particular implementation is difficult for the browser, not because of the animation but rather the calculations that must be done each frame to determine what color different varieties of semi transparent shapes create for a given pixel. Of course modern browsers like Chrome, Firefox and Safari handled the animations without a whimper. I have not have the opportunity to test in IE9 at the time of this post.

Attempt one (laggy jQuery) · Attempt two (with canvas now) · Attempt three (interacting with the mouse) · Attempt four (logo style)

talk to me!