Design Treats

• I posted to designmeltdown.com

  Blog comment designs

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/F-_i3LjFQNw/

  What comes right after the blog footer? The comments of course! This fine collection of blog comment designs demonstrates the variety and possibilities in this section of your blog design. The irony is that the comments can be one of the most engaging aspects of a blog, this is after all where users can actually interact with you, and yet this is a section all to often left unconsidered. I know even on my blog the comment design has been the least of my concerns and this is likely a big mistake; but as with a 2 year old, you pick your battles. http://www.webdesigndev.com/inspiration/the-best-of-blog-comment-designs

  

  • Tags:
  • Blog Comments

  9 Hours, 14 Minutes ago | Comments »

• I posted to designmeltdown.com

  Blog post footers – the ultimate footnote

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/uiopnf8u1dQ/

  The region at the end of a blog post, and before the comments, has turned into a gold mine (or mine field depending on your view) of possibilities. Countless people use this as a place to encourage social bookmarking, linking, tweeting and so on. Others use this as a chance to guide you to other relevant articles. While others do their best to capitalize on it by directing you to commercial goods or affiliate driven links. What ever your needs this collection will give you some things to think about when designing your next blog post footer! http://bluefaqs.com/2010/02/30-well-executed-blog-post-footer-designs/

  

  • Tags:
  • Blog Post Footers

  14 Hours, 14 Minutes ago | Comments »

