Archive for the ‘Tools & Resources’ Category
published by Dan in Tools & Resources | Usability
No I’m not trying to wiggle my way out of listing the best web design books. The post title is actually the title of one of the best web design books anyone can read - Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug.
The great thing about this book is that the “common sense approach” is something that is understandable to everyone. Reading the book will benefit everyone from web designers to website owners who know nothing about web design. Those who have an advanced knowledge might not think they can learn more but might actually be pleasantly surprised at the enjoyment refreshing one’s “knowledge base” can bring. If you feel like you won’t learn anything new at the very least you’ll enjoy the book’s humour.
On the other hand, those who do not have any background on web design will find this book not too difficult to read since it doesn’t contain any code and presents usability concepts in a way that won’t stress your brains. If you don’t believe me just read the glowing customer reviews on Amazon.
A quick list of some of the things you’ll learn:
- First Law of Usability - Don’t make me think. Users want websites to be self-explanatory. They want things to be intuitive. Don’t make them think!
- User habits such as the fact that most users do NOT…
- read. Instead they simply scan pages so you should avoid being wordy.
- take time to learn how things work.
- Simple usability tests; and
- a whole lot more…
published by Dan in Tools & Resources | Usability | Website Design
Aside from pages with downloads other web pages where help is appropriate include:
- gaming sites - A help page where game information including the goal, rules, and instructions is needed for any website with games. Shortcut keys should be explained and a legend for icons given.
- online shops - A help page where people can find everything they need to know is important. However, due to the nature of the site the help pages for online stores are often subdivided into different topics including FAQ, product details, security issues, etc.
In truth any website wherein users need to do anything more complicated than just read and comment usually should have some sort of help page. This doesn’t mean that all users will actually need to read that help page (especially if the website design is very professional and is very usable) but what’s important is that help be available to anyone who might need it.
Note too that the complexity or depth of the help files/pages depends on the complexity of the tasks that a user needs to perform in the website. A simple download will just need a brief description (although you can give information on troubleshooting in case the download doesn’t work) while purchasing a product will require not only product details but in depth information on shipping, online security, etc.
published by Dan in Accessibility | Tools & Resources | Web Technology | Website Design | Website Standards
Last time I posted about the importance of web accessibility. I mentioned how other users, aside from the disabled and partially disabled, could benefit from web accessibility. As a web designer though that is not very familiar with web accessibility you should realize that there is a pretty wide range of disabilities to address including:
- visual impairments - whether full or partial blindness or colour blindness
- motor disabilities - for those with problems with fine muscle control due to certain conditions like Parkinson’s disease, cerebral palsy, muscular dystrophy, etc.
- auditory problems - whether full or partial deafness
- seizures - epilepsy is sometimes triggered when the screen frequency is between 2 to 55Hz
- cognitive/intellectually impairments - users with learning disabilities such as dyslexia, dyscalculia, has poor memory and problem solving skills, etc.
Looking at the list above can be daunting. However, a web design provider really needs to address these issues especially if under the jurisdiction of countries that legally require web accessibility. As mentioned in the previous post though, the Web Accessibility Initiative is a good place to start informing yourself about the issue. There you will find everything from guidelines and techniques to evaluation tools.
As a web designer note though that your job is really only to follow the guidelines set by the W3C. You do not have to worry about the hardware part and other assistive technologies that will help the disabled in web browsing. By following the guidelines you can be assured that the website you have designed can be easily read by assistive technologies such as screen readers. Of course, since technology constantly gives better (or at least newer) solutions then it is important that you keep yourself up-to-date with the latest developments in web accessibility.
published by Dan in CSS | Tools & Resources | Web Development | Website Design
When you’re offering web design services, it’s not uncommon to have similar design specifications even from different clients. Although ultimately the content will be different and there may be special cases for each client, it is important to note that for most of your web design work, you’re actually repeating design elements. This is where CSS frameworks come in. CSS frameworks, much like an application or development code framework, serves as a basis for your design implementations that share fairly common and core elements. For example, the header, the sidebar, navigation lists, and footer. CSS frameworks gets you started rather easily so that you can quickly prototype your project, spend less time on design parts that are usually repeated, and focus on those special cases where the clients have a particular preference. There are many resources that you can find about CSS frameworks: Blueprint was one of the first css frameworks. Tripoli is another one. In fact a simple Google search for CSS frameworks will give you results on different frameworks and articles about them.
CSS framework really simplifies your work flow but it shouldn’t be seen as a crutch for the lack of a solid CSS knowledge. Frameworks must be understood fully and used properly or else, when used improperly, it will bite back when your design gets messed up and you’re left wondering why. Use CSS frameworks when your design specification fits with what the framework offers. If used right, CSS frameworks is a big help to get you started with your web design project.
published by Dan in Tools & Resources | Web Development | Website Design
One of the core principles of modern web designs is the separation of structure and design. Successful website design companies have perfected this process of designing and implementing client websites in a more efficient and distributed way; designers and content experts (usually on the client side) work hand in hand on the project with a clear separation of roles and expectations. Content management is the next step in this separation.
Content management software, more commonly known as CMS (Content management systems), take the central role of integrating content from a content expert and template design from a designer to create the final website. Content management systems allow web design companies to even more structure their work process by letting designers focus on what they do best: designing templates.
Within a Content management workflow, the designer creates his designs and tests it, then the editor or manager decides if it should get published or sent back for modification. And this happens on the content side also – making the job easier for those control and audit the quality of work that gets published.
The last implication of a content management system in the web design process is that it enforces specialization: designers get to design, content writers get to write, letting each participant in the process do what they do best with minimal or zero work overlap. The content writer is given a simple interface for adding contents, which does not interfere with the design process. This proved to be a difficult thing to achieve in a complex project without a content management system. Ultimately, content management makes the process of website design more efficient.
published by Dan in Tools & Resources | Usability | Web Development | Website Design | Website Standards
Despite all the signs I previously mentioned that pointed out that a web design company is a good one to work with, they’re all pretty meaningless if you cannot gauge the technical knowledge of the web design company. This is especially important if you do not know anything about web design since there are plenty of smooth talkers out there that might convince you of the superiority of the web design services, when in fact they’re just a start up company that lacks technical knowledge and experience. Now there isn’t anything wrong with start up web design firms after all everyone has to start somewhere. My point is simply that you should learn to check whether a web design firm really does know what it’s supposed to be doing.
To check the technical knowledge of a web design firm here are some simple tips you can follow:
- Go to their website and check it using the W3C Validation Service for code errors. All you need to check their website is to enter the website’s URL on the empty box labeled Address and click on Check. If there are lots of errors then their website isn’t W3C compliant. Steer clear from such web designers.
- Use several browsers (aside from Internet Explorer) to see how their website displays for each browser. While the website will more probably than not look different in some browsers you will want their website to still look presentable and be navigable.
- Do the same thing (steps 1 and 2) for their client’s websites. While some may do their best job with their own sites you would want to see the same effort going into the development and design of their client’s site.
published by Dan in Tools & Resources | Web Technology | Website Standards
Three words - Opera, Firefox and Safari.
Each of the three major alternative browsers have a lot to boast about. To show how distinguished each one is though we can simply say that Opera is the oldest of the three, having survived since 1996 even with the web-wide dominion of the Internet Explorer; Firefox is hailed as the most successful and is plays a major role in slowly eroding IE’s market share; and Safari, which came out when OSX was first released and rocked the Mac world with its elegance and ease-of-use, is now making inroads with Windows users.
Being a Linux user, I personally use and prefer Firefox. However, for those who want to try each one of these alternative browsers here’s a quick summary to help you compare each one.
Opera
Website: http://www.opera.com/
Features: Web, Email, RSS, Chat, Skinnable, Phishing Filter, Widgets, BitTorrent
Import Capability: Bookmarks from Internet Explorer, Firefox, Safari, Netscape, or generic HTML file; Mail from Outlook Express, Netscape, Thunderbird, Apple Mail, Eudora, or generic mbox file.
Platforms: Windows, Mac and Linux. Mobile versions available (Opera Mobile and Mini)
Cost: Free
Firefox
Website: http://www.mozilla.com/en-US/firefox/
Features: Web, RSS headlines, Email and full RSS via Thunderbird, Extensions for chat, Customization, Skinnable, Phishing Filter
Import Capability: All settings from Internet Explorer, Opera, Mozilla, Netscape, bookmarks from generic HTML file.
Platforms: Windows, Mac and Linux.
Cost: Free
Safari
Website: http://www.apple.com/safari/
Features: Web, RSS
Import Capability: Bookmarks from any browser.
Platforms: Windows and Mac
Cost: Free
Resource: Alternative Browser Alliance
published by Dan in Tools & Resources | Web Technology | Website Design
Today Apple launched on its developer website a section for iPhone web development. The first resource put up is a development guideline for the iPhone. The resource aims to give web developers and designers a guide to optimising web applications and contents for the iPhone safari browser. Now it makes complete sense why Apple released the Safari browser for Windows: Safari compatibility is one big requirement for web design that is optimised for the iPhone, and this test bed will be available for web developers and designers using either platform (windows and mac).
The document states the following main guidelines in optimising web content for the iPhone:
Understand User-Phone interaction
This section makes sure that the designer understands certain elements that of the iPhone experience in order to make correct design decisions. It discusses the use of the user’s finger as the main input device for the phone, the windowless concept of the iPhone Safari browser, designing for double tap and the events that the designer can handle.
Use Standards and Tried-and-True Design Practices
iPhone supports most html / xhtml and css standards, so designing standards-compliant pages is one sure way of of having an iPhone-optimised design.
Integrate with Phone, Mail and Maps
The iPhone is a convergence device. By using appropriate and properly formatted anchors in your web design, your page can take advantage of iPhone’s built-in integration among its different core phone and internet applications
Without going further into the details, below are the rest of the main guidelines stated in the document:
Optimise for Page Readability
Ensure a Great Audio and Video Experience
Know What Safari supports on iPhone
Connect With Web Developers
If you’re a web designer that wants to optimise your design for the iPhone, then this web development guideline is a very good starting point.
published by Dan in CSS | Tools & Resources | Web 2.0 | Web Technology
With all these iPhone news and media coverage in the past week, let’s take a little time to focus on how this will affect mobile web design, both in the short term and in the long term. iPhone brings to the table what could probably be one of the most advanced Internet browser for mobile devices: iPhone Safari. Although it lacks support for java and flash, Safari brings the desktop experience of browsing the Internet to a mobile device.
The basic premise of how iPhone safari works is that you can view a web site on its entirety without rearranging their content. This way the website as the designer has visualized it, is preserved. To move around the page, you can use Safari’s built-in zooming and panning actions using finger gestures and taps. What this means at the very least is that using Safari for iPhone, you wouldn’t have to worry that your design would be messed up when the the user sees it. Safari also has a strong support for AJAX technologies. This makes it a very able platform to deploy web applications. In fact as of now, this is the only way to deploy “applications” through iPhone. All these advanced features are all good news for the web designers, first because a mobile device browser that has strong standards support is now available for a mobile device, and second, in the long term perspective, safari will be raising the bar for mobile device browsers.
Even if apple only reaches (and not surpass) its goal of capturing 1% of the market share for smart phones, they would have then created a pressure for other mobile device software companies to come up with a competitive browser. And web designers will no longer be limited in creating user experiences that are as enjoyable in the mobile context as they are in the desktop.
published by Dan in Tools & Resources | Web Development | Web Technology
Aside from the Openwave Phone Simulator another good mobile design tool to use is Nokia’s Mobile Internet Toolkit. When using the toolkit from Nokia note that you need to download the whole kit, which is comprised of three components namely the Nokia Mobile Browser Simulator 4.0, Nokia WAP Gateway Simulator 4.0, and the latest version of the toolkit- Nokia Mobile Internet Toolkit 4.1. All of these can be downloaded directly from Nokia’s Forum at this link. Those who need to use the toolkit with JRE 1.5 should also download the patch that’s also available at the same page. Like Openwave, Nokia’s toolkit is free and only requires registration for you to be able to download everything.
The Mobile Internet Toolkit does not show all the access keys and requires you to run the WAP gateway simulator but still it is easy enough to use. The nice thing about Nokia’s Internet Toolkit is that it has a comprehensive set of editors for creation of web pages (WML, XHTML, CSS). MMS messages, and Push messages. Since the editors is “language-aware” it makes it easier to troubleshoot web pages that do not render properly in your phone.
The only problem is that the toolkit is usually more tolerant of XML errors so that there are still pages that wouldn’t be displayed properly in your phone even though the simulator says it’s ok. When this happens you can use the editor to see what the problem is but test it the old way by loading the page in your phone again and again until it is displayed properly. To lessen errors like this it is advised that you use both the Openwave Phone Simulator and Nokia’s Mobile Internet Toolkit.
0845 838 7448 
