Let’s do it live! The impact of live data on UX

http://ift.tt/1Ir0QMX

Few things in this world strike terror into the hearts of men (and women) quite like performing in front of a live audience. Thankfully, our computers and websites have no such qualms, and now they have the capacity to deliver live data like never before.

Live data — or real-time data — certainly isn’t new to the Web; but it’s increasingly pervasive, and with good reason. Today’s Internet users expect immediate gratification. They don’t just want a site to respond to their input; they expect sites to provide information without a click.

Social media is a big driver for these expectations. Users are accustomed to constantly updated content through their social feeds, so they presume this kind of performance from all sites. Today, failure to deliver up-to-date information can create a dissatisfying user experience.

The good news is that technology is making it easier for you to deliver real-time data to your site’s users.

How did we get here?

The biggest challenge for real-time data was the need for a constantly open client-server connection as opposed to request and response.

For years, the most popular commercial applications for live data were in the financial industry. Finance companies invested heavily in these technologies and closely guarded them as trade secrets. Eventually, independent developers caught up, creating Java applets to make real-time data more accessible for other applications, and later created native web-browser hacks to deliver consistent HTTP connections.

Today, improved servers, browsers, software and other tech advances make it easier to develop for and deliver real-time data. Libraries and services, like Firebase, Signalr, Parse, Meteor, and Socket.io enable us to build and deploy real-time mobile and web apps in minutes. Nearly every developer now has access to the tools necessary to incorporate live data into their projects.

Today’s real-time data landscape

Live data delivery is increasingly popular across all forms of digital products. It gives users the most up-to-date information, provides marketers with immediate feedback, and encourages effective communication. When everyone knows where they stand at the moment, they can collaborate more easily.

Real-time data offers benefits for a variety of web applications. E-commerce customers can monitor constantly updated quantities to order an item before it’s out of stock. Attendees can get real-time updates at events. News and sports information can be delivered without lag. Travelers can get live prices on airline tickets, hotels, rental cars and more. And that’s just the consumer side.

Marketers and product owners can utilize incoming real-time data to identify emerging market opportunities, help guide business decisions, monitor alerts for reputation management and more. Delivering real-time data to consumers also has business benefits. Thinking back to our e-commerce example, that diminishing inventory list uses scarcity to create urgency and entice consumers to act quickly.

Exciting real-time web applications like gaming and communication are evolving daily, as are opportunities involving the Internet of Things. Studies project that by the year 2020, there will be more than 200 billion Internet-connected objects worldwide. Imagine the possibilities of a network of devices collecting and distributing data in real-time.

Is real-time data right for your project?

When considering incorporating real-time data into your next project, simply ask yourself two questions:

1. Will the user benefit from live information?
2. Is there value in back-and-forth interaction between users?

If the answer to either of those questions is yes, your audience will be well served with real-time data.

So, don’t wait another minute to build your first live-data project. After all, with each passing second, more valuable data goes unseen.

 

Featured image, live connection image via Shutterstock.

LAST DAY: 65 Handcrafted Fonts + 200 Ornaments – only $29!

Source

Vía Webdesigner Depot http://ift.tt/1HU7DOS

8 reasons to embrace website accessibility

http://ift.tt/1J8dPBn

In the past, fantastic web design was a simple business. All you had to do was ensure that the design looked good in Internet Explorer or Netscape, and your job was pretty much done. Some designers even took it upon themselves to mandate which browser the user should be operating. And for many designers, the visual design was not only a primary concern, but the only concern.

That approach created a terrible legacy which is still sometimes experienced today, where the site content often is given secondary importance to eye candy and window dressing.

Things have now changed a great deal. Users have a multitude of different devices and browsers to choose from, so there is a real challenge to create a design that will work consistently on any device and browser combination. Unfortunately the challenge involved in meeting the task of ensuring total browser compatibility often leads to designers forgetting to ensure total user compatibility. In other words, where accessibility should be given utmost importance, it is often forgotten entirely or merely added in as an afterthought.

Such an approach can be costly for a number of reasons, not all of which are immediately obvious…

1) If your design is not accessible, you are robbing your client

According to data sourced from CDC, almost one-in-five American adults have trouble with their hearing and almost one-in-ten adults have trouble with vision. The hard numbers just for these disability categories alone is more than 58 million individuals.

