11Eleven Development

Get out your Yoga mats! When we were approached by Alosport to develop the new template for their online store, we were very excited to be a part of their website redesign. The design, created by Mr. Longsworth, elegantly emphasizes the quality & style of the entire company. “Alo's refined collection is inspired by yoga and embodies contemporary design, innovative details and eco-friendly materials for both women and men.” – alosport.com

The new template is very feature rich and challenged us to create many custom widgets exclusive to this new design. Some of these widgets include the custom stationary header & footer bars equipped with unique modal popup views, a full screen image slider widget which resizes with the web browser so that it is always displayed as large as possible, and a custom image side scroller widget which supports multiple size images displayed in several different positions & alignments.

Please take a look through the website and enjoy all of the new features, and don’t forget to check out all of their yoga & active wear products while you’re there!

Introduction.  Having over a decade of experience in web development, we have come to love many features that a CMS can offer for both the developers and the site administrators.   A CMS offers a convenient way to manage many types of website content without having to actually be a web developer.   Now, we have always preferred “this ” CMS for certain tasks, and “that” CMS for other tasks but we kept asking ourselves, why can’t we just have one CMS that does  it all?   So we waited for the CMS systems out there to get with the program and provide one really great, multi-use Content Management System.  Sadly, after years of disappointment, we finally remembered an old Aesopian fable.  Hercules talking to a man who was waiting around for someone to rescue his wagon that had become stuck in some mud:  “Tut, man, don’t sprawl there. Get up and put your shoulder to the wheel.”  So we buckled down, put our “shoulders to the wheel” and through months of blood, sweat and tears designed Vine CMS, the answer to our (and your) prayers.  Vine CMS offers exactly what any all purpose CMS should, the ability to manage ANY kind of content through one simple, user friendly, interface.  Vine is still in its infancy; however all of the essentials are there so we have decided to begin offering Vine as a Beta version and some of our clients have already began enjoying the features of this revolutionary CMS.

Why did we call it Vine?  Here at 11Eleven Development, having originated in California, we have developed a deep appreciation for great wine.  We didn’t want our CMS to be just “like the others”, so we decided that a themed CMS sounded like a lot of fun.   With Vine CMS, you get just that.  In Vine you don’t manage blog entries; you manage Grapes of a specific Varietal growing on a specific Vine.   You might be saying whoa!  That doesn’t make any sense!  But it’s actually a very convenient way to think of things.  We could have said, you manage Objects of a specific Object Type having a specific Category, but does that sound nearly as much fun, does it?   We don’t think so either.  Now there will always be those who do prefer such standard language in their CMS, so in one of the next releases we will be offering a feature to switch from the Vineyard themed language to a Standard language.

How do I get Vine?  Right now we only offer Vine CMS to our clients who come to us for a website design or redesign.  Interested in a website design or redesign and want to take advantage of Vine CMS?  Contact us now for an estimate!

Do you plan on releasing Vine to the public?   Right now we have no plans to make Vine available to the public other than for our clients.   However, the vines are still young and growing and anything is possible…

Does Vine support Plugins? Yes!  Vine has a complete system in place to allow the addition of new features to the core CMS through plugins.  However, we didn’t think the term plugins sounded very Vine-like, so we decided to call them Barrels.  We can custom develop any Barrel for your site that your heart (or business) desires.

What are the current features?  The current version of Vine is Vine Beta 1.0.  In this version of Vine you find all the basic features of a CMS.  The site administration features include; the ability to manage any type of content through the use of our “VVG” methodology, meta data control, support for Barrels,

What is VVG?  VVG is just a term to describe how you control your content using Vine.  The first V stands for Varietal and describes a certain type of content.    The second V stands for Vine, and allows a 2^nd level of control, basically it’s like having Categories within each content type.  The G stands for Grape.  A grape is an individual piece of content.  When you create and manage content in Vine, you are creating and managing Grapes, since Grapes are what ultimately what we need to have a Vineyard, and someday will be harvested into a really great bottle of wine (or in your case, a really great website).

I want to start enjoying the benefits Vine for my current or planned website!  Great!  We would be more than happy to get you started.  Just send us a message and let us know that you would like to start using Vine and one of our team members will get back to you.

Designed by our lead graphic designer, www.mrlongsworth.com is an elegant display of design and creativity.  The site utilizes many great features such as beautiful drop down menus, a drop down contact form, a twitter feed, and a combination of many slider features all wrapped up into one great big slider that we so happen to call Slider 11 (can you guess why?).   This website was also the first website to use our very own content management system (CMS) that we have dubbed Vine.  

