Neoteric Design Blog

We're hiring: Rails Web Developer

2010-08-30T21:28:03Z

Work in a small team environment with one of the most respected and trusted web design agencies in the heart of Chicago's design district, River North. Your co-workers excel in user interface, graphic and interaction design, usability, QA and agile project management, business strategy and lean and clean markup. Work on meaningful projects across the university, art, not-for-profit and corporate worlds, with clients who love us for our dedication and attention to detail.

Requirements:

Full time, on-location only;
At least two years Rails development experience;
Javascript/CSS experience;
TDD with cucumber/RSpec experience.

Great if you've got:

Agile/SCRUM, but we'll train you if you haven't had the pleasure;
CMS experience in MT, EE, WP, or similar;
Working understanding of server environments;
Unix chops: We're a Mac shop, Microsoft skills noted but not required.

Benefits:

Humane working schedule with personal project time
SIRA/401k matching retirement program
Healthcare
Competitive salary
Holidays and paid vacation time
Monthly Design Friday afternoons to learn something new or share your personal project
Conference opportunities like WWDC, RailsConf, Event Apart, and more
Training and development
Contribute to meaningful open source projects
Pre-tax public transportation cards
Brick and timber loft open office space with bike-to-work amenities

To apply, send us your resume, portfolio site, and github account to work@neotericdesign.com. Please no calls.

APDA National Young Onset Center

2010-08-16T19:50:51Z

The American Parkinson Disease Association National Young Onset Center offers educational resources and support programs to address needs and issues affecting young people with Parkinson's disease. The redesigned website offers comprehensive set of tools to assist and empower this community. Articles and references help answer questions about topics ranging from understanding symptoms and treatment to legal and insurance options. The site also includes a blog and resource guide - a directory of organizations dedicated to providing low or no-cost services. Users can also gain deeper insight by reading stories by those experiencing Parkinson's Disease, and can participate by submitting their own story. A custom content management system built with Refinery enables this grass roots organization fluidly manage their website.

Smart Museum of Art

2010-07-22T19:38:57Z

The David and Alfred Smart Museum of Art is the art museum of the University of Chicago. With an academic and interdisciplinary pursuit of experiencing and interpreting art, the museum presents contemporary and ancient works of art and is home to a distinguished permanent collection. We refreshed the brand for the redesigned website and HTML email newsletters. Home page and internal sidebar promo areas are integrated throughout the site, along with the university events calendar and suite of social media tools: rss feeds, email, facebook and twitter sharing. Exhibitions and permanent collections are outfitted with larger real estate given to media including image galleries and video content, with links to a searchable publications section. We implemented Movable Type for their custom content management system so that museum staff can easily update the website and compose their newsletters.

City of Evanston

2010-07-20T19:52:45Z

In collaboration with the City web team and an epic volunteer code-a-thon, we helped to refresh the City of Evanston website with an engaging and intuitive look and feel. The site serves as a one-stop shop of city related events and information for residents, businesses, and visitors. It offers an enhanced events calendar with maps and calendar event downloads, alert announcements, news, a blog, and lots of social media tools, making it easy to learn about the city and interact with the site. Behind it all, a custom content management system makes ongoing content management easier than ever.

Fresh and bold new look for Players Sports Group

2010-05-04T22:09:31Z

Players Sports Group has organized sports leagues, tournaments, and social events for adults since 1993. Linked to the best athletic facilities and venues in the city, the organization continues to grow as one of the largest year-round sports and social clubs in Chicago. We redesigned the website to meet their growing needs. The new site has larger calls-to-action and more imagery, news alert sections, and social networking features. Users can access sports rules, message boards, review schedules and standings, view facility maps, and register for leagues under each sport while the staff can keep content fresh using a custom built content management system. Sign up for some action!

Announcing: SpoonFeed from RIA

2010-04-29T21:09:47Z

We're proud to welcome SpoonFeed, Restaurant Intelligence Agency's one-stop digital dashboard that connects busy restauranteurs to their team, their peers, and the media with really easy-to-use features. We built this application from the ground up for RIA's clients to receive industry news and marketing tips, update press kits, guided social media coaching from RIA staff, join internal discussions, and manage their Twitter accounts through a streamlined, single interface. As SpoonFeed continues to grow, more valuable features will be added for users to stay one step ahead of the new PR world.

The Propeller Fund regrant program launches

2010-04-29T20:59:34Z

It's often hard to quantify the ingenuity and productivity of Chicago's visual art community, let alone recognize the innovation, collectivity, and resourcefulness that characterize it. The Propeller Fund is a regranting program that aims to spark ambitions and promote the public's interaction with this type of work, building on the varied and informal models for creative activities often bypassed by traditional funding sources. We debuted the Propeller Fund's website to document and promote projects supported by the grant. Neoteric Design provided a new brand, social networking features to help foster the dialogue and get the word out, and a customized content management system to give the support staff control over site updates.

Redesigned website offers a library of sex and relationship advice from experts