How many business owners do you think would be pleased at the prospect of losing up to 20% of the potential market for their products and services for no valid reason? That is exactly the scenario you provide them with if your website is not accessible.

2) You may have a legal obligation to provide accessibility

In the United States, many websites exist within categories that are legally required to be accessible. Many other countries have similar laws. The main categories of websites in the US that must include accessibility as a compulsory design factor include:

• sites designed for use and display by any agency of the US Government, or any state government eligible for Assistive Technology funding (covered by Section 508 of the Reauthorized Rehabilitation Act, 1998);
• sites designed for use and display by any organization receiving federal financial assistance of any kind (covered by Section 504 of the Rehabilitation Act, 1973);
• sites designed for use in formal education settings, such as schools and colleges (covered by the Individuals with Disabilities Education Act , 1997);
• commercial websites — although the laws are not yet fully tested, various anti-discrimination laws may apply, such as the Americans with Disabilities Act , 1990. Retail giant Target was sued over accessibility, opting to settle the matter out of court, it is only a matter of time before more commercial website owners could find themselves in a similar situation.

Even if none of the other great reasons for including accessibility are enough to persuade you, the fact you may be legally required to do it should certainly be a consideration.

3) It is ethically and morally right to make your website inclusive

When your website does not include accessibility features, some people won’t be able to use it, and that simply isn’t fair. While some users with disabilities may just shrug it off as being exactly what they expected, many will be angry and feel that by not including accessibility you are not respecting them – and they’d be right!

4) People with disabilities are not a silent minority

Now, more than ever, the Internet has given a voice to people who previously may not have had much opportunity to speak their minds in public. In a very large way, access to communications through the Internet has leveled the playing field between disabled and non-disabled computer users. If there is a perception that a business or other organization doesn’t support the disabled, then the PR consequences can be disastrous.

5) Being accessible can win loyalty and trust

If your competitor’s website is not accessible and yours is, guess which one will get more repeat traffic? Remember, some 20% of the population have a disability, and in fact people with disabilities are more likely to engage in online shopping activity than the average citizen. Shopping in the offline world suffers from accessibility issues too, and the Internet provides a way for everybody to get equal treatment and service without any physical and social barriers.

6) It is not difficult to include accessibility features

One of the main reasons why many designers and developers don’t include accessibility is because they think it will be too difficult. In fact, with semantic markup, and a small amount of planning, it is not necessarily difficult to make a website more accessible. All it really takes is an awareness of accessibility. In many case you’ll find it harder to make a site that isn’t accessible.

7) Accessibility is not just about “blind people”

The Internet is largely a visual environment, so it is no surprise that a lot of literature dealing with accessibility has focused heavily on the needs of visually impaired users. Obviously those users are important, but that monolithic focus has led many developers to believe that accessibility just means adding the alt attribute to images. There are many other disabilities that require equal attention.

True accessibility is about providing universal access. That means anyone who wants to access information on the website can do it, regardless of platform or physical ability.

8) Accessibility is about responsiveness

Accessibility is about enabling any user to access content, however they choose; rather than forcing users to engage with your site in a way you favor. Many people who would not be classed as disabled take advantage of accessible features. For example, a lot of people dislike trackpads on laptops and prefer to navigate webpages with the keyboard.

An obvious conclusion

Accessibility carries with it an economic benefit, it has social and PR benefits, it avoids potential litigation issues, and it will help you sleep that little bit better. Implementation is simple in a new site, which should be using semantic markup anyway.

Improving the accessibility of a website does not need to be a difficult process. Always use responsive design this enables access by the widest range of devices, and allows vision-impaired people to scale the site content to suit their needs. Ensure your content still has logical flow when CSS is turned off. Add closed captions and/or transcripts to all video and audio content. When writing transcripts, consider describing any significant actions in text form.

If you’re upgrading a legacy website to be accessible, or building JavaScript-heavy sites, then take a look at Aria.

Don’t make accessibility an afterthought, treat is as part of a responsive design process, and plan to work this way from the start of every project.

 

Featured image uses disability image via Shutterstock.

Ultrashock 15th Anniversary Bundle worth $1,000 – only $49!

Source

Vía Webdesigner Depot http://ift.tt/1ImHzMC

How to grow a successful design career by blogging

http://ift.tt/1GDwyYd

