Scaffolding

Bootstrap provides various elements for developers to use, ranging from scaffolding to jQuery components. The scaffolding gives developers an easy way to build complex layouts based on a 12-grid system. This is all based on a system of various div tags with classes that associate the width of said div. For example, if you want a 3-column layout in a 12-column grid system, you could use three div tags with the class span4.

Example scaffolding markup

Even though some may frown upon the extra markup that this scaffolding produces, there are many advantages. Since it is all based on the grid system, spacing will be consistent throughout the site. Since all of the classes are already built, it also allows for easy development and/or rapid prototyping. Finally, building a site using the scaffolding allows developers to take advantage of the built-in, responsive design.

Responsive Design

One of the biggest updates that came with version 2.0 was the responsive design support. This means that one site can be optimized for various widths and devices. Out of the box, Bootstrap supports five different displays, ranging from smartphones and tablets to wide desktop computers. This greatly reduces development time when you need to have a website optimized for multiple devices. Even if you want to use advanced JavaScript elements like a carousel, modals, tooltips and more, the responsive design still flows through all devices.

JavaScript Components

The Twitter Bootstrap utilizes jQuery for various built in plugins. These plugins range from the simple to the complex and include:

Modal window with a popover

• Modal
• Dropdown
• Scrollspy
• Tab
• Tooltip
• Popover
• Alert
• Button
• Collapse
• Carousel
• Typeahead

Many of these components have multiple variations and options. For example, the buttons can be used as a toggle, can display a state (such as loading), or even can be used as check boxes and radios. Most of these components also support Bootstrap’s built-in, responsive design out of the box. The carousel will re-size itself whenever there is a change in the browser’s width, or when loaded on a different device. This gives all users the ability to use the carousel and see it optimized for them no matter what device they are using.

Much More

The Twitter Bootstrap offers many more components that give developers a great foundation to build a unique website or the next big web app. You can view Bootstrap and see all of the examples on their GitHub page. Since Twitter is hosting this on their GitHub page, it is constantly being updated and they also allow you to fork the code to tweak and create unique variations. There is also an unofficial Tumblr page that showcases many projects and sites built with Twitter Bootstrap.

Get Started Today

Etensity Calling Cards

Longing for a trip down memory lane? Can’t find ways to inject “click-and-mortar” into everyday conversation? Meet up with your fellow Innovators and reminisce while supporting a great cause:  The Children’s Inn at NIH. You’ll have fun, see former colleagues, and benefit a most worthy charity on February 25th at House of Sweden in Georgetown at A WINNter Affair (coordinated by Beth Maloney). FYI:  A lot of Etensity alums will be going stag, so if your significant other doesn’t want to listen to stories from a dozen years ago or dance, come anyway!

A WINNter Affair
Presented by The Children’s Inn at NIH and the Young Ambassadors Council
Saturday, February 25, 2012
8:00pm – 12:00am
House of Sweden

Celebrate The Children’s Inn at NIH with an evening of cocktails, hor d’oeurves and dancing with live music by The Winn Brothers Band!
on February 25^th at House of Sweden in Georgetown at A WINNter Affair.

Check out the details and buy a ticket today:  http://bit.ly/A-W-INN-ter-Affair

Note:  There are a couple of sponsorships still available if your company is interested. Contact Beth for more information:  bmaloney@palladianpartners.com.

About the Children’s Inn at NIH

More than 20,000 sick kids and their families have to travel across states and continents to be treated at the NIH. Imagine being that far from home and trying to retain some sense of “normal” in a child’s life – that is what The Children’s Inn does every day and they need our help.

The new office is located at 9408 Grant Ave., Suite 403, Manassas, Va. 20110.  Contact information will remain the same; 703-644-8422 will continue as Saforian’s main phone number and info@saforian.com will continue to accept online inquiries.

Due to recent growth and an extensive roster of ongoing clients, Saforian outgrew its previous facilities and needed to expand. We’re so excited to call Old Town Manassas our home. We’re conveniently located in the DC Metro area but we also get to experience the charm of a growing and vibrant historic community.

