“Ugh. How am I ever going to get all this done before the conference?!”
You are planning a conference. It’s July and the red carpet unrolls in October but you still have loads of work to do. There are speakers you need to contact, handouts you need to store, exhibitors and sponsors wanting to know how you are going to connect them with the attendees. Help!
That’s where Pathable comes in. Pathable is social software for business conferences. It creates an online community for attendees, speakers, exhibitors and sponsors to meet, converse, share ideas and schedule private meetings.
At Social Driver, we talk about using communications to create engagement among your audience. That means creating spaces where your audience talks with each other, strengthening their relationship with you. The best part of engagement? Your audience is doing all the work!
From a conference organizer’s perspective, Pathable helps attendees connect with each other as well as the exhibitors and sponsors, even before they pick up their badge. Attendees can create an online profile and a personalized page, link to their Facebook, LinkedIn and Twitter accounts, access handouts, create a schedule, and set up private meetings.
Pathable is also easy to integrate. Speakers can upload and manage their own handouts, taking the burden off of you to find and manage a hosting location. Exhibitors and sponsors are displayed on an interactive map of the exhibit hall and can upload their logos, connect with attendees, woo possible buyers, and set up private meetings for further discussion onsite.
Pathable gives attendees a way to see who else is coming to the conference, begin conversations before they arrive, and continue the engagement after they return home. Attendees can also plan their personal agenda so that you can hit up the best parts of the conference for them.
With the increase of smartphones and tablets at conferences across the country, Pathable is also able to integrate with mobile platforms. Attendees can check in with the community from their smartphones in the exhibit hall or in the hallways outside of sessions.
So what are you waiting for? Increased engagement, easier planning, and happy sponsors – aren’t those all things a conference planner dreams of?
This is the third post in a series about Responsive Web Design, described in plain language from a front end designer.
Ok, so we’ve discussed why responsive web design is an excellent solution for our websites. Then we dug a little deeper into how it actually works. Today we want to share our 20 favorite responsively designed websites and why we think they’re so great.
The largest responsive website to date, The Boston Globe handles loads of content effortlessly, keeping the site intuitive and the content easily accessible on the device of your choice.
You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!
I love this site. I really do. Smashing takes advantage of horizontal screen real estate like few responsive sites do. Go ahead expand your browser window out as far as your screen allows and it just maximizes the space without feeling cluttered. Furthermore, the strength of the layout and menu structure does not degrade at smaller screen sizes. Nicely done.
Clean layout, beautiful photography and playful iconography made me like this site immediately on my first visit. It’s a joy to look at and navigate on any device and if you’re a foody looking for scrumptious, healthy recipes it may be love at first site.
Type designer, Jan Tschichold once said, ‘Simplicity of form is never a poverty, it is a great virtue.’ The simple layout and understated menu and graphic elements juxtaposed against beautiful fluid images communicate that excellence in form and function are givens when working with this architecture studio. This site just says ‘good design’ whether I’m viewing it on my iPhone or my iMac.
If you haven’t check out Sphero, you should. It’s an amazing robotic ball gaming system for IOS and Android devices. But I’m not reviewing their product, just there site. A recent web design trend is the use of background photos that flood the browser window. Sphero does this well. The abstract product photos with a grid overlay don’t distract from the important content. I like the permanent menu and footer bars on my desktop, but appreciate how the footer moves to make room for more important content on my iPhone. Overall, the site is intuitive and attractive. An excellent example that responsive design done well looks great on any size screen.
It might be the conspicuous green frog that causes me love this site. Either way, it’s worth resizing your browser window just to see him change size, shape and color. But seriously, this is a polished responsive site. The breakpoints correspond well with the layout requirements and the result is a sharp looking site that does not degrade at any size. The main menu always looks good even when those sweet little icons go away to make room on smaller screens.
The Grey Goose site shows that designing responsively does not limit our designs to columns of fluid text and images on solid backgrounds. The sky is still the limit with what we can do responsively. Beautiful photography, parallax scrolling, intuitive navigation and refined typography combine to create a site that is as equally functional and attractive on my smart iPhone as it is my iMac. This list is not in order of our preference, but if it was I think Grey Goose would be at the top.
With a name like “New Adventures In Web Design,” one would expect a responsive site for this web design conference. I think my favorite aspect of this site is the use of fluid typography. Notice how the menu, headline and body text resize subtly to achieve optimal legibility on all devices. Good design is all about the details and this site has the details dialed in.
Websites in the higher education space are not necessarily known for being on the leading edge of design trends. So discovering the Lancaster site was a nice surprise. I appreciate its simple, modern, non-trendy look and feel. In spite of it’s large amount of content, it’s as easy to navigate on my iPhone as it is on my iMac.
The spacious layout, bold typography and simple icons make fundraise.com easy to look at and navigate.
Nick La’s blog is a wealth of information and resources for any designer or front end developer. But that’s not why it’s in our list. The great content is accompanied by subtle texture, beautiful illustration and–thanks to its responsive nature–is easily accessible no matter what device you fancy.
Heathlife celebrates the heritage of one of London’s largest parks. Though maybe not quite as stunning as the park itself, this website is a beauty on screens large and small.
Though this site is not fluid, it has well structured layouts for any device class. Where many large responsive websites omit content for smaller screen sizes, London & Partners keeps it all, maximizing accessibility for mobile users. This is a good reminder that responsive design is an excellent solution for large and small site alike.
Oliver Russell has done a good job of building a site that responds well on mobile devices while keeping the integrity of the design in tact. I appreciate the shallow and straight forward content structure. My eyes are drawn to the most important sales points and I can access nearly all that I want to know without leaving the homepage. Refreshingly simple compared to the laborious, text heavy website of other marketing firms. One complaint: I would like to see the site expand beyond width of 960 pixels on larger monitors.
Ryan is product designer at Facebook, but has invested in a personal portfolio site that is a cut above the norm. Well branded and brilliantly responsive, Ryan’s site is a thing of beauty on any screen.
Jessica’s lettering and illustration rocks and so does her site. Seriously, I can’t help but smile when I look at it. It is simple and elegant and delightfully fluid. Oh, and for good measure she through in three additional themes. One of which is “Teen Girl Mode”, replete with rediculously distracting animated gifs and a hideous cat illustration (Just click on the little heart in the upper right corner).
Maybe it’s the friendly King Trident mascot, but this happy little site makes me want to download the Fork cms straightaway, or at least “try the demo”. To increase mobile load times the CSS omits the fun header illustrations at smaller sizes. Overall, site reformats and displays nicely on a variety of display ports.
Ethan coined the phrase, ‘Responsive Web Design’ in 2010, so it comes without surprise that his website is responsive. Ethan’s belief in articulate and intelligent design is expressed in a site that is straight and to the point without extraneous decoration.
This t-shirt shop site stretches and shrinks to fill any size view port with photos of their hip graphic t’s. Fluid images and type make this site a joy to browse on any size device. One complaint: I think the menu could be smaller for use on smartphones. Currently it takes up an unnecessary amount of valuable screen space on my iPhone.
Trent’s site is an excellent example of fluid type. On a large monitor the text size is slightly bigger for increased readability, whereas the text shrinks to achieve comfortable line lengths and legibility on my iPhone. I also really like the simple block print style illustrations Trent includes in his articles.
This is the first post in a series about Responsive Web Design, described in plain language from a front end designer.
Responsive Web Design has recently become a hot topic in the web design and development community. For those of you who are new to this term, responsive web design is a way of creating websites so they are able to adapt for optimal viewing across a variety of devices. Though the practice is relatively young, it is quickly being adopted as an industry standard–and for good reason. Practicing responsive design can help you connect with your audience, stay within budget and as we like to say here at Social Driver, Get With The Future.
In order to connect with your people on the web, you have to first understand how your audience is accessing the web. I could probably sum up the modern web environment with two words: “mobile explosion.” This may conjure very interesting mental images, but let me explain my word choice with the following stats:
You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!
Okay, enough stats. What do all these figures mean anyway? In summary, more and more people are browsing the web on mobile devices. And if they aren’t yet, they most likely will be very soon. With the introduction of the tablet, “mobile” no longer pertains only to smartphones or feature phones. The gamut of screen sizes and resolutions has widened. People may be viewing your site on a Samsung Galaxy with a resolution of 480×800, a 768×1024 iPad 2 or a 1080×1920 desktop monitor. How do we create optimal web experiences for people across such a wide variety of devices?
Responsive Web Design helps us do just that, by enabling a website to respond to people’s browsing preferences. The content on the page is formatted and scaled to view beautifully and legibly whether on a tablet, smartphone or desktop monitor. This increases our visibility to our audience and helps us connect to people no matter what device they happen to prefer.
To understand the “why” behind responsive design, it’s helpful to understand the status quo. Currently, common practice is to design a desktop/laptop version of a website that will fit well in the minimum screen resolution of a company’s target audience. If the budget allows, the company may develop a second fixed width layout that will view well on most smartphones. While this approach is not necessarily wrong, it has a couple weaknesses.
The first is an increase in development cost and project timelines. Many organizations do not have the budget to develop both a desktop and a mobile site. Programming, designing and maintaining two unique sites often takes more time and therefore more money. Furthermore, not all mobile devices are the same. Tailoring a site to view optimally on an iPhone 4S does not mean it will look good on a Samsung Nexus. And for non-mobile sites, sticking with the good old 960px fixed width site no longer creates an optimal viewing experience on an increasing amount of desktop monitors, who’s resolutions are increasing. That is, unless you like half your browser window to be margins.
By designing responsively you can often save money by creating one website that fits nearly all devices. You will no longer have to worry about managing separate content for your mobile and desktop sites. Now people can access the same content on your website regardless of their device preferences.
While responsive web design is a relatively young practice, it is quickly becoming industry standard. More and more, we are recommending responsive design to the companies we work with. Not only does it help them keep costs down, but it also ensures that their websites will be forward compatible. As pixel densities, screen resolutions and aspect ratios of new devices change, practicing responsive design helps us create websites that will continue to view optimally on them all. In an industry where technology and trends are quickly evolving, it’s important that we’re providing companies with sustainable solutions.
Some companies’ audiences do a majority of their web browsing on desktop computers. If this is true of your company, we think the question to ask is “When does responsive design makes sense for us?” When will enough of our audience follow suite and begin using mobile devices? According to the statistics, the answer is sooner than we think.
Well, we’ve covered the main benefits of responsive web design and you may be curious as to how it works. Don’t worry! I’ve got you covered. Stay tuned for our next two posts, where I’ll dive a little deeper into how responsive design works and we’ll share with you our 20 favorite responsive websites.
The Capital Area Food Bank distributes 30 million pounds of food annually, half of which is fresh produce. They are an incredible organization and when they came to us looking to refresh their website with a new brand identity that they had developed, we were honored to be able to help. They had limited resources and a quick timeline, but needed a website that reflected the incredible programs that they run in the DC area, like the Governor’s Bowl and the Map the Meal Gap. Many of the people that they help don’t have access to a computer, so the website also had to be accessible through mobile devices. The new website that we helped them design and develop highlights the work they are doing in our community. It is also a responsive design, so the same content is viewable across any type of device (try dragging your browser window to see).
Congratulations to the Capital Area Food Bank on a successful launch! You can read the official announcement here (thanks for the shout out!) We support the Food Bank’s mission and look forward to the exciting opening of their new food distribution center.
Before
After
