    
|
|
|
By: Susan Powers, Assoc. Director of Sustainability, Clarkson University
In my campus role as the Assoc. Director for Sustainability for Clarkson University (an AASHE & STARS Member Institution), I work with several different student groups every year to help them complete sustainability projects. It is time consuming and too often requires a lot of hand holding to get the students through their projects. This changed when I was contacted by staff at Focus the Nation early in 2012. I was impressed with their materials and recognition that it takes many types of students to affect change on a college campus. Working with two sophomores from our SYNERGY sustainability club, we embarked on the Forums-to-Action (F2A) planning and action in September 2012. The sophomores were passionate about making real changes in our energy efficiency, but they were novices in terms of organization and leadership. They had no ideas about what to do, how to organize their peers or engage professionals in their plan for action.
Over the course of four months, the FTN staff worked closely with these students through a series of webinars and weekly conference calls. We worked together through the F2A Guide, which laid out strategies for planning, engagement and fundraising. Both the document and the support from FTN staff were critical in transforming my student leaders from passionate yet somewhat directionless to passionate and successful leaders. These two sophomores found and led a team through the planning and implementation of an on-campus forum. This forum was a crucial step in raising awareness of the problems, bringing various stakeholders together for a common dialogue and garnering excitement about the project that was proposed in the forum. We are now working towards the implementation of a $CORE program for peer-to-peer energy auditing and upgrades in off campus housing. We look forward to reducing students’ energy bills and carbon footprint next year!
As the Campus Advisor of the Clarkson Focus Chapter I did work closely with our F2A leaders, but did not have to do nearly as much handholding and directing as with many other groups (and my F2A leaders were sophomores, not seniors or graduate students as in many other projects). I attribute this mostly to the support and leadership training that the FTN staff provided. We would have not had the opportunity to make the $CORE program work on our campus without their help.
If you are an AASHE Member Institution apply now to Start a Focus Chapter on your campus for the 2013-14 Academic year! Space is limited to 20 AASHE Member Institutions and applications are accepted on a rolling basis. Reserve your spot today to leverage a proven student engagement strategy that produces sustainable energy projects.
]]>|
|
It’s no secret that many believe responsive web is the future. Creating a responsive site means that it’s able to adapt to the many different browsers and sizes that are available. If I want to make sure my website I’ve created on my desktop can be seen on a tablet with minium scrolling and zooming, I’m going to be interested in creating a responsive site.
One reason responsive sites have become popular is because it just makes sense. It’s cheaper than creating one or more extra sites for mobile phones and tablets. It also makes sure there’s a consistent viewing experience amongst devices and desktop screens. It’s not fun having to increase the size of your window or scroll horizontally to see an entire website.
While creating responsive web designs is becoming easier, there are some ways to get it going even quicker. Thanks to some CSS and HTML, we can code it right into our sites. Other elements require a bit more work. Either way, we’ve come up with a list to help you put your responsive site together with minimum fuss and maximum results.
Isotope is a jQuery plugin that claims to create magical layouts that cannot otherwise be created by CSS and HTML. It has the ability to rearrange elements inside of a container so they fit within it as it resizes. You can also use Isotope to filter and sort items by categories and such.
Breakpoint was made with developers and designers in mind. It’s a plugin that allows you to create breakpoints for different browser sizes. When your browser is resized to one of those sizes, the elements are able to fit into the screen.
This is one of my favorite jQuery plugins because it’s for fonts. Far too often in responsive web design, people don’t take into consideration that the headlines should be responsive instead of squished into a certain space. FitText allows you to do just that, but remember to only use it for headlines!
If you like the idea of Breakpoint.js but want more customization, Response.js is the answer. It’s really great for those who know jQuery better than CSS and HTML and need to create responsive web sites. You use your breakpoints, but there’s so much more customization, such as device size, pixel rations and the ability to load different sources for different sizes.
TinyNav is a lightweight jQuery plugin that allows you to change any menu items using lists to turn into drop down menus when the browser is resized. You can specify the sizes as well as which menus change. Its not that broad in function, but it is very effective for what it does.
This system claims to not be a boilerplate or framework, but just a system to make your designs responsive. It seems to be one of the most flexible ones as it doesn’t restrict you to a certain size or to a certain gridsize. They use different CSS classes that are able to float and create their own columns.
The GGS is also a system, and not a ‘framework’. They like to refer to themselves as a starting place or guideline for those who wamt to use a certain amount of grids in their web design. You’re given 18 colums on the screen, but 16 to use in your design. You make up your own widths and gutters to use and essentially go from there.
For a while, many designers were using web designs that were 960px wide. Then that became to small and they went up. Now many designs are being developed using an 1140px width. This 1140 Grid System allows you to create 12 columns to use in a wide width web design.
Bootstrap is one of the most popular frameworks available. It’s a 12 grid framework that has made itself usable cross-browser (including Internet Explorer 7) and can be used responsively in handheld devices. It comes with various styling components, typography and JavaScript to use and create sleek, intuitive sites.
SimpleGrid takes the idea of grids and simplifies it. With most grid systems and frameworks, you have these unknown classes and unknown columns. Simple grid has classes that specify what columns are first, middle and last. In addition, you can add different ‘slots’ to the columns to make it seem like there are more columns. It’s a very simple and straightforward framework.
Much like any designer or developer, you probably sketch out your designs before you actually go about making them. Hopefully you do. If not, perhaps you should start by using these RWD sketch sheets. They come with difference device and desktop sizes on them so that you can plan everything out.
If you like the idea of the sketching on paper, but want to have all your doodles together, you may consider getting the responsive design sketchbook. It comes with 50 pages, spiral bound with various screen sizes on each page. All the grids and math are already done for you, so this is a great tool for beginners and experts in responsive design.
This is a nice little resource for web designers whether they are looking for something for responsive design or not. It’s a PSD that allows you to get the essence of a website by adding headings (typography), logos, colors and other elements. The reason why this works for responsive web design is because it doesn’t imply any dimensions, just a digital idea with no restrictions.
There’s a ton of math involved in creating pixel perfect responsive designs. It’s necessary that your math is correct, as well, because you’ll be dealing with different percentages, widths and browser sizes. To help out, here’s a calculator that gives you the correct math and the CSS to go along with it.
It’s imperative that we take notice of what responsive web is doing. Many clients will want to have their sites available to a variety of devices, and it’s just more cost effective to create responsive sites. In addition, most of your frameworks and other resources for responsive design really help cultivate organized and high-quality, standard websites.
What are your favorite ways to start responsive designs? Have we missed a resource you rely on? Let us know in the comments.
| 2000+ Royalty-Free Cartoon Vectors – only $27! |
 |