Since the late 1990′s, Manassas has stepped into the mainstream of regional development with major high-technology firms and defense contractors, among other businesses, opening offices. With initiatives to preserve and revitalize the downtown area, Manassas focused on the adaptive use of historic buildings and welcomed new businesses into these revived properties. Manassas became a Virginia Main Street Community in 1988 and has experienced explosive business growth ever since.

Here are a few tips that helped Wagner Skis get to the top in the Google world:

1. Keyword Research: Identify keywords and phrases that your target audiences would use in searching for you. This can be done by analyzing your current referral statistics, talking to staff, interviewing customers and using other online tools. Once your site is launched, those keywords should be monitored and evaluated regularly and adjusted based on performance.  If you find that certain words and phrases aren’t working, swap them out with others that are.  There are a number of online resources and outside vendors available to track keywords, and provide analysis and reporting.

2. Keyword Placement: Sprinkle those keywords and phrases generously throughout your site – especially on the homepage. Terms should be used in a relevant and visible way. Avoid making keywords invisible or using other “black-hat” tactics; this will result in your site getting blocked by major search engines. It’s a good idea to develop landing pages for specific phrases, particularly if you want to start purchasing ads and monitoring specific campaigns. Content should also be updated regularly so search engines, and your visitors, have something new to look for.

3. Page Coding: Pages should be coded using clean, accessible, semantic web standards. This will result in a reduction of the overall size of your page, allowing more of the page to be indexed. Proper semantics (structure) notifies the search engines on the keyword priorities and word grouping preferences i.e., page title, headings and lists. Other minor, but helpful, resources like setting up robots.txt and adding a Google site map can aide search engines in finding all of your pages.

4. Linking: The only way to really increase your ranking is to have other reputable sites link to you. Think beyond your website. Of course you want to have links to the new site from other sites, but sharing that link on blogs, forums, social media outlets, news sites, customer sites, etc. will have a great impact. For example, you can create partnerships with customers or clients to develop joint announcements about your work together and provide reciprocal links – a win-win for both organizations. That’s just one of many ways to improve your site’s popularity and make your ranking go up.

5. Content is King: While there are many good SEO consulting firms out there, be very careful of the ones that promote their own in-house software or “guarantee” top rankings. Unless they use “black-hat” methods (which could get your site blocked), there is no such thing as a guarantee of appearance in top results. The real rule to SEO is that good, free, original content will help you gain an audience. The internet can spur brief – yet viral – popularity, which will help you achieve overall higher search engine rankings.

1. Create a fundraising widget that can be embedded anywhere people are talking about your cause (blogging platforms, Facebook, sponsor websites, your homepage, and etc.) With one click no matter where they are, web visitors can connect with your campaign.
2. Be active during live events so you can talk with supporters, answer their questions and drive donations. Your social media conversations about the event can drive donations from both people who couldn’t attend the event and those who are in attendance but want more information before they commit.
3. Pre-define content – LOTS of content – for constituents to use in their own communications, including tweets, Facebook posts, blogs and etc. When you give users the right words, it’s easier for them to share your fundraising info across all of their communication channels. And, the message stays consistent, which maximizes effectiveness. Be sure to define specific keywords and phrases to be used in all content so search engines and visitors can find you quickly.
4. Create connections with your biggest online advocates and ask them for their help on campaigns and outreach during your key fundraising seasons.
5. Maintain an active social media presence throughout your fundraising season to encourage conversations, answer questions and acknowledge the participation of your supporters. Doing something good feels great, but constituents don’t mind being appreciated too. Giving them kudos makes them feel proud. They’re likely to share the feeling and inspire others to donate as well.

There is so much important work going on to better our lives, our communities and our world; we at Saforian appreciate the opportunity to be part of the solutions created by non-profits like these:

• No Kid Hungry
• Campaign for Tobacco Free Kids
• School Theatre
• National Association for Social Insurance
• American Red Cross
• Big Brothers Big Sisters
• Community Action Project
• Share our Strength
• CNA Corporation
• National HIV/AIDS Partnership
• NeighborWorks
• The San Antonio River Foundation

We give careful thought to the goals our non-profits want to achieve and then we strategically build solutions that work in harmony with total campaigns. From fundraising and education to events and specialized mobile apps, our experienced strategists, designers and developers work together to create impactful solutions that help build awareness and make it possible for non-profits to share their message with more people than ever before. That makes our clients happy…and we get warm and fuzzy too!