• I posted to smashingmagazine.com

  Entering The Wonderful World of Geo Location

  http://feedproxy.google.com/~r/SmashingMagazine/~3/V1orvfQzNCE/

    I thought I could not be out-geeked. With a background in radio, and having dabbled in the demo scene on the Commodore 64 and hung out on BBSes and IRC for a long time and all the other things normal kids don’t quite get, I thought I was safe in this area.Then I went to my first WhereCamp, an unconference dealing with geographical issues and how they relate to the world of Web development. Even my A-Levels in Astronomy did not help me there. I was out-geeked by the people who drive and tweak the things that we now consider normal about geo-location on the Web.Pulling out your phone, find your location and getting directions to the nearest bar is easy, but a lot of work has gone into making that possible. The good news is that because of that effort, mere geo-mortals like you and me can now create geographically aware products using a few lines of code. So, let’s give the geo-community a big hand. [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]Why Geo MattersFirst of all, why is it important to consider physical location on this planet (at this moment) when we develop Web products? There are a few answers to this.The first answer is mobility. The days of people sitting in front of desktop machines at home are over. Sales of mobile devices, laptops and netbooks have overtaken those of bulky stationary computers in the last few years. The power of processors now allows us to use smaller, more mobile hardware to perform the same tasks. So, if people use their hardware on the go, we should bring our systems to them. Which brings us to the second—very important—point: relevance.Giving the user content that is relevant to the physical space they are in at the moment makes a lot of sense. We are creatures of habit. While we love the reach of the Internet, we also want to be able to find things in our local area easily: people to meet, cafes to frequent, interesting buildings and museums to learn about. The advertising industry—especially of the adult and dating variety—realized this years ago. I am sure you have come across one of the following before:I am sure these ads are more successful than the ones that show only user names. That the photos and names are the same for every location doesn’t seem to be a problem (but yes, I noticed it). So how does it all work?Getting The User’s Location Via IPEvery computer on a network has a number that identifies it: its IP address. The Internet is nothing but a massive network, and your IP number is assigned to you by the service provider that you have used to connect to that network. Because the numbers that service providers assign change from one geographical location to the next (much like telephone numbers), you can make quite a good estimate of where your visitors are from.To find out where a certain phone number is from, you use a phone book. To find out where an IP is from, you can use the Maxmind GeoIP database. Maxmind also provides a JavaScript solution that you can use on websites:<script type="text/javascript\" src="http://j.maxmind.com/app/geoip.js"></script> <script> var info = document.getElementById('info'); var lat = geoip_latitude(); var lon = geoip_longitude(); var city = geoip_city(); var out = '<h3>Information from your IP</h3>'+ '<ul>'+ '<li>Latitude: ' + lat + '</li>'+ '<li>Longitude: ' + lon + '</li>'+ '<li>City: ' + city + '</li>'+ '<li>Region: ' + geoip_region() + '</li>'+ '<li>Region Name: ' + geoip_region_name() + '</li>'+ '<li>Postal Code: ' + geoip_postal_code() + '</li>'+ '<li>Country Code: ' + geoip_country_code() + '</li>'+ '<li>Country Name: ' + geoip_country_name() + '</li>'+ '</ul>' info[removed] = out; </script>This gives you some information on the user (try it out for yourself). The challenge, though, is relevance. Your IP location is the location of the IP that your provider has assigned to you. Depending on your provider, this could be quite a ways off (in my case, I live in London, but my provider used to show me as living in Rochester). Another problem is if you work for a company that uses a VPN. At Yahoo, for example, I have to connect to the VPN to read my company email, and I have to choose a location to connect to:So, for a solution like the one highlighted above, I would show up as being in a totally different part of the world (which might be useful for watching Internet TV in the UK while I am in the US). IP geo-location, then, is an approximation, not a dead-on science.Getting The User’s Location Via The W3C Geo APIGuessing geographical location via IP is possible, but it can also be pretty creepy. Being able to take advantage of your location is useful, but security-conscious users and people who are generally suspicious of the Internet are not happy with the idea of their movements being monitored by a computer. This makes sense: if I can monitor your whereabouts day and night, I would know where and when to rob your house without you being there.There are a lot of solutions to the challenge of having good-quality geo-location and maintaining privacy. Google Gears has a geo-location service; Plazes helps you store your location; and Yahoo’s Fire Eagle is probably the most polished way to securely maintain your location on the Web.The problem with all of these services is that they require the user to either install a plug-in or visit a Web service to update their location. This is not fun; browsers should do the work for you.We now have a W3C recommendation for a geo-location API that allows browsers to request the geographical location of the user. This makes it less creepy, and you get real data back.Firefox 3.5 and above supports the W3C geo-location API. So does Safari on the iPhone if you run OS 3.0 or above. If you use the API, the browser will ask the user whether they want to share their location with your website.Once the user allows you to get their location, you get much more detailed latitude and longitude values. Using the API is very easy:// if the browser supports the w3c geo api if(navigator.geolocation){ // get the current position navigator.geolocation.getCurrentPosition(

  // if this was successful, get the latitude and longitude function(position){ var lat = position.coords.latitude; var lon = position.coords.longitude; }, // if there was an error function(error){ alert('ouch'); }); }Compare the IP and W3C solutions side by side. As you can see, there can be quite a difference in measuring the visitor’s location. The extent of the difference is shown in the following demo:Converting Latitude And Longitude Back Into A NameHaving more information is nice, but we have lost the name of the city and all the other nice data that came with the Maxmind database. Because the location has changed, we cannot just grab that old data; we have to find a way to convert latitude and longitude coordinates into a name. This process is called “reverse geo-coding,” and several services on the Web allow you to do it. Probably the most well-known is the geo-names Web service, but it has a few issues. For starters, the results are very US-centric.One freely available but lesser-known reverse geo-coder that works worldwide comes from a surprising source: Flickr. The flickr.places.findByLatLon service returns a location from a latitude and longitude coordinates. You can try it out in the app explorer, but by far the easiest way to use it is by using the Yahoo Query Language (or YQL). YQL deserves its own article, but let’s just say that, instead of having to authenticate with the Flickr API and read the docs, reverse geo-coding becomes as easy as this:select * from flickr.places where lat=37.416115 and lon=-122.0245671Using the YQL Web service, you can get the result back as XML or JSON. So, to use the service in JavaScript, all you need is the following:<script type="text/javascript\" charset="utf-8"> function getPlaceFromFlickr(lat,lon,callback){ // the YQL statement var yql = 'select * from flickr.places where lat='+lat+' and lon='+lon;

  // assembling the YQL webservice API var url = 'http://query.yahooapis.com/v1/public/yql?q='+ encodeURIComponent(yql)+'&format=json&diagnostics='+ 'false&callback='+callback;

  // create a new script node and add it to the document var s = document.createElement('script'); s.setAttribute('src',url); document.getElementsByTagName('head')[0].appendChild(s); };

  // callback in case there is a place found function output(o){ if(typeof(o.query.results.places.place) != 'undefined'){ alert(o.query.results.places.place.name); } }

  // call the function with my current lat/lon getPlaceFromFlickr(37.416115,-122.02456,'output'); </script>Combine that with the other services, and we get a more detailed result and can put a name to the coordinates:The Trouble With Latitude And LongitudeWhile latitude and longitude coordinates are a good way to describe a location on Earth, it is also ambiguous. The coordinates could represent either the centre of a city or a point of interest (such as a museum or a pub) in that spot.WOEID to the RescueTo work around the problem, Yahoo and Flickr (and soon will Twitter) support another way to pinpoint a location. The Where On Earth Identifier (or WOEID) is a more granular way to describe locations on Earth. Because Flickr supports it, we can easily get get photos from a particular area:select * from flickr.photos.search where woe_id in ( select place.woeid from flickr.places where lat=37.416115 and lon=-122.02456 )Using this and a few lines of JavaScript, showing geo-located photos is pretty easy:This has also been wrapped in a simple-to-use YQL solution. The following code will display 10 photos of Paris:<script> function photos(o){ var container = document.getElementById('photos'); container[removed] = o.results; } </script> <script src="http://query.yahooapis.com/v1/public/yql?q= select * from flickr.photolist where location="paris,fr " and text="" and amount=10&format=xml& env=store://datatables.org/alltableswithkeys&callback=photos">You can also play with this in the YQL console.Why Not Search For The Location’s Name?The main question about implementations such as the one above is why couldn’t we just do a search on Flickr for the city, instead of doing all the complex geo-lookups? The reason is false positives. Take Paris, for example: if you want to show photos of Paris on a travel website, you don’t want Paris Hilton to show up in there. Same goes for Jack London. You may also want to show photos of London, England, not London, Ontario. Geographic data is full of these kinds of gotchas, and the term for finding the right one is “disambiguation.” See the Wikipedia article on “Victoria” to see just how many geographical contexts this term can have.Turning Text Into Geo-DataFinding a visitor’s geographic location is all well and good, but it doesn’t mean much if you can’t link it to information for that area. This is where it gets tricky. For Flickr (and soon Twitter), this is easy, because both services are able to attach geographical locations to the content you put in them. This is not so for most of the information on the Web, though, and this is when we resort to clever algorithms, machine-learning, pattern-matching and all the other think-tank stuff that computers and the scientists in front of them do.Say you want to identify the geographical locations that a particular text or Web page talks about. Yahoo offers a service for that called Placemaker, and it is pretty easy to use. You need to get a developer key and send this as appid, send a text as documentContent, define the type of the text as documentType and define the type of data you want back as outputType. All of this needs to be sent as a POST to http://wherein.yahooapis.com/v1/document:<form action="http://wherein.yahooapis.com/v1/document\" method="post"> <textarea id="text" name="documentContent">Hi there, I am Chris. I live in London, I am currently in Sunnyvale and will soon be in Atlanta and Las Vegas.</textarea> <div><input type="submit" name="sub" value="get locations"></div> <input type="hidden" name="appid" value="{YOUR_APP_ID}"> <input type="hidden" name="documentType" value="text/plain"> <input type="hidden" name="outputType" value="xml"> </form>You can try this out yourself. Using PHP to call the API instead of a simple form, you can even format the output nicely. See it in action here:While developers who have played around with Web services won’t find Placemaker hard to use, the service can be daunting for the average developer. That is why I built GeoMaker some time ago. GeoMaker allows you to enter a text or URL, select the locations you want to include in the final outcome, and get the locations either as a map to copy and paste or as micro-formats.However, because there is also a YQL solution for using PlaceMaker in JavaScript, we can do the same with a few lines of client-side code to enhance an HTML document. Check out the following example:To use this, you need three things: a text with geographical locations in them in an element with an ID, a Google Maps API key (which you can get here) and the following few lines of code:<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script> <script> addmap.config.mapkey = 'COPY YOUR API KEY HERE'; addmap.analyse('content'); </script>This makes it incredibly easy to give your visitors a sense of what part of the world a text is related to.Adding Maps To Your DocumentsOnline maps have been around for a while now (and Google Maps was instrumental in the rise of AJAX), and many providers out there allow you to add maps to your documents. Google is probably the leader, but Yahoo also has maps, as does Microsoft and many more. There is even a fully open map service called Open Street Maps, which has been instrumental in the recent rescue efforts in Haiti.If you want interactive maps, probably the easiest thing to use is Mapstraction, which is a JavaScript library that does away with the discrepancies between the various map providers and gives you a single interface for all of them. 24ways published a good introduction to it three years ago.Probably the simplest way to show a map that supports markers and paths in your document without having to dive into JavaScript is the Google static maps API. It creates maps as images, and all you need to do is provide the map information in the src URI of the image. For example, in the script example above, this would be:http://maps.google.com/maps/api/staticmap? sensor=false &size=200x200 &maptype=roadmap &key=YOUR_MAP_KEY &markers=color:blue|label:1|37.4447,-122.161 &markers=color:blue|label:2|37.3385,-121.886 &markers=color:blue|label:3|37.3716,-122.038 &markers=color:blue|label:4|37.7792,-122.42You can define the size and type of the map. If all you provide is the location of markers, the API will automatically find the right zoom level and area to ensure that all markers are visible. Google’s website even offers a detailed tool to create static maps, including markers and paths.Geo Is A Space To WatchI hope this has given you some insight into all of the things you can do to bring the earth to your product and to put your product on the map. Geo-location and geo-aware services are already huge, and they’ll be even more important this year. There will be more services—some mobile providers are ready to roll out new hardware and software—and now you can be a part of it.What the geo-world needs now is a designer’s eye, and this is where you can help the geo-geeks create apps that matter, that look great and that make a difference in our visitors’ lives. For inspiration, check out Mapumental, which allows you to pinpoint a place to live in London, or see how Google Earth and some 3-D Objects allow you to race a milk truck on real map data.(al)© Christian Heilmann for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: javascript

  

  • Tags:
  • coding
  • javascript

  March 8 2010, 3:56pm | Comments »