One can’t help but notice and appreciate the full page custom slider.  This slider is very unique because it combines the normal left-to-right slide capability of your average slider with some awesome custom capabilities.   One such capability is the hover scroll feature, which auto-scrolls the slider left and right when hovering over the left or right edges.  We’ve also added a dimming effect when the mouse is not being actively used, which includes a semi-opaque title fixed in the bottom center which reads “Featured Work”.   The real magic happens when a user goes and views a work category.  Each category consists of a set of Projects.  Each Project contains one or more project items.  Each project item is displayed in a project item column.   Each column may have up to 3 items.   Another beautiful feature of this slider is the vertical scrolling capability using the “Next” & “Previous” buttons.   Vertical scrolling allows for switching between projects.  Control of the slider has also been integrated into the drop down menu to allow switching between projects using the menu.  Additionally, the navigation menu also has been equipped with an indication of the project currently being displayed in the slider.  Every aspect of the categories, projects, and project items are all controlled through our very own Vine CMS, allowing Mr. Longsworth to easily manage his content. 

The navigation menu consists of a main navigation and a sub-navigation.  The main navigation includes a link to the home page as well as a dropdown contact form.  The sub-navigation is actually part of the slider and consists of project categories, each with a drop down of projects within those categories.   When a project in the dropdown is clicked on, the page will change to the appropriate category if necessary and then vertically scroll to the desired project.  The category and project will then be indicated in the sub-navigation and the sub-menu.   The sub-navigation and sub-menus are automatically generated for Mr. Longsworth by Vine.  He doesn’t have to worry about how anything gets generated. Vine just takes the projects he’s created and automatically builds his navigation menu based on what he’s created.

Mr. Longsworth also wanted a very custom 404 page, with a video.  Vine CMS not only allows for Mr. Longsworth to create a custom 404 page, but also allows him to upload pictures and videos with an elegant html editor, similar to a document editor such as Microsoft Word.

We’ve also created a new Barrel for Vine called “Tweet Barrel”.   This Barrel allows the display of a twitter feed on the website so that Mr. Longsworth can display his latest tweets, re-tweets, and @mrlongsworth tweets.
The site also has many other features such as link management and a random background each time a page is loaded.   All features are manageable through Vine CMS.   Be sure to check out the site by clicking here!

A photographer came to us with a design by Mr. Longsworth and wanted us to make her design a reality. This website serves as her personal portfolio of work.   Simple yet elegant, this website brings together several of our services such as website/blog design, CMS (Content Management System), custom forms, custom widgets and hosting.

As our custom CMS was still in development at the time we created this site, we decided to use Wordpress, which was a personal favorite of ours for simple Blog websites.   All pages of the website are editable using an html editor, which is similar to document editors such as Microsoft Word.  The CMS includes a custom photo gallery plug-in for Wordpress, to allow our client to easily manage every aspect of her photo gallery.  All of the dynamic content of the website is fully editable through the CMS, so that our client can easily make changes throughout her website without ever having to modify any code.

A large custom photo viewing widget is used to display the photo gallery to website users.  We designed this widget using JQuery, our favorite JavaScript library.  This widget utilizes beautiful transitions between photographs, enhancing the appeal and adding a visual dynamic to the display of her work.  We’ve also constructed control buttons to easily switch between photographs.

The navigation menu implements a unique drop down style.  Rather than simply showing a drop down box for each navigation link, the submenus are revealed on the line below, disappearing only once the user has either selected another navigation option or exited the navigation menu entirely.   Of course the navigation menu has beautiful hover effects to enhance the user experience.   In addition, the current page and subpage are clearly indicated, as they should be.

The contact form has been elegantly embedded into the "About" page.  As with all of our contact forms, full validation, error handling and data preservation are coordinated to give the best form experience possible to the user.  The validation also includes email validation to help prevent contact form spam.

The blog uses a different layout than the rest of the site, yet still encompasses the overall look and feel of the website. The blog features a dynamic sidebar with several sections, each of which is fully editable through the CMS.  All of the typical blog features one would expect (categories, tagging, commenting, searching, etc...) are included, making this blog very functional and modern in both design and management.   In addition to comment moderation features, the comment form includes a captcha, two short words, which must be typed by the user in order to leave a comment.  This helps to prevent spam commenting and greatly reduces the load on our client having to filter through fake comments.

Overall, this website combines an elegant and professional look and feel with many useful and custom features to help our client show off her personal portfolio.   Be sure to experience the website for yourself by Clicking Here.