It’s been 5 years since I last wrote for WebdesignerDepot, but it’s an absolute pleasure to be back once again.

I’m doing a great deal more blogging these days, which isn’t a particularly strange thing. About two years ago I founded the latest and greatest open source blogging platform — called Ghost — which is currently the fastest growing publishing platform out there, and turns over some $425,000 in annual revenue. You can see this, in real-time, on our public revenue dashboard.

The funny thing is, it’s all come full circle. This whole story started out with a blog, and the biggest inflection point was a post — 5 years ago — right here on WebdesignerDepot.

Walter has very kindly invited me back to tell a little bit of that story, and a few of the lessons I’ve learned along the way (there have been plenty).

Lesson 1: The personal blog that started it all

Back when I was freelancing I was out to get more clients (aren’t we all?); and I thought drumming up some traffic with a personal blog might be just the way to do it. So, I set one up and started writing. It wasn’t particularly fascinating, and I wasn’t really sure what to write about. I largely just documented the things I was learning in web design and some of my thoughts about the industry.

Slowly but surely though, the traffic started to build up little by little. Twitter was just growing up, at the time, and I found that sharing my posts from my blog was a great way to meet other web designers and developers with similar interests.

There’s so much value in having a “home” on the internet which you have full control over. Not a business website with its own brand. Not a social network which might shut down. Just your own little slice of land where you can build up your own reputation and credibility associated with your own name.

If I had to do it again, the only thing I’d change would be to blog more often, and have an email subscription option from day 1! It takes years to build an audience. The sooner you start, the better.

Lesson 2: Guest blogging is an amazing opportunity

Personal blogging worked really well for me, and I noticed that it was working better than pretty much anything else I was doing. I decided, quite spontaneously, to start guest blogging for other sites on the side.

Now, guest blogging as a web designer, I think, is one of the most under-rated endeavours out there by some margin. In return for a few hours to create a good post, you don’t just get exposure to a massive audience and some really valuable links: You can actually also make a really decent supplementary income from it.

At my peak, I was pulling in a healty extra income just by writing good, high-quality blog posts for web design blogs. Not only that, but I was getting more and more client inquiries as people started to see my name pop up more often.

Full disclosure: I had no idea what I was doing. I was excited to write, and so I did. Don’t let fear of being under-qualified hold you back. I definitely wasn’t qualified.

Lesson 3: It turns out that clients look for web designers on web design blogs

One day I got an email from Ubisoft. They’d seen some of my design work and writing on Smashing Magazine and WebdesignerDepot, and they wanted to know if I could design a blog for them. This was a completely cold email. If I had to pinpoint one lucky break in my career: This would be it. I couldn’t quite believe it!

When you write a lot about a subject, it naturally draws people who are researching that subject to discover who you are. In this instance: Ubisoft were looking for a quick project with a low budget, they didn’t want the hassle of going through their usual agency. They just wanted fast results.

Putting yourself out there by blogging establishes you as someone who is at the forefront of the industry, and passionate about doing good work.

As Jason Fried says in Rework:

If you are trying to decide among a few people to fill a position hire the best writer. It doesn’t matter if the person is marketer, salesperson, designer, programmer, or whatever, their writing skills will pay off. That’s because being a good writer is about more than writing clear writing. Clear writing is a sign of clear thinking. Great writers know how to communicate. They make things easy to understand. They can put themselves in someone else’s shoes. They know what to omit. And those are qualities you want in any candidate. Writing is making a comeback all over our society… Writing is today’s currency for good ideas.”

Lesson 4: Clients finding blogs to get clients to write more blogs to get more clients

This is where it gets awesome, because you can start to see compounding returns.

After I’d done work for Ubisoft I put their logo up on my site and carried on blogging… all over the place. Shortly after that, I got an email from Virgin Atlantic Airways. They also wanted a new blog, and were wondering if I could help them.

“Hmm, let me check my schedule.”

Of course I jumped at the opportunity! The great thing is that every time you work on an interesting project, you inevitably end up with tons of useful information and reference material to… you guessed it… write about.

The most important blog post of my career was published right here on WDD, called The Virgin Atlantic Airways Blog: A Case Study.

That post, God bless it, referred more client work and interesting contacts than I can count. Before long I had inquiries from Nokia, Microsoft, EasyJet and many, many others. All of this came from blogging, demonstrating a propensity toward problem solving, and delivering results. You don’t have to be the best designer or developer. Getting shit done is far more valuable than being the best.