It’s simple really. We excel when we combine our skills and experience with causes we can be passionate about.  When you partner with us, you partner with people who care. And that makes all the hard work worthwhile.

The Campaign for Tobacco Free Kids held its 15th Annual Youth Advocates of the Year Awards Gala on May 18, 2011 and Saforian was a proud sponsor of the event. The evening honored the accomplishments of outstanding young people and other leaders in the fight against tobacco use.

Saforian was pleased to partner with Campaign for Tobacco Free Kids and its youth advocates by designing and developing many of their online initiatives, including the official website for Kick Butts Day.  This national day of activism empowers youth to speak up and take action against Big Tobacco at more than 1,000 events from coast to coast.

“We at Saforian believe in helping good causes, and helping fight the world’s number one cause of preventable death makes sense to us,” noted Todd Rice, Saforian’s founding partner and creative director. He added, “Sponsoring the awards gala is just one small way we hope to make a difference in our communities.”

As Saforian continues to support the Campaign for Tobacco Free Kids, we hope you too will be inspired to be part of the life-saving changes this organization strives for.

The term open source is defined as having access to the end product’s source materials and code, but it definitely means much more to many of our customers. Often, clients come to Saforian wanting to move away from an existing proprietary system that they have either outgrown, or it can no longer perform at the expected level. We help them understand that open source technology gives them the freedom to manage their system without the expense of being tied to a specific company or even a specific developer. With open source, any client can take their code to any professional development firm. They are not locked in. That gives them better control and the ability to tailor the system to meet their specific needs.

As Drupal admins, we at Saforian believe in the flexibility that open source provides. And as part of the Drupal community, we know that the best development practices and the most innovative technologies come when we work together. From a collaboration standpoint, open source gives you the ability to collaborate with developers and advocates all over the world. With all of this technology readily accessible, a developer no longer has to reinvent the wheel every time a feature needs to be developed. This is the true power open source.

All of the popular smartphones on the market today including the two biggest, iOS and Android devices, come with a mobile browser that utilizes Webkit for rendering. Webkit is one of the most advanced browser engines available right now, and it features the most HTML5 and CSS3 support as compared to other browsers. This is a very good thing, because it gives you the freedom to utilize these options to not only make your site look good, but also to reduce load times.

There are plenty of mobile frameworks to chose from;  however, these are the best available right now for features and compatibility. The purpose of a framework is to reduce the amount of initial development time you spend setting up your site or app. Frameworks also give you pre-built functionality. A lot of frameworks include your basic navigation and layout, but they can also include features such as gesture recognition, geolocation, offline storage and easy customization.

jQuery Mobile

jQuery Mobile is the official mobile framework by the team who brought you jQuery. It is supported on a huge variety of platforms including iOS, Android, BlackBerry, bada, Windows Phone, Palm webOS, Symbian and MeeGo. jQuery Mobile is one of the newer frameworks, but it is already on alpha version 4.1 and is constantly being updated.

jQuery Mobile is one of the biggest and most diverse mobile frameworks available. It can easily be used for a mobile website or a mobile app. If you think of a UI element that you need for a mobile site, chances are jQuery Mobile has taken care of it. Also, all of the elements are fully customizable by CSS. The documentation for this framework is very extensive, so you can easily learn how to do exactly what you want.

Visit Site View Demo

jQTouch

jQTouch is one of the original mobile frameworks available, and it is still one of the best. Originally developed for iOS devices, it also works on Android and other forward-thinking devices. The style of the framework definitely has a native iOS feel to it, which is great for any iOS user that uses your site or app.

Features of jQTouch

• Easy Setup
• Native WebKit Animations
• Image Preloading
• Callback Events
• Flexible Themes
• MIT Licensed
• Swipe Detection
• Extensions

Visit Site View Demo

Now It’s Your Turn…Go Develop

Getting started is easy; just visit these websites and download the latest release. Both of the frameworks are free, so you can play around with them before you ever implement anything. You can also visit the framework’s site on your mobile device to experience how it functions.

Have you created something with these frameworks or have another framework that you like better? Let us know in the comments below.