2010-04-29T19:56:13Z

The World Health Organization estimates that more than 100 million acts of sex occur every day. The team of experts at Good in Bed are here to help you learn about and live your sex life to the fullest. We redesigned their website with engaging features, blogs, and tools to highlight the library of the latest resources offered by sex and relationship specialists. A tailored content management system enables the team to easily maintain the site. At GoodInBed.com, users can preview and download eBooks and mini-guides that are private, printable, and portable. Users can also pose questions, participate in discussions with experts or reference the glossary of sexuality-related terms.

Build a slick portfolio w/ jQuery & the Cycle slider plugin

2010-04-08T15:36:58Z

I'm going to demonstrate how Neoteric Design builds a sliding portfolio, a design element which can be used to show off your best project work, a series of promotions for various sections of your site, or anything else you can imagine that makes sense in rotation. Here it is:

Arts & Business Council of Chicago

Helping Arts & Businesses Connect

The Arts & Business Council of Chicago has been serving Chicago for 25 years to strengthen the arts community through its partnerships, programs, resources, and services. We're pleased to announce the launch of a bold, redesigned website that conveys the energy and spirit of the organization. A bright, new look with strong imagery and type styles helps extend the existing brand. Resources for business volunteers and non-profits are easy to find and registrations for workshops and events are simple to use and update. A news blog keeps visitors up-to-date about trends and issues affecting the community.

Visit website »

Lincoln Park Chamber of Commerce

The Cornerstone of Your Success

The LPCC serves as a catalyst for business success and economic development in Lincoln Park. The redesigned website features an easy-to-use content management system, extensive news, blogs, and media feeds, and integration with the Chamber's membership management system, ChamberMaster.

Visit website »

Appolicious

Find mobile apps you'll love

Appolicious now has curated apps! As the mobile app landscape shifts and evolves, Appolicious stays on top with more app discovery features. Users can now create their own collection of applications, souping up the browsing experience. Go on, wrangle up your own set!

Visit website »

You can skip straight to the source code if you'd like.

Several times, I’ve been asked how to use the Coda slider jQuery plugin to build a web portfolio and every time I strongly recommended the jQuery Cycle plugin instead.

Why Cycle and not Coda?

Coda’s markup requirements are too bulky and the pay-off is a single slide left/right transition. Cycle offers about 2 dozen transitions and a lite version that is comparable in size to Coda (though only with the ‘fade’ transition).

Both allow use of the jQuery Easing Plugin, which I recommend to fine-tune the sliding transition. When comparing the Coda settings options versus the Cycle settings options, we find a lot more options available from Cycle that are also a little easier to understand just from reading the name.

OK, these are just a couple of reasons for me, and I’d like to move on to demonstrating the portfolio.

Let’s Get Started

Ingredients:

Construct the HTML

Following the example in this gist, create the HTML for the portfolio content. Each top-level DIV inside “#cycle_area” is considered one portfolio piece. In fact, Cycle attempts to load any top-level element into rotation, so be sure this part is consistent. Cycle best handles a list of IMGs or DIVs. For this example, I’m choosing DIVs to demonstrate its ability to rotate full chunks of HTML.

Wire up the JavaScript

Now that your HTML is complete, it’s time to write the javascript! I’m just going to go over it line-by-line:

$(‘#cycle_area’).cycle({
- Initialise the plugin on the desired DIV (#cycle_area in this case)
fx: ‘scrollHorz’,
- We’re going to use the scroll-horizontal effect. (effects browser)
speed: 500,
- The speed of the transition, half a second (500 miliseconds)
timeout: 5500,
- The time between transitions (5.5 seconds)
pager: ‘#pager’,
- The pager ID in the HTML — used to build a clickable, numbered list of the slides
pagerAnchorBuilder: buildThumbnails,
- A custom function we’re going to write to use thumbnails instead of numbers in the pager
easing: ‘easeInOutCubic’,
- The easing method I love most!
pause: true
- The slides will pause automatic transitions while the mouse is over one of them.
});
- Close the options hash and end the method call!
- The full list of Cycle options

A Custom Method to Build Thumbnails in the Pager

function buildThumbnails(i, elem){
- Define the function, passing it the index and the DOM element
  - The DOM element refers to each DIV being cycled. You can traverse this element using normal jquery
src = $(elem).find(‘img’).attr(‘src’);
- For example, here we are finding the image tag’s source and setting it in a variable
title = $(elem).find(‘h2’).text();
- Grab the text inside the H2 and set it to ‘title’
html = ‘’ + title + ‘“><img src="’ + src + ‘" width=“50” height=“50” alt="’+ title +’" />’;
- Create a link with the image resized to thumbnail size
return html
- This function will run every time a cycled element is found, and will return its results. Therefore, we end up with a thumbnail for each element that links to its slide.
}
- End your function!

At this point, you should check your page. It should be rolling along smoothly!

See it in Action:

If all went well, you should expect a portfolio that works much like our demo. If you need help, just leave comments.

