Highlights of Week 22/2011
- User-interface, user-experience & usability explained (by Bernard Schokman) - I think the title is misleading, it's more about "Practical design principles for UI/UX/Usability Design"
- 10 Important UI Design Considerations for Web Apps (by Marc Gayle) - try polishing the little things to make your app truly awesome
- Tools for Facilitating Feedback on Prototypes and Wireframes (by David Leggett) - What's your favorite? Why?
- How to Identify the Best Design Problems (by Joshua Porter) - About the importance of prioritization.
- A Guide to CSS Colors in Web Design (by Alexander Dawson) - Once again a great guide by Alexander; contrast, shades, hues, transparency and co.
- 40 Beautiful and Elegant WordPress Themes of May 2011 (by Madalin Tudose) - very nice collection, wordpress has come a long way and so did its front-end designers
- HOW TO: Add the +1 Button to Your WordPress Site (by Christina Warren) - if you like it or not, here is the +1 Button integration...
- Why You Should Buy Your First 5000 Twitter Followers (by Rohit) - ethical or not... love or not love... with a little help from your friends
- So you think you can build a website? (by Vitamin in Talent) - a really handy flowchart to determine if your idea will result in a great website
- The ultimate HTML5 resource guide (by Cameron Chapman) - what else to say? ultimate resouce guide!
- (More) Useful Web Usability Testing Tools (by hongkiat) - What are your experiences with these tools? Which one is your favorite? Why?
Including Tweets into your Webpage
Very simple and effective. I started off researching into php libraries for twitter before I settled on a very pragmatic approach which I'd like to share here. I separated the code into smaller bits for clarity and better understanding.
Somewhere in your code include this HTML snippet (style the HTML using CSS id selectors):
<div id="twitter-container"> <div id="twitter-container-content"> <!-- tweet retrieval in here --> </div> </div>
Copy and paste the actual PHP tweet retrieval code into the section above. Don't forget to rename the screen_name to whatever your twitter handle is
print("<h2>Latest Tweets</h2>"); error_reporting(-1); ini_set('display_errors', true); $user = new SimpleXMLElement('http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=michaelgaigg&count=3',null,true); foreach($user->status as $status){ print("<div class=\"twitter-entry\">"); print("<div class=\"twitter-entry-text\">".renderUrls($status->text)."</div>"); print("</div>"); }
Add this PHP helper function (maybe you have a tools class) that will parse the tweet and detect hyperlinks which are then wrapped into the HTML A tag so that they become clickable.
function renderUrls($originalString) { $returnString = ""; $stringToArray = explode(" ",$originalString); foreach($stringToArray as $key=>$val) { //$URL_Validation = ereg("^[^@ ]+@[^@ ]+\.[^@ ]+$", $val, $trashed); $returnString .= (substr($val,0,7) == "http://") ? "<a href='".$val."' target='_blank'>".$val."</a> " : $val." "; } return $returnString; }
That's it, no magic!
Highlights of Week 39/2010
- Creating a User Interface That Speaks Your Users’ Language (by Cedric Savarese) - about the challenge of finding a common language - in plain English.
- 37 Productivity Tips for Working From Anywhere (by Sarah Kessler) - there is at least one tip that will help you, I promise.
- The Next Level of Design: Being Unique (by John O’Nolan) - aka: designing with edge, thinking outside the box, "not stopping until you hit that eureka moment".
- Designing the #newtwitter (by @Twitter) - The new #NewTwitter proportions were not left to chance (at least in their narrowest width).
- Understanding Blind Users' Web Accessibility and Usability Problem (by Babu, Rakesh; Singh, Rahul; and Ganesh, Jai) - the authors outline seven stages of action and what they mean from a designers point of view (think checkpoints).
- A Case for Coding Your Wireframes (by Jake Rocheleau) - "Avoid detours by focusing on your main goals." - sounds so easy, right? Have a clear strategy in mind or else you are doomed to fail (delay at the very least).
Go figure: Hierarchy of Digital Distractions
I'm still smiling about David McCandless's Hierarchy of Digital Distractions, a visual representation of digital things that matter to us. Well, some of them more than others.
In the shape of a pyramid the illustration reminds us of the order of importance model as suggested by Maslow's hierarchy of needs where the most fundamental need - earning our bread and butter (any kind of actual work) - is at base. Activities higher in the pyramid require more of our attention and 'trump' the activities below. Moving up in the pyramid means re-prioritizing activities by focusing on lesser important but subjectively more fulfilling needs.
So, if you in the midst of a phone call on one of those ancient Landlines, a New Voicemail will catch your attention which in turn will be trumped by a Mobile Phone call in silent vibrating only before the next Text Message comes in which obviously is not as important as a Mobile Phone call. Beware of buying an iPhone though because anything happening on your iPhone will overpower the before mentioned.
An email from a romantic partner will always rule over any skype call and a new message from your online dating service which is in return more important than an @message on twitter, a message on facebook or a new contact on flickr. All this happens is fine until one of your devices crash or your partner shuts the lid of your laptop on your fingers.



