Check out this fun and innovative desk organizer project on Kickstarter that my brother and some fellow classmates of Cleveland Institute of Art started. It’s simple, functional and versatile and that’s why it works. Use the NESL for a variety different things from a phone holder to cable management. See this cool desk organizer in action in the video below.

If you like the NESL you can support their project through the 5/23/2012 8:05 PM on Kickstarter.com.

The NESL has also been nominated to be a finalist in the William McShane Fund with Buckyballs and Brookstone contest for a chance to receive $25,000 in start up cash and a nationalwide Brookstone product launch. If you like the NESL, vote for the NESL in the competition. You can vote once a day. The first round ends on May 23, 2012 and the top 6 will proceed to the next round when voting ends 5/31/2012. VOTE NOW >>

Earth Day just past about a week ago and I’m going to dig into the archives to feature all the eco-friendly green charities that I’ve posted about in the past.

• April 2008 – MyBabyTree.org
• March 2009 – World Wildlife Fund
• April 2010 – The Convervation Fund
• June 2010 – Charites Assisting Gulf Oil Spill Clean Up
• July 2010 – Oceana
• January 2011 – Alaska Wilderness League
• July 2011 – Charity Water: Rachel

Also check out all my other posts related to being more green and thinking about our wonderful Mother Earth. Let’s strive to be more eco-friendly and make the norm.

This is the quote from Facebook:

On April 26, we will be updating the size of the profile picture on all Pages. We are letting you know about this small change in advance so that you can update your profile picture on April 26. The new profile picture will be 160 x 160 pixels and will sit at 23 pixels from the left and 210 pixels from the top of the Page.

Facebook’s timeline profile image has gone to a larger 160x160px from 125x125px. The change will have the biggest effect on those who designed their profile image to align with their cover photo, it can throw things off quite a bit. I took a before and after screen shot to show what the larger profile image did to our cover photo.

It’s not really evident at first but you can see part of our tag line was covered up by the larger profile image and the profile image background didn’t align with our cover photo any more. The change was a minor effect to us, but I’m sure there are some pages where the effects were much more dramatic.

If you’re looking for a Facebook profile image/cover photo design template the post to I linked to above has a downloadable version.

I fixed our profile image/cover photo already, but this is just one small example of the ever-changing web environment that we have to constantly keep up with and be flexible to adapt to. To add to this point we also recently found out that the API we were using for LockerPulse is going to be discontinue and Adam is already on top of that working on a solution. Pure Adapt being a small flexible company has surely become one of our top competitive advantages.

The organization that I have selected this month is Basket of Hope. They are an organization that gives hope to children who have been diagnosed with cancer.

The Mission is to give the hope that comes from Jesus to newly diagnosed children and their families affected by cancer or other serious illnesses, primarily by the delivery of a Basket of Hope filled with inspirational materials to nourish them mentally, emotionally, and spiritually. – Basket of Hope Mission

Like the name says, they give hope through a basket full of inspirational stuff. Baskets include anything from toys, pre-loaded mp3 players, games, movies, and more to show those diagnosed with cancer that the community cares. The baskets are for the children, but parents would also receive a tote of Bibles, inspirational books, journals, and music for encouragement.

Basket of Hope sends out thousands of baskets throughout the country to children diagnosed with cancer every year.

Learn how you can give these kids hope during very tough times at basketofhope.org.

Check out the two Pure Adapt website screen shots below for examples of the same site in two different resolutions:

1440×900

960×640

You can also just visit PureAdapt.com and see it in action by simply visiting the site and resizing your browser to see the site change on the fly.

How is this done? I’ll go through some of the key components to designing a responsive website below:

• Percentages – Using percentages is the key to making a responsive design, because it keeps elements flexible. For example setting the width of a div to 90%, the actual width is different when your window is 1440px wide compared to 960px. The same div would be 1296px on the 1440px window and 864px on the 960px window. As the window size decreases this div will also decrease in size.
• Images – To make an image fluid all you have to do is set the max-width to 100%. This works in most modern browsers where it recognizes the original size of the image and it won’t oversize it and distort it. Older versions of Internet Explorer unfortunately do not support max-width. The style to make all html images fluid is pretty straight forward:

  img{
  max-width: 100%;
  }

  For more information on fluid images see Unstoppable Robot Ninja’s Fluid Images post

• Float – Floats are important in a responsive design because as the screen size goes down you’ll need to stack your elements on top of one another to keep a user friendly flow. If you had a set of elements floated left it should stack in order of your html, but you’ll probably have to use CSS Media Queries (more info below) to adjust margins and padding.
• Media Queries – This new CSS3 technique is extremely helpful in keeping a user friendly interface as you decrease in screen size. It offers the ability to make specific adjustments based on your screen size which makes it a very powerful technique. It’s like using if statements on your style sheet for screen sizes, like if less than 800px div id=”nav” is 150px instead of 200px. Here are a couple examples of media queries:

  @media screen and (max-width: 800px){ /* Screen sizes less than 800px */

  #nav{
  width:150px;
  }

  }

  @media screen and (max-width: 1024px) and (min-width: 800px){ /* Screen sizes 801px – 1023px */

  #nav{
  width:200px;
  }

  }

Those are some of keys to creating a responsive design. To see responsive designs in action check out PureAdapt.com, SmashingMagazine.com, UnstoppableRobotNinja.com and Alistapart.com example site.

Now for more information on responsive design visit Smashing Magazine’s Responsive Web Design Guidelines and Tutorials and A list apart’s Responsive Web Design article.