Lesson 5: Blogging can lead to bigger and better things than you ever imagined

Blogging is a very social activity. The biggest unexpected benefit that it has given me over the years is the ability to meet so many incredible people… people who I never would have had the chance to meet otherwise.

Looking back, I didn’t know the things I didn’t know; and if you happen to be at the start of your journey in this industry, neither do you. This is a very exciting time. The possibilities are vast!

In the 5 years since I published the Virgin Atlantic post here on WebdesignerDepot I’ve crossed the world multiple times, speaking at conferences, attending full paid press trips, and making a living along the way. I ended up specializing in building blogs for people, before going on to contribute to WordPress as their deputy head of design and helping to design and build the platform.

A little after that I spotted an opportunity to make a completely re-imagined, modern publishing platform and, after a runaway Kickstarter campaign, Ghost was born.

This story began with blogging, and I would say that it ends with blogging too; but it’s really not showing any sign of stopping. Publishing online is the single greatest thing I did (and continue to do) for my career as a web designer. I’d encourage you to give it a go. If you don’t have a blog yet, check out Ghost. It was made to allow anyone to replicate the things that worked well for me.

Pandora’s Box Lifetime Membership for Adobe Lightroom Presets – only $29!

Source

Vía Webdesigner Depot http://ift.tt/1EiwcCA

50+ incredible freebies for web designers, April 2015

http://ift.tt/1DCrI7a

Amazing designers and developers release new projects every day, that make us excited, inspired, and often more than a little impressed.

Today we’re continuing our monthly roundup of the best free resources for web designers, and there’s something for everybody, whether you’re a designer, a developer, or  a bit of both. We’ve got UI kits, icon packs, mockups, themes, templates, and more tools than you can use in a month. So free up some hard drive space, then browse through these downloads, enjoy!

1450 Free Vector Icons

SmartIcons is a project that’s putting together thousands of useful icons into a smart icon system and giving them away for free.

 

Flatflow Icons for Sketch

A pretty cool set of icons in a flat style, editable with Sketch. Free for personal and commercial use.

 

Flat Web Design Icons

An awesome package of icons with a fresh flat design style, containing elements related to web and graphic design.

 

A3 Poster Frame Mockups

A clean set of mockups for you to test-drive your latest poster design. Make use of cool lighting effects and multiple perspectives.

 

Creative Poster Template

A good-looking poster design for creative people wanting to promote themselves or their events. It comes with a lot of icons and can be edited in Illustrator, Photoshop and InDesign.

 

 

A4 Landscape Brochure Mockup

A neat brochure mockup with multiple lighting effects, smart objects and transparent backgrounds.

 

Pebble Time Design Kit

The new Pebble Time has created quite a stir, and the design community is no different. Here’s a set of mockups for the upcoming gadget.

 

Adorable Flat Workspaces

Make cool desks by interchanging the elements on the table, using one of the three different color combinations available.

 

Pretty Vintage Text Effect

This Photoshop effect will bring up your texts by giving them an impressive 3D appearance, managing to truly highlight their importance.

 

500 Hipster Vector Designs

A rather hefty package of fully vector designs, all editable in Adobe Illustrator. They will allow you to create posters, badges and many other elements.

 

Apple Watch UI Kit for Sketch

An awesome set of carefully crafted design elements for the Apple Watch, editable only through Sketch 3.

 

iCollection UI Kit

Three app designs put together in one so you can take them apart and make your own creations based on them.

 

Smart UI Kit Lite

A complete set of clean interface elements for Sketch that you can use to set upyour own websites and applications.

 

Vector UI Components

A set of vector components composed of mostly graphs and charts, but also including other elements for media playback, weather and general use.

 

iOS 8 GUI Kit

A complete set of design elements for Apple’s latest iOS version. It’s all made up of vector shapes, editable with Illustrator.

 

Canaro Font

A modern-looking font that resulted from the exploration of geometrical type designs of the early 20th century.

 

Bough: Hand-Drawn Typeface

A cool hand-made font with an old school feel to it. It comes with alternate glyphs to achieve a different look each time you use it.

 

Streetwear Free Font

A fancy font with a hand-written and vintage feel that you can use for big designs such as posters, t-shirts or branding.

 