• I posted to designmeltdown.com

  Table designs

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/037kFCWv-f0/

  Janko at Warp Speed has a fantastic write up and sample set of table designs. This is another one of those commonly neglected web elements that can really be beautified rather effectively. http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

  

  • Tags:
  • tables

  March 8 2010, 6:00am | Comments »

• I posted to smashingmagazine.com

  Common Questions About Design Professionalism

  http://feedproxy.google.com/~r/SmashingMagazine/~3/7qu5CVgPA00/

    The design profession is full of happy folks, and understanding why so many designers enjoy their work is not hard. But not all are so happy. If you’re not careful, the joy of getting paid to pursue your passion can be tainted by the less joyous realities of the professional world.You see, no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. This is true whether you work freelance, for an agency or in-house with a company.Every week I hear from designers who are struggling to come to terms with these realities. Unhappy with their current circumstances, they write to ask for advice on improving their lot. Usually, they either claim not to understand how things got so bad, or they lay the blame somewhere other than at their own feet. In every case, however, the sole cause is their poor choices and lack of professional acumen. It needn’t be so.Design is craft, but no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. Image source[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]Professional DiagnosisHere, I’ll paraphrase a few emails I’ve received from designers seeking advice. For each, I’ll diagnose the situation, explain in no uncertain terms what should have been done to avoid the situation and suggest a strategy the designer can follow to improve their circumstances.These circumstances are not uncommon. Many of you reading this are likely experiencing similar problems… or may at some point in the future. I hope that the information, advice and strategies presented here will help you avoid these and other problems.1. From A Freelance DesignerQuestion: “I recently graduated from design school and have started freelancing, and I’m wondering how you get clients? How do you get your name out there?”This person may just as well have jumped out of an airplane and then asked, “Now, how do I go about finding parachute? Oh, and should I land somewhere specific? How exactly do I do that?” Even so, this lack of foresight is quite common. The immediate lesson is that you shouldn’t become an independent professional with little to no professional experience, with no prospects and knowing little to nothing about the business.Fresh out of college or design school, you’re not a professional; you’re a technician (by definition, the opposite of professional). For the next few years you should be acquiring the skills, knowledge and understanding required of a design professional. The place to do this is in the company of peers and under the wings of mentors: at an agency or in house with a company. The successive lessons and built-in support system inherent in these environments are essential to a designer’s professional development.The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years, while you let your agency or company carry the burden of acquiring clients and running the projects. If you are any good, in time you will earn the respect of your peers and superiors, establish a good reputation (spread by word of mouth) and acquire professional acumen. If in that time you make any effort at all to share your work and thoughts with the wider design or business community, your name will become known (through word of mouth and your portfolio or blog), and your reputation will be built on substance rather than on social marketing’s smoke and mirrors. This would be the appropriate time to embark on a freelance career.As a freelancer, you’ll be running the whole show. So, you’ve got to be an ace at finances and budgeting; at speaking with and converting potential clients; at knowing what to discuss in order to weed out unsuitable potential clients; at preparing all manner of legal and project-specific documents, writing proposals, project management, intra-project client communications (and being the confident, unflinching pro in the face of every client request, question and distasteful situation); at dealing with dozens of types of unforeseen issues without hesitation; at maintaining tax information and constantly preparing various tax and business forms; at marketing, preparing and maintaining your own branding and identity, with its various elements; and at knowing how to begin and conclude all kinds of projects confidently. Oh, and you’ll also need a constant flow of interested potential clients.If you’re not confident and accomplished in all of these areas, then you’re not ready to be a freelance designer.Freelancing is only suited to seasoned professionals. Pursuing a freelance career as your first step in the profession is almost always a foolish move. Professionalism is maintained by habit. If your first step is a misstep, you’ve set a poor tone for the work ahead. Unless you immediately correct your mistakes, the habits you’ll develop will be clumsy and unprofessional.The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years. You need to be good at whatever it is you are doing. Image source2. From An Agency DesignerQuestion: “I’m not very good at the discovery meeting with clients. I’m never really sure what to ask or how to figure out what sort of design they’re looking for. My project manager or C.D. usually ends up asking most of the design questions. What’s the best way to handle this situation?”This is a common issue for designers at agencies, especially those with little experience. Luckily, an agency is a good place to gain experience and competence. But the question signals a few issues that require attention.First of all, design questions are not really appropriate during the discovery process. Granted, specific branding constraints may need to be defined and understood, but the design you will craft will come not from the client’s judgment and understanding of design but from yours alone. The design will be your articulation of what they need, based mostly on their business aims, the website’s purpose, their customers’ needs and expectations, the end users’ specifics, etc. In fact, if you ask no design questions at all, you’re probably on the right track.Imagine for a moment that you’re a physician trying to determine the best course of treatment for your patient. In that situation, you would not ask the patient what he thinks should be prescribed. Instead you would inquire about his symptoms, history, environment, physical needs (e.g. is he a pro athlete, or does he simply need to be able to get around normally?). The answers to these questions will define the constraints and indicate the appropriate course of action. Your patient’s opinion on what prescription would be appropriate is likely irrelevant; he came to you because he lacks the ability to help himself.Go into the discovery meeting prepared. Before the meeting, learn as much as you can about the company, its history and its past and current activities. Script a list of questions—some specific to this client and some appropriate for any client—to get the ball rolling. These questions will serve as a springboard to more in-depth discussion, which in turn will flesh out what you need to know.One more thing: you’re the design professional and it’s your responsibility to conduct the project successfully. You (not the PM or CD) should be driving the discovery. Use your time at the agency to improve your discovery skills, taking on more responsibility with each successive client. Reflect on each project’s discovery process, and look for ways to improve the process and your questions. With time and effort, you should become competent in this essential part of the design process.3. From A Freelance DesignerQuestion: “Some of my clients expect three or four (or more) comps from me. But that’s a lot of work, and I would prefer to show just a couple. Should I just charge more if they want more comps? How do some designers get away with just one or two for all of their clients?”These are interesting questions, and they beg a couple more:Why is this designer allowing his clients, who are not designers, to set the number of design comps?Why is he letting quantitative preference rather than qualitative necessity frame his understanding of the issue?Good design is not found by picking from a pack of arbitrary options, but is rather the result of deliberate, contextual choices. Taking a scattershot approach to design is in no way effective. Your clients may not appreciate this, but you certainly should! Your responsibility is to ensure that your clients don’t shoot themselves in the foot.The only person who knows how many design options are appropriate is you: the designer who is engaged in the process. And in almost every case there is one best design solution. Sometimes another compelling direction is worth considering and presenting to the client, but this cannot be known until you have fully engaged in the process, conscious of the parameters specific to that project.In most cases, you’ll explore a host of options during the design process. A thorough exploration will cull a majority of the trials, leaving only the most appropriate and compelling candidate(s)—one or two. These and only these design options should be shown to the client. Inferior designs should never be presented, even to fulfill a request for more options (options for what: mediocrity?).As a freelance design professional, or even as an agency designer, your responsibility is to define how many design options to present in a given situation. If a potential client insists on a less effective and less professional process, do not agree to work with that client. Compromise never brings excellence and has no place in design or professionalism. If you become comfortable making this sort of compromise, other compromises will also become easy for you. Your clients deserve and are paying for more than a compromised design.4. From An Agency DesignerQuestion: “I seldom get to meet my clients before I present design comps to them. By that point, the projects almost always become a tiresome series of re-workings of my original ideas. How can I change this?”One wonders what these original ideas were based on if the designer has never met the clients. If so, either 1) this person is at the wrong agency, and/or 2) this person lacks the professional understanding or the backbone to insist that she decide how the agency should structure design projects and client-designer interaction.Relationships are built on trust, and trust is born of experience and understanding. Your client cannot trust someone they have never met and who they know nothing about. So, when designs are presented by someone the client has never met, no wonder the client is a bit reticent and inclined to second-guess the designer’s decisions. These and the ensuing problems are all a result of the designer’s failings. Yes, it’s on you. Always.As the designer and an aspiring professional, you must insist on driving the design process. This means that you must be the one to meet with the client in the beginning. If a project brief is required, you must be the one to create it, based on your direct conversations with the client and his team.If your agency has a process in place that prevents you from fulfilling your responsibilities, your options are either to change the process or to find a better agency. Anything less relegates you to an irresponsible practice in an unprofessional environment. Hopefully, this is not acceptable to you, because it would erode the habits you are professionally obliged to cultivate.5. From A Freelance DesignerQuestion: “I love to design, and I think I’m pretty good at it. But I’m not comfortable talking to clients. Whenever I’m on the phone or in front of a client, I get very nervous. I think my nervousness makes me seem less capable, and I’m pretty sure I lose some of my client’s confidence. What can I do to correct this? Should someone else do the talking?”Effective communication is one of a designer’s most important jobs. Every communication, whether by email or phone or in person, is an opportunity to demonstrate value and win confidence. And if you don’t demonstrate value, you’ll seldom win confidence. Like designer #1 above, you may simply not be prepared to be a freelance professional.If you fail in communicating, no matter how skilled a designer you are, you won’t get the chance to ply your skills very often, and seldom for the best clients. The best clients are those who invest complete trust in their designers. That trust must be earned before any actual designing happens (see designer #4 above).And no, someone else should not do the talking. The design professional’s job is to show confidence when dealing with clients. No one else can communicate your value or win trust for you. The reason clients distrust those who do not communicate with confidence is because this trait signals other incompetencies. This may sound harsh, but it’s a fact: if you’re not confident, it is because you lack capability (whether professional competence, design skill or perhaps vocabulary)… and you know it. Address this void, and your confidence will shine through.If you lack confidence in conversation, start to address this deficiency immediately or find another calling. Otherwise, you may have a bright future as a production artist somewhere, but not much of one as a design professional. Design professionals are experts at every aspect of interacting with people.Confidence aside, it goes without saying that excellent vocabulary is an important component of effective communication. People judge you by your words, as well they should. Knowing this, your professional responsibility is to work on your vocabulary, just as you work on your design ability: daily.ProfessionalismSkill in design is only part of what defines a competent professional. Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others (whether clients, co-workers, employees or others). Professionalism is also measured by how well you uphold ethical standards in making the difficult decisions in every area of your work.Talent and skill can make you a technician; and a technician is, as we noted, not a professional. For context, think of traditional professions: lawyers, doctors, architects. The enormous responsibility they are entrusted with, and their ability to carry out that responsibility across the scope of their work, makes these people professionals. Thus, an able professional would not be troubled by the questions posed in this article. Rather, they would know precisely how to proceed or how to circumvent these issues. If you have any of these questions, you may not be prepared to be a design professional.Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others. Image sourceAll of these situations result from designers believing that being a good designer is good enough. This profession has little room for those who lack a professional’s integrity and broad understanding. Designers who are willing to compromise and simply accept the faulty decisions that are handed to them have had their profession stolen from them. These designers have no business working with clients who pay good money for professional service.Be better than this. Your first step to success is to assume your rightful responsibility for everything that involves you. Dissatisfied with the flawed structure at your agency? You chose to work there; change your circumstances. Frustrated by your perpetual lack of prospects and stalled reputation? Sounds like you’ve got deficiencies to address. Overwhelmed by the challenges and complexities inherent in freelancing? You probably started freelancing without sufficient preparation.Fix it. You fix it. It’s all on you.Designers: you get paid to do what you love. How great is that!? But this fortunate and enviable situation leads to fulfillment only if you take full ownership of your profession. Otherwise, you’re carrying a time bomb. When it goes off, your career will either falter or be blown to smithereens. Don’t let this happen to you. Educate yourself. Have the courage and integrity to habitually make good choices so that you enjoy a long and happy career as a design professional.(al)© Andy Rutledge for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  

  • Tags:
  • design
  • workflow

  March 8 2010, 1:48am | Comments »

