Web Design Tutorials

How Tabs Should Work

Remy Sharp picks that old chestnut – tabs – and roasts it afresh on the open fire of JavaScript to see how a fully navigable, accessible and clickable set of tabs can work. Everybody knows some scripting and some CSS can help to make your website bright. Although it’s been said many times, many ways, please be careful to do it right. Tabs in browsers (not browser tabs ) are one of the oldest custom UI elements in a browser that I can think of. They’ve been done to death. But, sadly, most of the time I come across them, the tabs have been badly, or rather partially, implemented. So this post is my definition of how a tabbing system should work, and one approach of implementing that. But… tabs are easy, right? I’ve been writing code for tabbing systems in JavaScript for coming up on a decade, and at one point I was pretty proud of how small I could make the JavaScript for the tabbing system: var tabs = $(‘.tab’).click(function () { tabs.hide().filter(this.hash).show(); }).map(function () { return $(this.hash)[0]; }); $(‘.tab:first’).click(); Simple, right? Nearly fits in a tweet (ignoring the whole jQuery library…)

Go here to read the rest: 
How Tabs Should Work

Upping Your Web Security Game

Guy Podjarny sounds a sober warning during our festivities, and gathers some winter fuel to help secure your apps and users from the web’s occasionally cruel frost. So mark his footsteps good, my friend, and tread thou in them boldly. Thou shalt find the hacker’s rage freeze thy site less coldly. When I started working in web security fifteen years ago, web development looked very different. The few non-static web applications were built using a waterfall process and shipped quarterly at best, making it possible to add security audits before every release; applications were deployed exclusively on in-house servers, allowing Info Sec to inspect their configuration and setup; and the few third-party components used came from a small set of well-known and trusted providers. And yet, even with these favourable conditions, security teams were quickly overwhelmed and called for developers to build security in. If the web security game was hard to win before, it’s doomed to fail now . In today’s web development, every other page is an application, accepting inputs and private data from users; software is built continuously, designed to eliminate manual gates, including security gates; infrastructure is code , with servers spawned with little effort and even less security scrutiny; and most of the code in a typical application is third-party code, pulled in through open source repositories with rarely a glance at who provided them

More: 
Upping Your Web Security Game

How to Do a UX Review

Joe Leech offers a rundown on his UX review process, sharing tips about analysing data and creating personas, and setting out findings in a form that benefits clients. From quick wins to workshops, there are gifts here everyone will be grateful for. A UX review is where an expert goes through a website looking for usability and experience problems and makes recommendations on how to fix them. I’ve completed a number of UX reviews over my twelve years working as a user experience consultant and I thought I’d share my approach. I’ll be talking about reviewing websites here; you can adapt the approach for web apps, or mobile or desktop apps. Why conduct a review Typically, a client asks for a review to be undertaken by a trusted and, ideally, detached third party who either works for an agency or is a freelancer. Often they may ask a new member of the UX team to complete one, or even set it as a task for a job interview. This indicates the client is looking for an objective view, seen from the outside as a user would see the website. I always suggest conducting some user research rather than a review. Users know their goals and watching them make (what you might think of as) mistakes on the website is invaluable

View post: 
How to Do a UX Review

Why You Should Design for Open Source

Jina Bolton lets the Christmas spirit of generosity and goodwill flow freely into open source projects in need of good design. It’s work free of charge, perhaps, but not for nothing.

Originally posted here: 
Why You Should Design for Open Source

SEO in 2015 – What to watch out for

Dave Collins reacquaints us with the benefits of SEO , cutting through the snake oil with the clove-scented satsuma zest of genuine techniques to help Google smartly bring your visitors calling. With luck, they won’t will be singing carols.

So what do you think will change in SEO in 2015? Will Google make their algorithms tougher? This is probably a sure bet. Each year Google had been making it tougher for SEO.

Read the full article below and find out some of the things to watch out for. :
SEO in 2015 (and Why You Should Care)

Collaborative Responsive Design Workflows

Sibylle Weber finds ways to make our workflows more collaborative, and advocates more positively asserting the benefits of responsive design to the people who matter: colleagues and clients.

Read the original here:
Collaborative Responsive Design Workflows