Moscú Free Font

An impressive typeface inspired by Russian constructivism featuring striking shapes and unexpected glyphs.

 

Muller Font

Meant to be the ultimate universal font, Muller works perfectly across all sizes and purposes.

 

Trekking Store PSD Template

A fantastic website template, mostly fit for e-commerce websites that want to feature a familiar, modern look. Editable with Adobe Photoshop.

 

Profile: Website PSD File

Profile started with a fantastic mountain image and developed into a top-class theme choice for any business website.

 

The Singhs: E-commerce PSD Template

A very elegant and complete template for your next online store, containing more than 20 PSD files for all the different pages you could need.

 

Chromatic WordPress Theme

A neat WordPress theme, best suited for business or personal websites. Works great on any device thanks to its responsive design.

 

Express: Responsive Magazine WordPress Theme

A magazine WordPress theme with a strong focus on performance, boasting the popular flat design style.

 

 

Web Design WordPress Theme

A theme with a rather universal design and easy customization options, making it fit for a great number of websites, no matter the topic they talk about.

 

Spectral

This modern HTML template comes with fancy animations and fully responsive design. Simple and effective, Spectral seems like a great match for the modern web.

 

Barrier: Business Template

Barrier is a superb template featuring a simple look with Font Awesome icons, portfolio carousel, contact form and many other features.

 

Motion Blur Experiment

This piece animates a modal window once you click on a button, featuring a fancy motion blur effect as the dialog moves.

 

Motion Blur Effect

A motion blur effect created with CSS and JavaScript. You can choose to check it in text or image version.

 

Dropdown Menus Example

Simple but good looking multi-level navigation exercise, great for your next website development.

 

Animated Twitter Button

An awesome animated effect that turns the black screen blue once you hover over the logo button. 

 

React Sign Up Form Example

A beautiful sign up form with a flat style, info validation, animations and hover effects.

 

Segment

Segment is a tool that helps you gather customer data and manage it in many useful ways to improve your apps and user experience.

 

RAD.js

A mobile app framework for all major mobile systems and even Web browsers. It focuses on ease of use and speed.

 

APIembed

Simplify the coding process for various languages by letting APIembed generate snippets automatically for you.

 

ApplePie: A Better Way to Build Web Interfaces

A bold initiative that intends to bring standards to front-end development, providing a set of conventions. ApplePie even has its own toolkit to get you started.

 

Cachet HQ

Thanks to this open source project, you can keep your users in the loop about the recent status of your service through a simple, comprehensive page.

 

Dropplets

A new blogging platform with no database that intends to make the publishing process as easy as can be.

 

Material UI

An HTML5 interface that thoroughly follows Google’s Material Design guidelines. It serves as a great test to gauge Material’s potential in the future Web.

 

Layers

This interesting WordPress site builder is installed just like a regular theme, but then offers a staggering amount of choices to put together the blog you have in your mind. Best of all, it’s totally free!

 

UIkit: Modular Front-end Framework

A lightweight front-end framework featuring a modular approach and lots of customization options. As you’d expect these days, it’s more than ready to take on mobile-first projects.

 

OpenUI5

This tool aims to help you create fantastic web applications that will run on any device, letting you focus on what’s really important.

 

Salvattore

Use this jQuery tool to create amazing grids, customizable through CSS.

 

Dug.js

With Dug.js, you can gather feeds in JSONP (Dribbble, Instagram, Pinterest and many more) and easily display them in your website as HTML script.

 

Sift.js

This useful library uses the power of the MongoDB query language to filter information according to your preset parameters.

 

Space.js

Turn your website into a nice presentation handled with the mouse wheel, using multiple customization settings.

 

SedotPress

A lightweight blogging platform created in PHP. No database is required, as all data is saved in JSON format.

 

Responsible.js

Use Responsible.js to give your users the power to choose between mobile and desktop versions of your site in order to achieve the best viewing experience.

 

FullPage.js

A simple resource to create good looking full-screen scrolling websites in both vertical and horizontal directions.

 

Cayley

Cayley is a Google-run open source graph that aims to be included in the developer’s toolbox when linked and graph-shaped data are involved.

200 Premium Stock Images with Room for Text – only $18!

Source

Vía Webdesigner Depot http://ift.tt/1zejAO4