• I posted to smashingmagazine.com

  Handy Tools and Tips for E-Commerce Websites

  http://feedproxy.google.com/~r/SmashingMagazine/~3/k8MVnJnihd4/

    Running an e-commerce website is a never-ending task, from trying to squeeze that extra bit of conversion rate out of the check-out page to figuring out which referrers give you the best traffic. There’s also a plethora of tools out there to help you achieve your goals. But which ones do what, and why should you use some of them? This article introduces some of these tools and offers a tip or two on how to use them.If you own or operate an e-commerce webs, you’ll find one or two things that you haven’t tried before. If you’re new to e-commerce, this article should give you insight into some of the possibilities available to you as you enter the market. A plethora of merchants out there could benefit from lower-cost e-commerce help and advice. Covered in this article are analytics tips, visualisation tools, product page tips, checkout tips,li>4 testing tools to try right now and a final tip.This article is only the tip of the iceberg. If you have any tips on usability, the check-out process, product pages, analytics or testing, please add them to the comments, so that this article becomes even more useful to readers.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]AnalyticsAnalytics are the key to knowing what’s going on with your website. This section gives five tips for using Google Analytics to get the most out of your stats. If you have a high-traffic e-commerce website or wish to get even more in-depth with analytics, it might also be worth considering some higher-level analytics packages such as Coremetrics, Omniture or Webtrends.We’ll focus here on more advanced analytics with the Google tool and assume that you know the basics of metrics.Analytics Tip 1: Advanced SegmentsAdvanced segments allow you to do everything you normally do with Analytics, but with only on a small subset of data. How is this useful? Say your e-commerce website serves both the UK and US. You could create two advanced segments, one for your US visitors and one for your UK visitors. This allows you to zero in on how your US visitors differ from your UK visitors in terms of purchasing habits, website usage, searches and so on.Also, why not compare two or more different referrer sources by a number of metrics to see which provides better-quality traffic? The list is endless and limited only by your imagination.Want to find out more with more examples? Read Avinash Kaushik’s advanced segments article.Analytics Tip 2: Custom ReportsLet’s face it: the default reports in Google Analytics aren’t superb; they don’t tell you what you really want to know. That’s where custom reports come in.You can add the metrics that matter to you, on the dimensions you want to see. An example would be a report of referring websites, with their average per-visit value, bounce rates and time spent on site (see graphic above).This report is so much more useful than your standard referrers report, with better information in one place.Analytics Tip 3: Advanced FiltersIn the example above, the report gave me 392 rows of information. In a world of top 10s and top 25s, humans can’t process that many rows and make sense of that information.This is where advanced filters come in. If we want to find the best-quality referrers on the list, we can get Google Analytics to filter out what we don’t want. Click “Advanced filter” at the bottom of the page and add this:This brings our 392 sources down to just 8; knowing what those 8 are is great. The filters above exclude all direct traffic (because we want to identify referring websites) and mail server referrals (we’re looking for websites), and they give us the highest success rates on per-visit value. Quick, valuable data.Analytics Tip 4: IntelligenceThis is a newer feature of Google Analytics, one that does some heavy lifting for you. Intelligence allows you to see changing traffic patterns without having to set up reports for everything you want to track. If one day your bounce rate goes up by 10%, you’ll see an alert and won’t have to rely on spotting it.This is really useful for discovering patterns. The image to the right shows an alert we got for one of our websites for which the bounce rate went through the roof. There was obvious panic until we realized that the last date to submit orders in time for Christmas had just passed. Panic over. The message on the home page was the cause of the spike in the bounce rate. We were notified of the issue quickly and could dig right away for the cause.Other Analytics ToolsWe’ve focused here mainly on Google Analytics because it is so widely used. However, that’s not to disrespect the plethora of worthy analytics tools out there:Clicky An interesting take on analytics: more useful standard reports and immediately accessible data, but lacks power user features.Motally Mobile analytics. If your website has high mobile phone usage, then you should try this tool to see more in-depth analytics.VisualizationData can be pretty overwhelming when you have thousands of entries. Visualization gives you quick insight into your data without overloading.Visualization Tip 1: WordleA genius service from Jonathan Feinburg, Worlde allows you to enter any kind of textual information and get a visual representation of that text on the screen. This is very useful for getting an overall view of your keywords and the structure of what’s going into your website. My blog returns the following visualization.What does this tell me? Well, given how much I’ve written about e-commerce, that word doesn’t appear! So, I need to pay much closer attention to my keyword selection and usage. I also need to pay attention to why the word “offline” is so big.If you need to export more than 500 words out of Google Analytics for your keyword report, check out this tutorial.Visualization Tip 2: Heat MapsHeat maps give you an easy way to look at your important pages without having to scour rows of data on your top content. They also provide much-needed information on what people are doing relative to the page size, length and placement of items, which data cannot do alone.Run heat maps on your most important pages: check-out pages, product pages, search pages. This will give you quick, useful information on whether people seem to be glossing over vital information or ignoring key functionality.Key questions could be:Are people finding my calls to action (such as “Add to basket”) easily?Is an important part of my navigation being ignored?Are page elements taking up space that no one is noticing?Crazy Egg is a decent heat map service. Another good tool is clickdensity.Visualization Tip 3: Website Overlay ToolThis feature in Google Analytics overlays percentages, conversion rates and other usable statistics on pages to tell you what people have done and clicked on different pages. Most usable is that when you click on a link you’re taken to that page, with the overlay in place, allowing you to see how people are navigating the website. Did 20% of visitors go to the next most important page after this one? Is that what you were projecting? Gems of information abound.Visualization Tip 4: ScrutinizerLearning how users view your website without having to ask them can be very beneficial. Of course, user testing has no true substitute, but a few tools can help:Scrutinizer shows you slowly how people may be viewing your website. It applies a filter over top the website, spotlighting the area where your mouse is pointing at. I don’t know the science behind it, but it might be useful to get users to perform tasks while the filter is applied; it would really show usability.Visualization Tip 5: Feng GUIFeng GUI allows you to look at any marketing piece (including a website) to see which parts attract attention and in what order. It uses algorithms to simulate eye-tracking and is useful for seeing whether what you thought was prominent really is. Not a substitute for user testing either, though.Product Page TipsOne of they keys to e-commerce success is a good product page. Here are a few tips to improve your product pages.Product Page Tip 1: Obvious Call To ActionYour “Add to basket” button is obviously key to your e-commerce website’s success. Make sure the button is not hidden, too small or confusing in any way. It should be above the fold and not difficult to click.Get Elastic has a good article on “Add to cart” buttons; an oldie but a goodie on statistics, even if the buttons are a bit out of date.Product Page Tip 2: Delivery InformationDo not withhold delivery information till the last minute when people are checking out. It leads to mass frustration and ill feeling towards your website. Make sure people can see an item’s stock status (”in stock,” “out of stock,” “date expected back in stock”) and the delivery lead time. This will prevent a slew of customers from abandoning their baskets further along the check-out process.The image above is from Play.com: delivery cost, dispatch estimate and stock levels. Great job.Product Page Tip 3: Progressive Disclosure of InformationPeople are very different in how they want to consume information. Some prefer social information such as reviews, ratings and comments. Others prefer technical specifications. Still others like to read a store’s description of a product (if it’s well written).The point is to give everyone access to the information they want without cluttering the page. Whether it’s grouping information under different tabs or providing a “More details” link, there are many ways to give progressively more information. Without compromising the layout, this should give 80% of visitors what they need.The image above is from Currys, an electronics retailer. It has main bullet points for each product and a “More info” link. The link merely takes you further down the page, but it prevents the top of the screen from being cluttered with information that many people may not be interested in.Product Page Tip 4: Copy Is KingMake sure your copy is well written and unique. Too many websites use the standard manufacturer’s description. This harms you two-fold. First, the copy is in so many other places on the Internet that your SEO will be harmed. Secondly, you’re not giving the purchaser any reason why they should purchase that product from you. Good copy should inspire confidence in you and the product as well as give your personal slant on the product, thus building your website’s personality.Hire a copy-writer, or do it yourself. But do it. Even if a product is your top revenue generator, still do something!Check-Out TipsDon’t let this last hurdle of purchasing trip you up.Check-Out Tip 1: Allow Guests to Check OutYou need to be able to give very good reasons why forcing guests to register to purchase products is essential. Think of offline shopping. Do you have to open an account with a news agent to buy a newspaper? Of course not. Don’t make that mistake online. Allow guests to check out.But you also need to sell reasons why guests should register. It’s all about making it easy, now and in future.Check-Out Tip 2: Enclose the Check-Out ProcessOnce someone wants to check out, the process should be as fast and slick as possible. Remove distractions, including ads, navigation and offers that might distract them from what they are trying to accomplish, which is to pay.Some will say this stage is a great opportunity to up-sell or feature related products. I disagree. That can be done effectively on the product page or just after the product has been added to the basket. Distracting the visitor or encouraging them to choose something else before giving you their money is an invitation to them to abandon their cart.Check-Out Tip 3: Ask for Feedback After the Visitor Has Submitted Their OrderOnce a visitor has converted, rather than show the standard confirmation page, why not also ask for some feedback on their experience? SurveyMonkey lets you quickly build an online survey, including questions such as:“On a scale of 1 to 10, were you able to easily find what you were looking for?”“Was there something in you particularly liked or disliked about our website?”“On a scale of 1 to 10, how easy was the check-out process?”“Please tell us what we can do to improve your next visit?”This qualitative feedback is invaluable to e-commerce website owners. Sure, not everyone will fill out the survey, but several will be more than willing to voice their opinions. If you do this, though, remember to follow up to let people know what you’ve changed and why.Check-Out Tip 4: Handle Errors GracefullyProblems occur during the check-out stage. Cards are declined, people enter invalid email addresses and they forget to specify their preferred delivery method. To cover all eventualities, you should display messages that are:Contextual Put the message next to where the error occurred.Useful No “Error code 21″ messages please. Write friendly, useful error messages, such as, “Sorry, we believe your email address is invalid. Did you accidentally add an extra full stop or space?”Conventional Error messages should be red. People understand that red indicates a problem.Luke Wroblewski has a great article on A List Apart about this.Testing ToolsTest, test, test: the mantra of all e-commerce website creators. Only your market knows the answers.Testing Tool 1: UserTesting.comAt only $29 a test, UserTesting.com delivers incredible value for the money. For $290, you choose the test to be carried out and the demographics of the audience, and hit “Go.” Not much later, you get 10 pieces of highly detailed video and written feedback. The information contained in those reports will earn you a lot more revenue than $290.Spend some time thinking about the type of people you want to participate in your testing. If you run a baby clothing website, naturally you would want mothers to participate in the testing. However, it might also be useful to run the tests on fathers as well as aunts and uncles (typical gift purchasers) because their purchasing behavior is very different.Possible briefs are:Find, evaluate and purchase product x.Find the information on delivery.Purchase our gift voucher.Testing Tool 2: Google Website OptimizerA lot has been written about Google Website Optimizer. It’s easy to use, so give it a run. It’s great for testing different “Add to cart” buttons to see which gets a better conversion rate.The main advantage of Google Website Optimizer is that you can test things on your actual market (whereas services like UserTesting.com merely attempt to match your target market). This also means that you’re able to choose how large a percentage of your traffic to test and thus achieve statistical relevance.Bryan Eisenberg has written a great book about it.Testing Tool 3: 5-Second TestThis does what its name implies: gives you quick feedback on your website—entirely subjective feedback, of course, but interesting when used in conjunction with analytics to correlate the data.It can be very useful to testing elements you want to be prominent. What’s the purpose of your website? Where’s the call to action? And exept for some premium features, it’s free. No brainer? Indeed.Testing Tool 4: SEO ToolsSEOmoz, GeoTarget, Linkscape and Trifecta are four among many tools you can use to test your website’s on-page and off-page SEO scores. They can quickly identify problems with your website so that you can fix them and hopefully improve your ranking.Final TipTechnologies come and go. Who knows what we’ll be using for analytics in five years’ time or what kind of information we’ll be tracking across devices and channels. The key to a good e-commerce strategy is customer insight and engagement. In other words, find out what people want, and give it to them (in an engaging way). Always be listening, asking questions and monitoring every facet of your website, business, industry and competition, and use whatever technology is appropriate to help you achieve your goals.(al)© Rob Smith for Smashing Magazine, 2010. | Permalink | One comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: ecommerce

  

  • Tags:
  • design
  • ecommerce

  March 6 2010, 2:47am | Comments »

