With so much great information, it was impossible to put it all in one post. So here are more insights on the up and coming web trends from An Event Apart day 2.
Responsive Design is Still Hard/Easy! Be Afraid/Don’t Worry! – Daniel Mall (@danielmall)
Daniel Mall was a dynamic speaker. He primarily talked about HOW we work – our process and how it should change and adapt as much as web design does.
“Why do we model our agencies or teams around the outdated idea of the assembly line? We are turning web into a commodity.”
He says we should be working in a framework, not a process. A process involves predictability, with the same result every time. A framework has structure, but still allows for surprise and innovation.
Mall pointed out that so many of us are working in a way that we work alone until the next person takes over.
“When we all work in our own “lanes” we race to the finish and leave the others to do their part alone.”
Our process should be less about passing the baton, and more about agile framework which allows for working on all aspects of a product at the same time. This allows everyone to contribute ideas.
“The Superfriend Model: No one is the boss, just get whoever you need for your project at the time.”
Another interesting insight is that of a performance budget – structure how fast a page on the site should load by giving it a budget.
“To appear faster than your competitor’s website, yours needs to load atleast 20% faster.”
A third great idea is a visual inventory. In my eyes, this is like a mood board taken to the next level. It is a way to show the client what they want, without spending weeks creating a comp they may hate. For example, Mall used CNN. Imagine they want their site to be “fun.” Put their logo on an already existing “fun” site and see if that is what they have in mind before you move too far in that direction. Design is about having the right conversations with the client.
“Ask – are you sure your brand wants to wear those clothes?”
“If you listen hard enough, clients will tell you about their brand.”
The Art of Anticipation – Derek Featherstone (@feather)
Derek Featherstone started off by putting us in a state of mind about context. So often we view context as device, but this is not true.
“Context is time, location, proximity, device, state of mind, capabilities, activity, interest and interaction.”
He spoke about how to use the knowledge you have of these things to your advantage, to give the consumer a better end product. His example was a conference – why not make the schedule appear first the day of the conference, when that is what everyone is looking for.
“Since the schedule is the most important thing the day of the event, it should be easy to find.”
Another interesting term Featherstone brought up was Minimum Viable Interaction. What is the least amount of interaction someone can have with your site to still understand it.
“Can someone interact with your site by only reading the headings?”
He also brought up HOW we work – that we should track modes of interaction to schedule our difficult projects at the time when we are at peak productivity.
“Content in context is actually king.”
Designing Engagement – Jaimee Newberry (@jaimeejaimee)
Jaimee Newberry introduced us to brand personality. She encourages us to bring brand personality to everything that people touch within our design.
“Humanize your products. Who is my product? If my product were a celebrity…”
She encouraged us to be an ambassador of empathy – how does the user feel? Your ultimate goal is to get your user to feel like you understand them. Build a relationship of trust with them.
“Create an escape for the never ending swipe-through screen. It shows empathy.”
“Be an ambassador for the value and substance of empathy. Your product needs this.”
Newberry taught us that a simple text change can make a huge difference.
“Twitter changed from “What are you doing?” to “What’s happening?” to better engage users.”
“The simplest change of words can change everything for your brand.”
“”What are you doing?” makes you feel like, who cares? “What’s happening?” makes it about passions.”
She showed how putting a good spin on a bad situation can mean everything for your brand.
“Advertising. “Come in and try the worst meatball sandwich that one guy on Yelp ever had. IN HIS LIFE.” Put a positive spin on it.”
Everyone wants to try that sandwich now…
SVG is for Everybody – Chris Coyier (@chriscoyier)
“In the nerd calendar, it is the year of the SVG!” – enough said.
Chris Coyier packed an incredible amount of information into his presentation of svg. It might be best for me to post this in sound bites, as he was really engaging…
“SVG: You can use it, you can use it now. And it is easy to use.”
“But it’s just for logos and “flat design,” right? NO!”
“Illustrator just SPEAKS svg. Illustrator can be yours for $19.99/month.”
“This is an eps. I don’t even remember what this is anymore, but I can open it in illustrator (and save as an svg).”
So essentially, what I got was that an svg is an eps turned to code. The number of vector points determines the size of the svg.
“You can link an svg as an image or you can put the code right into your html.”
Svgs mean worry free resizing, because there are no pixels. They also mean that you will have a constantly editable image, because it isn’t dependent on going back to the source file.
By far, my favorite example of a use for svg from the presentation are the responsive icons. You can see them here – http://responsiveicons.co.uk
Designing Using Data – Sarah Parmenter (@sazzy)
Sarah Parmenter taught us the importance of data in design. She warned us against being designers who are part of the culture who design just to make things pretty.
“Being a good designer is not enough. We need to be able to tell WHY.”
Data helps us to justify decisions without bringing personal opinion to the table.
“How can we get everyone on the same page without bringing personal preference to the table?”
“Nobody has an excuse to make an uninformed decision anymore.”
Parmenter also introduced us to personas – she suggested hanging images of your customer personas in the office to remind you of who your clients are and what you are aiming for.
She talked about social media metrics. For a salon she worked on, there was a 98% drop in bookings when you advertised openings but left the booking link off the Facebook post. People don’t want to have to make an effort – you need to make it easy for them to interact.
“In order to maximize Facebook, you have to have a call to action in every post.”
“Instead of hiding struggles, allow them to humanize you with your customer.”
Parmenter gave us another great example of thinking like the customer – keeping umbrellas by the door for customers, so that if it rains and they just got their hair straightened, they can take one.
Overall, I thought AEADC was fantastic this year. Last year, I felt like it focused more on responsive design (which was also great). This year, I felt it was more about the customer – user experience, connecting with the user, etc.
If you get the opportunity to attend, I highly recommend it.
Last week, I had the pleasure of attending An Event Apart DC with web designers from all over the country. Over the next two weeks, I thought I would do a recap and give some sound-bytes of the information that was shared by some of the leaders in our industry.
Understand Web Design – Jeffrey Zeldman (@zeldman)
One overarching theme in Jeffrey Zeldman’s presentation was that we need to be web design ambassadors. Many people don’t understand what we do, and it is only by educating them that we can do excellent work that inspires people.
The second theme, and a theme that repeated throughout the conference, was that what we do is for the user – and should be people focused.
“Anything that interferes with the user getting their job done is bad. Approach work from a user centered POV.”
“What we do is for people. Make sure they have a good experience.”
One of the most significant quotes for me, was “Web design is like type design, in that web design is a medium for someone else’s self expression.” This really hits home that we need to embrace the fact that we can’t control every part of the experience. Ultimately, we must guide the user and deliver the best experience we can, but the user is in the driver seat.
“Great design is never passive. It only looks that way.”
“Don’t wait to be invited to your own profession. Be proactive.”
The Integral Designer: Developing You – Whitney Hess (@whitneyhess)
Whitney Hess talked about social and emotional intelligence.
“In most workplaces, we focus more on intellectual contributions rather than emotional or physical health, at a cost.”
She talked about the importance of stopping to take a breath, and the difference it will make in your life.
One particular moment that stuck out was when she encouraged everyone to purge their past – throwing out old work to promote adaptability. She says that “if it’s a good idea for that situation, you’ll think of it again.” And she’s right.
Putting the Fonts into Webfonts – Jonathan Hoefler (@HoeflerCo)
Jonathan Hoefler’s talk particularly inspired me as a designer. He illustrated the detailed process that goes in to optimizing a font for screen, and why we should consider webfonts when designing on screen. He likened designing for screen to designing for the print in that you have to adjust for the medium.
For the newspaper, he once created a font with a special weight for a paper in a high humidity area because it would bleed more. With the modifications, in matched the way it printed in the low humidity area.
The same is true of modifying so that I font looks right on screen – simple pixel modifications make it clearer and easier to read.
Jonathan Hoefler is trying to bring all the nuances of typefaces back to the web. He compared a dictionary to Wikipedia. Wikipedia is more information dense, but all the typographic indicators that a dictionary uses have been lost, because we don’t have the depth and breadth of characters available to exemplify it.
After hearing Hoefler speak, I think we should be proud of the details that our design leaders take into account in their processes.
Screen Time – Luke Wroblewski (@lukew)
Luke Wroblewski talked about how screen size has become incredibly diverse. With the screen as our medium, we as designers, need to know how to deal with it. But not every screen size is the same, so he encouraged us to focus on what the most common and effective sizes are.
In this case, medium size smart phones are the leaders of the pack. They have a higher use rate, as well as a higher conversion rate. Mobile first is indeed alive and well.
He also encourages us to look at design and load time, as screens are getting increasingly higher in resolution.
“The 1st step in our impending retinapocalypse is realizing that maybe every site doesn’t need a full-bleed background image.”
He also championed the death of the fold – that the fold to web is no longer a relevant factor, and yet we continue to be restrained by it.
The fold is “the feudal lord that rules in tyranny. Thou shalt obeyeth the fold.”
Wroblewski left us with the introduction of wearables, and whether or not they will complement or disrupt smart phone and tablet use, which are currently the leaders of the pack in digital devices.
Mind the Gap: Designing in the Space Between Devices – Josh Clark (@globalmoxie)
Josh Clark spoke about seamless use of websites cross-device. He told us that 2/3 of people start shopping on one device and finish the transaction on another.
He challenged us to link physical interaction with our interactive processes.
“When I put my iPhone on my iPad they just ignore each other! How rude! Antisocial…”
A good example is listening to your music on an iPod, then tapping it on your screen to transfer the music to be playing on your computer.
“There is magic in the gap between devices.”
Don’t try to recreate old products with new innovation. “Never ever ever try to out-mouse the mouse.” Find a way to do new things with new technology.
Clark used Teddy Ruxpin as an example of what social devices used to be – it talked TO you, but didn’t interact WITH you. The new Teddy Ruxpin is Toymail – a device that actually reacts to you and grows with you in a social way.
His final warning was that as our every day objects become interactive, there is the danger of our everyday lives being “hacked” – anything that can be hacked, will be hacked.
Many of you out there might wonder, “Why should I spend the time to redesign my site? This website my niece/nephew designed and coded for me in 1999 still works, and websites are expensive!”
Think of it this way. Would you go in to that job interview in a wrinkled suit, with no resumé?
Your website is, for many customers, the first impression they have of your business. Your website doesn’t necessarily need all the latest bells and whistles, but it does need to look current and professional. After all, this is what the customer is basing their decision to contact you on.
If your website is hard to navigate, the customer may give up before they find your contact information. If it is dated and sloppy, the customer may perceive the business as out of touch, and move on to a more polished competitor. Every customer that leaves the site without a purchase has a cost for you and your business – a cost in the long run that goes way beyond the cost of a refresh.
I’ll leave you with a few keys to a good website design:
Easy to use across platforms (from mobile to tablet to desktop).
Fast load time.
Memorable url that makes sense for your business.
Responsive design is a hot topic in the web world these days. As more and more users are accessing the internet on a variety of platforms, it is becoming essential that companies keep up with them. I was recently asked to do a presentation on responsive design, and I thought I would share that knowledge with you here.
So what is responsive design?
Responsive design is designing a website that adapts to the user’s environment using media queries. This includes everything from mobile phones to tablets to different sizes of desktop screens. Unlike regular websites, which show up the same on every platform, layouts and design elements change depending on the platform you are using to better serve the user’s experience. This may mean condensing the navigation and changing the size of the images, among other things.
Most of the time, when we design for a responsive site, we design with 3-4 sizes in mind. Full computer screen, tablet vertical, tablet horizontal, iPhone and Android are some of the common considerations. Many testing labs have been established for those who don’t have access to all of these devices when checking their site. There is also software that lets you simulate the experience.
Is responsive design just a new, cool look?
Not at all – responsive design is about functionality and ease of use. Good designers take into account the user experience depending on the platform. This would mean larger buttons for ease of use on a mobile device, as well as thinking about how to streamline the purchasing process on a phone or tablet. The less clicks, the better.
Why should you care?
Mobile and tablet use is exploding – growing exponentially all the time. We can’t design solely for desktop any longer and expect users to accept that. From a marketing perspective, I was told at An Event Apart DC that conversion rates on mobile are actually higher when sites are responsive. Google also takes into account whether or not your site is responsive for search ranking.
Is it just for designers?
No! Repsonsive design is slowly becoming mainstream. it has been adopting by the Johns Hopkins Carey Business School, the Boston Globe newspaper and even Starbucks. These companies care about the customer experience – and responsive design improves that experience.
Though it takes longer and is more expensive to build a responsive site, the investment is worth it. It is becoming a consumer expectation that will not be ignored.