Code Examples:

Construct the HTML:

Include the JavaScript:

Write the JavaScript:

See the HTML code

Full Tutorial & Demo:

The demo

The tutorial is available on GitHub

Arts & Business Council of Chicago

2010-03-17T21:25:52Z

Welcome aboard, Arts & Business Council Chicago!

Power failure in Phoenix is causing problems for one of our dedicated servers.

2010-03-15T15:24:05Z

Our Network Operations Center writes to us this morning at 10:25am:

Today, our Phoenix data center experienced a major power failure issue
which disrupted services for each of our customers. The purpose of this
e-mail is to provide you the details about what has happened, and what
Codero is doing to restore services to our customers.

At approximately 8:00AM Central Time, utility power to our Phoenix data
center and the surrounding area was cut. The City of Phoenix has not yet
informed us of what caused this issue. Upon failure of utility power,
backup generator fired-up as designed but the switching gear failed to
transfer load to the backup power. Codero staff immediately contacted all
of our power vendors as well as building maintenance since the transfer
gear and generator are not owned by Codero and are out of our physical
control. Unfortunately, the electrical group which could manually
transfer the load did not arrive before our UPS and battery loads
diminished, and electrical service shutdown.

Upon arriving, faulty breakers had to be replaced before they were able to
transfer the load to the backup power source. Shortly after this transfer,
utility power was restored, and the PHX data center is currently back on
utility power.

One of our primary PDU's experienced issues as a result of the complete
loss of power. This PDU services many customers, as well as many of the
primary core network gear. Engineers immediately went to work on fixing
the PDU issue. We will provide an update on this as more information
becomes available.

Codero is currently powering on servers which are not affected by the
PDU's failure, and we will continue to notify you via e-mail as well as
on our twitter accounts (@CoderoNOC and @Codero) as soon as more
information becomes available. We offer our sincerest apologies and our
assurance that we are doing everything within our control to return
services to normal for you.

In addition to communications throughout this situation, we will provide
you a complete report on the issues and what Codero is doing to ensure
these problems don't reoccur in the future as soon as we can.

Regards,

Codero

Blanket Week: Let's Meet the Challenge!

2010-03-11T22:17:09Z

We are rallying your participation to help make this ambitious campaign a success. Blanket Week is a 7-day campaign - Monday, March 15 through Sunday, March 21 - sponsored by 10,000 Blankets to collect new blanket donations for homeless shelters, women's shelters, and emergency efforts. Since 2008, this charitable organization has already donated more than 740 blankets to local hospitals, community services, shelters, and support centers whose important mission is to provide direct and immediate services to those in need.

What kind of blanket?

Any kind of blanket (hand made, store bought, baby, quilt, electric), as long as it's brand new.

How do I donate?

Bring your blankets to a drop-off location or mail them;
You can order new blankets online and have them shipped to 10,000 Blankets;
Groups, businesses, schools, congregations can all participate: organize your group to collect new blankets during Blanket Week, and 10,000 Blankets will help you with the rest of the donation process.

Questions?

Find details, a countdown and reminder, plus more at blanketweek.com.

Roundtable discussion at DePaul's Careers in Information Technology

2010-03-02T14:54:46Z

I'm looking forward to meeting up with DePaul students interested in technology careers in a program sponsored by the DePaul Career Center. I'll be volunteering time in a series of roundtable, network-style discussion sessions. I'm always interested to hear the entrepreneurial dreams of students, to share my own story, and share resources and experiences that might be helpful along the way.

What kinds of questions would you have, if you were starting out your career?

AIGA Chicago Mentor Program a great success.

2010-02-15T15:01:05Z

I spent a few hours Saturday at Gravity Tank, learning more about the AIGA Chicago Mentor Program.

Dawn Hancock at Firebelly Design is doing an amazing job, marshaling over 60? 80? people, introducing the mentor program, and breaking people out into small group discussions based on their interests.

Many of the students coming out of art and design programs in Chicago had similar questions, focused on the role of interactive design, web design, and their chosen design fields. It's quite a struggle for print or graphic design students to both master the basics in their chosen field, and also deal with a market place that seems to offer more opportunities in web or interaction design. And both of those fields require, of course, an understanding of HTML markup if not programming languages outright.

We had a great conversation on the role of Flash and Flash programming, Javascript, and ways to prepare for a career in design--regardless of the medium.

There's a Facebook group if you'd like to learn more or come to the next meetup.

Shutter Soul: Chicago based culture and lifestyle website launched

2009-12-17T19:20:55Z

Got plans for the weekend? Check out Shutter Soul to get the scoop on local art and cultural offerings from an insider's point-of-view. Photography and editorial articles shed light on Chicago's vibrant neighborhoods, spotlighting the community talents and places to a wider audience. The new website features an event calendar, blog, and image galleries of Chicago lifestyle photography. Users can purchase and license prints, send e-cards, or contribute to the forum by submitting ideas, sharing what's soulful in their neighborhood.