• I posted to designmeltdown.com

  More e-commerce goodness

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/_2B2RLb5k-Y/

  Here is 50 more wonderfully designed and implemented e-commerce sites. As always, this category amazes me. http://speckyboy.com/2010/02/11/50-beautifully-crafted-corporate-ecommerce-web-designs/

  

  • Tags:
  • e-commerce

  March 5 2010, 6:00am | Comments »

• I posted to smashingmagazine.com

  Print Magazines for Web Designers, Digital Artists, and Photographers

  http://feedproxy.google.com/~r/SmashingMagazine/~3/T8bvDbQBALw/

    Although much valuable information for all sorts of web and print professionals can be found online, it is often difficult to weed through all the noise and find good quality content. I believe it’s vital that professionals in different creative fields supplement their online learning and research through well-edited and high-quality print publications.Print magazines, more often than not, are well-researched and are headed by top-notch editorial staff, usually containing information and resources on the cutting edge of their respective industries’ trends and happenings.To that end, to help you fulfill part of your offline research needs, I’ve compiled a list of print magazines that are of interest to professionals in three different categories: Web Designers, Digital Artists, and Photographers. And be sure to comment so you can tell us your personal favourite print magazine, if you don’t see it listed here.You may be interested in the following related posts:45 Incredibly Useful Web Design Checklists and QuestionnairesProfessional Web Design ForumsUseful Podcasts For Designers And DevelopersUseful Web Design E-Mail Newsletters[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]Magazines for Web Designers.net Magazine / Practical Web Design.net is the world’s best-selling magazine for web designers and developers, featuring tutorials from leading agencies, interviews with the web’s biggest names, and agenda-setting features on the hottest issues affecting the internet today. If you’re serious about web design, then .net is the magazine for you. This is easily the best and most important magazine for web professionals, and it should be noted that .net is sold as Practical Web Design overseas.Visit the .Net Magazine / Practical Web Design official websiteWeb DesignerWeb Designer will help you design and develop stunning websites, providing exclusive interviews, professional advice, behind-the-scenes features with top developers and agencies, site showcases, plus how-to articles and tips for a variety of design and development software.Visit the Web Designer Magazine official websiteMagazines for Digital ArtistsComputer ArtsThe world’s best-selling creative magazine will inspire you, bring you the inside track on the creative industry, and reveal cutting edge skills and techniques. Every issue showcases the best illustrators, graphic designers and web designers from around the world. The tutorials section is the envy of the industry, giving you the skills and inspiration you need to be a better artist.Visit the Computer Arts official websitePhotoshop UserPhotoshop User is more than just an amazing Photoshop resource, it’s also the official publication of the National Association of Photoshop Professionals (NAAPP). Each issue includes behind-the-scenes features, how-to articles, help desk Q&A, step-by-step tutorials, and down & dirty tricks. Photoshop User is widely recognized as the most trusted resource for Adobe Photoshop and Lightroom training, advice, and how-to information for the graphic design, photography, and digital arts worlds.Visit the Photoshop User official websitePhotoshop CreativePhotoshop Creative provides Photoshop users with lashings of practical advice and inspiration. Whether you’re brand new to the program or simply looking to improve your existing skills, this is the magazine for you. We don’t like to leave anyone out, so we want to make sure there’s something for everyone – from the Adobe Photoshop Elements user right through to those lucky enough to own Photoshop CS3.Visit the Photoshop Creative official websiteDigital ArtistDigital Artist is the perfect magazine for anyone who uses their computer as a canvas. It is the only community-focused magazine to cover all art styles and all art software, making each issue a medley of breathtaking images to inspire you to create your own. The magazine includes tutorials and guides, an extensive Q&A section, reports on new artists and their current projects, plus interviews, features, and galleries.Visit the Digital Artist official websiteCorel PainterThe official Corel Magazine, offering professional tips and techniques, digital art concepts and theory, special effects, and more.Visit the Corel Painter official website3D Artist3D Artist is dedicated to bringing you interviews with leading lights in the 3D industry, fascinating features on development and technologies that are shaping what you see on TV and in film, in advertising and architecture and in good old art. The magazine showcases the best and most exciting 3D images every month with a monster 11-page gallery.Visit the 3D Artist official website3D World3D World is a high-quality magazine crammed full of news, inspiration and practical advice about 3D graphics. Includes news and analysis of all the latest trends in the 3D industry, in-depth reports on the hottest new 3D projects, detailed, step-by-step technical walkthroughs, artistic and creative advice from professionals at leading international studios, and impartial reviews of the latest creative hardware and software.Visit the 3D World official websiteLayersLayers is the only magazine that covers everything Adobe Creative Suite 4 has to offer. Each issue is filled with top-notch tips and techniques for Adobe Illustrator, InDesign, Photoshop, Flash, Acrobat, Lightroom, After Effects, Dreamweaver, and more.Visit the Layers official websiteMagazines for PhotographersPractical PhotographyPractical Photography delivers a diverse range of content that teaches photo enthusiasts to take better photos and how to creatively enhance them in Photoshop.Visit the Practical Photography official websitePhoto TechniquePhoto Technique philosophy is that the photographic medium has never existed on the basis of unrelated techniques or unskilled aesthetics. For that reason, they incorporate the technology and methodology used in creating photographs into two categories. The first is a series of portfolio/article combinations that demonstrate both the means and the end result. The second is expanded technical articles intended to completely follow a process in detail, rather than offer short snip-its or tips. The magazine will never address the interest of a point-and-shoot mentality; the intent is to elevate the magazine to a more professional level.Visit the Photo Technique official websitePhoto ProIf you’re a working photographer or have dreams of setting up your own photographic business, this is the magazine for you. Every issue of Photo Pro is packed with inspirational images, expert advice and reviews of the kit that you need to get ahead. There’s also must-read business guidance from successful working photographers. It’s the ultimate manual for modern pros.Visit the Photo Pro official websitePopular PhotographyPopular Photography is the world’s largest photography magazine and the leading technical authority, buyers guide and how-to resource for the photo enthusiast. Geared toward those who are passionate about photography, each monthly issue presents unmatched technical expertise and a wide range of articles on the technique, craft and equipment used in making outstanding images.Visit the Popular Photography official websitePhotography MonthlyPhotography Monthly is the UK’s most interactive photography magazine, featuring expert advice, product reviews, tips and techniques, and more.Visit the Photography Monthly official websiteDigital PhotoOnline and on newsstands, Digital Photo (formerly PC Photo) is the top digital photography magazine. Get the latest news, equipment reviews and previews, photography tips and more.Visit the Digital Photo official websitePhoto LifeFor over 30 years, Canadian photography amateurs and professionals have turned to Photo Life as a partner in furthering their photographic skills. The magazine covers all aspects of photography, including industry news, photographic techniques and tips, field tests, travel, digital, secrets of the trade, and much more. Photo Life has something for everyone, plus it’s supplemented with images from some of the country’s best photographers, including those of our readers.Visit the Photo Life official websitePhoto District News (PDN)Photo District News (PDN), the award-winning monthly magazine for the professional photographer, has been covering the professional photographic industry for over two decades. Every month, PDN delivers unbiased news and analysis, interviews, and portfolios of the latest photographic work. PDN delivers the information photographers need to survive in a competitive business – from marketing and business advice to legal issues, photographic techniques, new technologies, and more.Visit the PDN official websiteRelated Resources12 Print Magazines for Web and Graphic DesignersGraphic Design Magazines at Design Dump14 Essential Magazines for Graphic DesignersRelated PostsYou may be interested in the following related posts:45 Incredibly Useful Web Design Checklists and QuestionnairesProfessional Web Design ForumsUseful Podcasts For Designers And DevelopersUseful Web Design E-Mail Newsletters© Louis Lazaris for Smashing Magazine, 2010. | Permalink | 6 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  

  • Tags:
  • design
  • workflow

  March 5 2010, 5:32am | Comments »

• I posted to designmeltdown.com

  Styling web links

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/T0vU2u7eNe0/

  It has never occurred to me to create a collection of sites based on the styling of links. It is however a very clever idea. Smashing Magazine has a great collection of such samples that show the wide range of possibility available. http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/

  

  • Tags:
  • Hyperlinks

  March 4 2010, 6:00am | Comments »

1 2 3 4 5 6 7 8 9 10 ...47 ›

Popular Tags

• inspiration
• design
• downloads
• Freebies
• Graphics
• free
• Developers Toolbox
• How-To
• Design Showcase
• wordpress
• photography
• icons
• coding
• CSS
• photoshop
• Events
• wallpapers
• showcases
• Tutorials
• workflow
• tools
• useful
• smashing
• typography
• techniques
• best of
• usability
• Fonts
• Best of the Month
• e-commerce
• CMS
• trends
• retro
• javascript
• portfolios
• templates
• Forms
• movies
• php
• vector
• applications
• navigation
• brushes
• illustrator
• vectors
• Business Cards
• ui
• hacks
• creative
• themes

Search