Tag Archives: usability

M3talinks for Apr 12th

Today’s M3talinks for Apr 12th

  • WordOff – Wordoff applies the following rules to strip the cruft that is pasted into WYSIWYG editors from Word:<br />
    <br />
    * Attributes are removed for all elements except <a>s<br />
    * <span>s and <div>s are removed<br />
    * Empty elements are removed<br />
    * Consecutive line breaks are reduced to two<br />
    <br />
    Wordoff is written in Python and runs on Django in Google App Engine. It was designed as a demonstration project for a short talk at Oxford Geek Nights.
  • About | Designing User Experience – When I grow up I want to be a technical writer, web developer, user experience designer, information architect, and an instructional designer for adult education. <br />
    <br />
    I just want to start learning information through osmosis. I’d like to be a brilliant expert by tomorrow, please. And I spend about $2000 a year buying books in an effort to become one someday. I want to be buried with my web design library, and if Heaven doesn’t have an O’Reilly or Sitepoint warehouse, I’m afraid I can do without it.<br />
    <br />
    Take an enthusiastic, ambitious, overzealous, and at times hyper student of just about everything, and give her a copy of WordPress and a domain. This is what you end up with.

linkHive For Mar 7th

Here are the newest links to join the linkHiveMar 7th

  • Design View / Andy Rutledge – Design Questions – You may be surprised, but I never ask design-related questions in design project discovery meetings. Some might wonder at this, as it may seem counterintuitive. The reason I don’t ask design questions of the client is the same reason an architect doesn’t ask the client what PSI the building’s load-bearing foundational structures will need to endure.<br />
    <br />
    In either case, such issues are for the design/architect pros, not the client. The result had better serve the client’s needs and it just better damn-well work. That’s what the client and his customers care abou
  • I wish I would have known: Answers from 11 top freelancers | Guerrilla Freelancing – Today we’ve got an awesome article for any first time freelancers. I’ve rounded up a few of the top freelancers out there and had them answer the question “What do you wish you would have known starting out as a freelancer?”. Needless to say, this article is full of over 2 thousand words of wisdom. I hope you find use for this article and if you know someone who might benefit from it, I’d love if you shared it with your twitter followers and facebook friends. Thank you :)
  • The Future of Wireframes – Articles – MIX Online – As we move into the next decade of web design, it's time for us to reevaluate our understanding of wireframes—a tried and tested user experience staple.
  • Book: Secrets of the JavaScript Ninja by John Resig – The untold secrets of the elite JavaScript programmers distilled for intermediate JavaScript programmers, bringing them completely up to speed with the challenges of modern JavaScript development. Explores specific techniques, strategies, and solutions to developing robust, cross-browser, JavaScript code.
  • jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie – jQuery: Novice to Ninja will show you how to unleash the amazing power of jQuery. In this easy-to-follow guide, you’ll master all the major tricks and techniques that jQuery offers—within hours.<br />
    <br />
    jQuery has quickly become the JavaScript library of choice, and it’s easy to see why. This JavaScript framework dramatically improves how you add interactivity and animation to your website.
  • ‘Good’ Beats ‘Innovative’ Nearly Every Time – BusinessWeek – An obsession with innovation leads executives down the wrong path. Just trying to be good would be a smarter focus
  • Skyrocket Labs | Web site design, development, blogging, social media, XHTML/CSS templates, jQuery, PHP | Ottawa, Ontario, Canada – CSS3 tricks have been pretty popular in the last while on various design blogs and with good reason. Like many of you, I've caught the CSS3 bug and this afternoon I took a stab at this nifty little method of adding hints to your form fields (as well as some fancy style enhancements) using CSS3. The cool part is you don't require Javascript for the form field hints. Here's a demo and run down of the code used.
  • How To Design a Clean and Professional Resume / CV Website | Voosh Themes – Earlier in the week I released a new HTML template called Jamba which is a single page resume and CV template. In this post I’d like to show you how I designed the template in Photoshop (check out the Jamba features page and the live demo).
  • Design View / Andy Rutledge – Design Questions – You may be surprised, but I never ask design-related questions in design project discovery meetings. Some might wonder at this, as it may seem counterintuitive. The reason I don’t ask design questions of the client is the same reason an architect doesn’t ask the client what PSI the building’s load-bearing foundational structures will need to endure.<br />
    <br />
    In either case, such issues are for the design/architect pros, not the client. The result had better serve the client’s needs and it just better damn-well work. That’s what the client and his customers care abou
  • I wish I would have known: Answers from 11 top freelancers | Guerrilla Freelancing – Today we’ve got an awesome article for any first time freelancers. I’ve rounded up a few of the top freelancers out there and had them answer the question “What do you wish you would have known starting out as a freelancer?”. Needless to say, this article is full of over 2 thousand words of wisdom. I hope you find use for this article and if you know someone who might benefit from it, I’d love if you shared it with your twitter followers and facebook friends. Thank you :)
  • The Future of Wireframes – Articles – MIX Online – As we move into the next decade of web design, it's time for us to reevaluate our understanding of wireframes—a tried and tested user experience staple.
  • Book: Secrets of the JavaScript Ninja by John Resig – The untold secrets of the elite JavaScript programmers distilled for intermediate JavaScript programmers, bringing them completely up to speed with the challenges of modern JavaScript development. Explores specific techniques, strategies, and solutions to developing robust, cross-browser, JavaScript code.
  • jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie – jQuery: Novice to Ninja will show you how to unleash the amazing power of jQuery. In this easy-to-follow guide, you’ll master all the major tricks and techniques that jQuery offers—within hours.<br />
    <br />
    jQuery has quickly become the JavaScript library of choice, and it’s easy to see why. This JavaScript framework dramatically improves how you add interactivity and animation to your website.
  • ‘Good’ Beats ‘Innovative’ Nearly Every Time – BusinessWeek – An obsession with innovation leads executives down the wrong path. Just trying to be good would be a smarter focus
  • Skyrocket Labs | Web site design, development, blogging, social media, XHTML/CSS templates, jQuery, PHP | Ottawa, Ontario, Canada – CSS3 tricks have been pretty popular in the last while on various design blogs and with good reason. Like many of you, I've caught the CSS3 bug and this afternoon I took a stab at this nifty little method of adding hints to your form fields (as well as some fancy style enhancements) using CSS3. The cool part is you don't require Javascript for the form field hints. Here's a demo and run down of the code used.
  • How To Design a Clean and Professional Resume / CV Website | Voosh Themes – Earlier in the week I released a new HTML template called Jamba which is a single page resume and CV template. In this post I’d like to show you how I designed the template in Photoshop (check out the Jamba features page and the live demo).
  • Pure CSS speech bubbles – Nicolas Gallagher – The demo page for Progressive enhancement: pure CSS speech bubbles.<br />
    <br />
    For a detailed explanation view the CSS file. It is heavily commented.<br />
    <br />
    All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.