The new center is named after Sister Maureen Joyce who was a former executive director of diocesan Catholic Charities, who passed away last year.

“She was so dedicated to the poor and the people in need,” said Rev. John Bradley, the program coordinator and pastor at Blessed Sacrament parish, which will continue to run its food pantry at the uptown Central Avenue parish. – via Times Union

The new Joyce Center location will undergo a $400k renovation before it becomes the new location for the soup kitchen along with other services including clothing thrift shop, medical screening, legal advice and more.

Today the Pure Adapt team will be volunteering some time to assist in the move of the soup kitchen as part of our goal this year to give more back to the community and more.

For more information on how you help the Center City Soup Kitchen, call Blessed Sacrament Church at 482-3375 or email blessedsacalbany@aol.com.

• Let me open the recap to say 2011 was one hell of a year with highs of high and lows of low.
• We had a record breaking holiday season and year. Check out Cyber Monday 2011 packages.
  
• We have a new and updated office with real desks.
  
• We finished our hiring process and welcomed Reece to the team starting in 2012.
• We overcame adversity over and over again in 2011 and Adam sums it up nicely in this blog post. 2011 was a tough year with a partner leaving being the biggest obstacle, but we persevered to another great year.

Another exciting year is upon us and we look forward to continuing to grow Pure Adapt. We have lots in stored for 2012 and I look forward to writing My Monthly Charity posts again.

In a previous post I wrote about the CSS3 we used in the new Pure Adapt site and now I want to post about new HTML5 elements we used.

The HTML5 elements that we used are relatively easy to understand since they were in a way already being used. For example instead of naming to containing div id=”footer” HTML5 now has a dedicated tag for the footer. Simple as that. Here are the new elements we used in the redesign.

<header> – For an introduction of a document or section, could include navigation

<nav> – For a section of navigation

<section> – For a section in a document. Such as chapters, headers, footers, or any other sections of the document

<footer> – For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

Definitions via w3schools.com

The elements we used are pretty straight forward, but HTML5 has much more exciting new elements to offer like the <video> tag where a link to the source can add a video to your webpage without embedding video code. Now for more information on HTML5 please visit one of my go-to sites for development, w3schools.com.

I’ve talked about the CSS3 and HTML5 that we used in the redesign, but there’s one more post about the design of Pure Adapt site featuring responsive design techniques coming. New Pure Adapt Site Design – Responsive Design post is coming soon.

Now per the suggestion of a friend, the organization that I’ve selected is The Shade Tree. The Shade Tree is one of Nevada’s largest shelters offering free assistance to women, children, and elderly experiencing abuse, homelessness, female veterans, and those with physical disabilities.

The Shade Tree Mission – To provide safe shelter to homeless and abused women and children in crisis and to offer life-changing services promoting stability, dignity, and self-reliance.

At The Shade Tree, we believe…
That no one should ever have to endure a state of homelessness, existing in fear for personal safety and without the means to meet even the most basic of human needs – food and shelter.

That every human being, regardless of social status, has the right to be treated with dignity and respect.

That all homeless children are victims because they lack choice and mobility.

That homelessness is a community problem that impacts everyone. That everyone can be a part of the solution.

Established in 1990 The Shade Tree has grown to be one of the largest shelters in Nevada. With the aid of Donald W. Reynolds Foundation The Shade Tree has a facility that is that largest of it’s kind in Nevada with 364 permanent beds providing over 100,000 nights of shelter each year. A few programs that they offer include Day Shelter Program, Emergency Shelter Program, Life Skills, Children’s Activity Center (CAC) and many more.

They do great work to help those in need, so find out how you can help at http://www.theshadetree.org/ and $5.00 can go a long way.

Here’s how a $5 donation can help:
$5 buys a gallon of milk to help our children stay healthy
$5 buys two 24-hour bus passes to help our women seek employment
$5 buys 18 4oz. packages of applesauce; a nutritious snack
$5 buys a package of laundry detergent to keep our families’ clothes clean and fresh
$5 buys 6 boxes of Kleenex to stop the sniffles in the winter time

CSS3 Transitions are effects that allow you to change the style of an element gradually to another style. This is a great new property that adds animation without having to use Javascript or Flash. We used this in our top navigation so when you hover over one of the navigation icons it gradually drops the name of the link. see CSS3 transition property tutorial

CSS3 Border Radius property lets you create rounded corners without having to use photo editing software to create rounded corners and piecing it together in HTML. We used this property throughout the entire site. see CSS3 border-radius property

CSS3 Box Shadow property adds a shadow to elements like your div. We used this property right on homepage so when you hover over our featured sites there’s a light glow around the image. It’s not a shadow, but it’s done with the box-shadow property. see CSS3 box-shadow property

CSS3 Media Queries have been around, but with CSS3 you have much more control. Now you can assign different style sheets depending on the screen resolution, which is extremely helpful with the amount of devices that websites are viewed from. This feature was put into good use helping us create a responsive designed website, so as the resolution changes it’ll adjust to a better viewable layout. There’s more to responsive design than just media queries but that’s for another post. see CSS3 media queries tutorial

Those are examples on how we used CSS3 in the redesign of the Pure Adapt site and that’s only small sample of all the great stuff the CSS3 has to offer. Visit PureAdapt.com to see the complete redesign. Also note that CSS3 doesn’t work across all browsers. Working properties may vary across browsers, but most modern browsers have adopted CSS3. For more details on CSS3 visit w3schools.com for CSS3 tutorials and much more, it’s great web design resource.