linkHive For Jan 22nd

Here are the newest links to join the linkHiveJan 22nd

  • EEI Communications – EEI Press – The Elements of Internet Style

    The New Rules of Creating Valuable Content for Today's Readers

    Copublished with Allworth Press.
    ($24.95, 162 pages, softcover.)

    This is the completely updated new edition of our award-winning book, E-What?
    A Guide to the Quirks of New Media Style & Usage.

    The Elements of Internet Style will open your eyes to the major tech-driven trends
    in publishing—and Web-driven audience expectations—that no professional
    communicator can afford to ignore.

  • Every Web Site Is the Same: The Elements of Web Style | Jackfig – You can ask most anyone the question, “What is Web style?”, and the response may be as simple as a shrug or as complex as a theorem. That is, it’s anyone’s guess. But most people concerned about the matter would agree: it is an under-exploited element of the Web, with no commonly agreed upon standards or clearly identified best practices.

    The concept certainly exists; we found one of the best summaries once on the Rice University Web site:

    “Good web style is a complex subject, incorporating general principles of good writing style and good visual design as well as technical matters specific to the World Wide Web.”

    You won’t find a more succinct definition or, more importantly, a full disclosure of the three critical ingredients of Web style:

    Writing – Design – Technology

  • Web Style Guide – Consistently praised as the best volume on classic elements of web site design, Web Style Guide, now in its third edition, maintains an emphasis on fundamentals while bringing every chapter topic up-to-date.

    Written for web site designers in corporations, government, nonprofit organizations, and academic institutions, the book explains established design principles and covers all aspects of web design—from planning to production to maintenance. The guide also shows how these principles apply in web design projects whose primary concerns are information design, interface design, and efficient search and navigation.
    New for this edition:

    * a chapter devoted to universal usability
    * information on search engine optimization and the designs that improve it
    * a chapter on information architecture and how to promote its robust development
    * techniques for employing cascading style sheets in layouts and typographic design
    * 185 full-color illustrations

  • EEI Communications – EEI Press – The Elements of Internet Style

    The New Rules of Creating Valuable Content for Today's Readers

    Copublished with Allworth Press.
    ($24.95, 162 pages, softcover.)

    This is the completely updated new edition of our award-winning book, E-What?
    A Guide to the Quirks of New Media Style & Usage.

    The Elements of Internet Style will open your eyes to the major tech-driven trends
    in publishing—and Web-driven audience expectations—that no professional
    communicator can afford to ignore.

  • Every Web Site Is the Same: The Elements of Web Style | Jackfig – You can ask most anyone the question, “What is Web style?”, and the response may be as simple as a shrug or as complex as a theorem. That is, it’s anyone’s guess. But most people concerned about the matter would agree: it is an under-exploited element of the Web, with no commonly agreed upon standards or clearly identified best practices.

    The concept certainly exists; we found one of the best summaries once on the Rice University Web site:

    “Good web style is a complex subject, incorporating general principles of good writing style and good visual design as well as technical matters specific to the World Wide Web.”

    You won’t find a more succinct definition or, more importantly, a full disclosure of the three critical ingredients of Web style:

    Writing – Design – Technology

  • Web Style Guide – Consistently praised as the best volume on classic elements of web site design, Web Style Guide, now in its third edition, maintains an emphasis on fundamentals while bringing every chapter topic up-to-date.

    Written for web site designers in corporations, government, nonprofit organizations, and academic institutions, the book explains established design principles and covers all aspects of web design—from planning to production to maintenance. The guide also shows how these principles apply in web design projects whose primary concerns are information design, interface design, and efficient search and navigation.
    New for this edition:

    * a chapter devoted to universal usability
    * information on search engine optimization and the designs that improve it
    * a chapter on information architecture and how to promote its robust development
    * techniques for employing cascading style sheets in layouts and typographic design
    * 185 full-color illustrations

  • Kaltura: Open Source Video Developer Community | Leading the Open Video Revolution – [This looks like it will let you roll your own YouTube - and it's opensource. Wow!] Home of Kaltura’s open source video platform, the fastest growing platform on the web – used by over 48,000 sites worldwide.

linkHive For Jan 11th

Here are the newest links to join the linkHiveJan 11th

  • Aesthetically Written » It’s Type O’clock! – One of the key qualities of a good information designer is attention to details and since typography is the new cool trend we now seem to care more than ever about presenting text online correctly. The following article is based on my personal experience, yet there’s great probability that much of the following has already been said by somebody else. What you’ll find here is a few tricks for setting type on web I’ve learned over the past few months some of which, amazingly enough, I hardly ever see being used.
  • Aesthetically Written » It’s Type O’clock! – One of the key qualities of a good information designer is attention to details and since typography is the new cool trend we now seem to care more than ever about presenting text online correctly. The following article is based on my personal experience, yet there’s great probability that much of the following has already been said by somebody else. What you’ll find here is a few tricks for setting type on web I’ve learned over the past few months some of which, amazingly enough, I hardly ever see being used.
  • 30 Must See Web Generator for Lazy Webmasters – Smart webmasters do not work everything out from scratch; instead, we make good use of the free tools available online. There are tons of brilliant web tools available online – it’s a waste not to leverage these tools and save some working time (or, to have more time for beer). In this article, I’m going to share my must-have list of 30 web design tools, I hope you’ll find them useful. On the other hand, I would like to take this opportunity to thank all the developers who had done some much and made our world better.
  • Slides from Accessibility Camp DC
  • Sketchy Wireframes – Boxes and Arrows: The design behind the design – When it comes to user interface documentation, wireframes have long been the tool of choice. However, using traditional diagramming tools like Visio, OmniGraffle, and InDesign, most wireframes today look the same as their ancestors did from a decade ago – assembled with rigid, computer-drawn boxes, lines and text. While these artifacts have served us well, they can also be slow to produce, burdened with unnecessary detail and give a false impression of “completion.”

    To compensate for the drawbacks of traditional wireframes, many practitioners put aside the computer in favor of simple pencil sketches or whiteboard drawings. This speeds up the ideation process, but doesn’t always produce presentable or maintainable documentation.

    There is a growing popularity toward something in the middle: Computer-based sketchy wireframes. These allow computer wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artifacts.

  • 4 Design Elements Behind a Good Call to Action | letscounthedays – It is not uncommon for companies to sink large amounts of money into obtaining traffic to their websites in an attempt to increase conversions. Some of their money might go towards search engine optimization and some might go towards pay per click or search engine marketing. Little do they know their problem might not be about getting more traffic. The real problem could be that they have a poor call to action.
  • List of Really Useful Tools for CSS Developers | W3Avenue – This is not an attempt to create a mega list of tools for CSS developers; only few but really useful tools have been selected and placed under appropriate categories. If you see that a really useful tool has been missed, please feel free to share the link in comments.

    Note that for a tool to be really useful, it also needs to provide easy to follow instructions and user friendly interface; unless it is really straight forward. Unfortunately several tools listed in this list may not fulfill this criteria. If you are aware of another tool that is more user friendly and feature rich, please let us know and we may replace it with an existing tool.

  • Adding Grey Boxing To Our Web Workflow | Chalkboard Blog | Web Design, Marketing, Business and Charleston SC – I recently read a blog post by Jason Santa Maria talking about grey box modeling. Grey box modeling is basically the in-between I was looking for. It is essentially designing with spacial relationships and identifying your grid on the computer without getting hung up on colors, textures and other design elements. Grey Box modeling has added a layer of detail to my designs that I wasn’t previously achieving.
  • The CSS3 border-radius property « Blogging CSS – One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.
  • A jQuery Plugin for Zoomable, Interactive Maps – New Media Campaigns – We wanted the experience to be engaging as possible but also easily updatable in the future. We settled on jQuery as the interface technology to use as it made it simple to build, display and animate the map. I did a longer writeup on the detailed mechanics of how this worked two weeks ago in one of our most popular posts. Due to the great feedback we got on it, this is a follow-up with a revised version of the code as a jQuery plugin which should make it easier to integrate into other projects.
  • 11 Ways to Influence People Online and Make Them Take Action – Influence can be defined as the power exerted over the minds and behavior of others. A power that can affect, persuade and cause changes to someone or something. In order to influence people, you first need to discover what is already influencing them. What makes them tick? What do they care about? We need some leverage to work with when we’re trying to change how people think and behave.
  • 30 Must See Web Generator for Lazy Webmasters – Smart webmasters do not work everything out from scratch; instead, we make good use of the free tools available online. There are tons of brilliant web tools available online – it’s a waste not to leverage these tools and save some working time (or, to have more time for beer). In this article, I’m going to share my must-have list of 30 web design tools, I hope you’ll find them useful. On the other hand, I would like to take this opportunity to thank all the developers who had done some much and made our world better.
  • Slides from Accessibility Camp DC
  • Sketchy Wireframes – Boxes and Arrows: The design behind the design – When it comes to user interface documentation, wireframes have long been the tool of choice. However, using traditional diagramming tools like Visio, OmniGraffle, and InDesign, most wireframes today look the same as their ancestors did from a decade ago – assembled with rigid, computer-drawn boxes, lines and text. While these artifacts have served us well, they can also be slow to produce, burdened with unnecessary detail and give a false impression of “completion.”

    To compensate for the drawbacks of traditional wireframes, many practitioners put aside the computer in favor of simple pencil sketches or whiteboard drawings. This speeds up the ideation process, but doesn’t always produce presentable or maintainable documentation.

    There is a growing popularity toward something in the middle: Computer-based sketchy wireframes. These allow computer wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artifacts.

  • 4 Design Elements Behind a Good Call to Action | letscounthedays – It is not uncommon for companies to sink large amounts of money into obtaining traffic to their websites in an attempt to increase conversions. Some of their money might go towards search engine optimization and some might go towards pay per click or search engine marketing. Little do they know their problem might not be about getting more traffic. The real problem could be that they have a poor call to action.
  • List of Really Useful Tools for CSS Developers | W3Avenue – This is not an attempt to create a mega list of tools for CSS developers; only few but really useful tools have been selected and placed under appropriate categories. If you see that a really useful tool has been missed, please feel free to share the link in comments.

    Note that for a tool to be really useful, it also needs to provide easy to follow instructions and user friendly interface; unless it is really straight forward. Unfortunately several tools listed in this list may not fulfill this criteria. If you are aware of another tool that is more user friendly and feature rich, please let us know and we may replace it with an existing tool.

  • Foundations of Customer Service for Freelance Designers – DesignM.ag – There are a lot of factors that play a role in determining the success of a freelance web designer. Obviously, design ability and technical skills are needed, but other factors like customer service, marketing, networking, and work ethic will have a significant influence. In this article we’ll take a look at customer service as it applies to freelance designers.

    Providing high-quality customer service can at times be frustrating for freelancers, but taking good care of your clients is critical for client retention and for encouraging word-of-mouth referrals. Here we will look at 10 aspects that should be considered by freelancers who aspire to provide a high level of customer service.