Rakesh Shah // UI Designer
- Does the font have all the international characters you need?
- Does the font have all the weights and italics you need? (Large font families are expensive but allow more refined typographic choices)
- How important is it to be different? (Why not use system fonts?)
- What typefaces are your audience used to? Evidence suggests we read best in typefaces we are used to reading.
- Do you want a typeface with impact or for immersive reading?- Does the font display well large and small? Typefaces are often designed to work at particular sizes, the same font is unlikely to work best for large headlines and smallprint.- Does the interface have a particular rendering system - like Windows Cleartype? Would it make a difference if you get a font that is optimised for this?- How much do you value the right typeface? Most good fonts are expensive because they are good - the amount of work that goes into creating quality typefaces is amazing.
- Does the license allow the font to be used how you intend to use it?- Does the font have any ugly characters?
If you are embedding fonts, then any open-type font should work. You will need to test them with different display types, magnification methods and possible printed output etc.Extremely important is choosing fonts that will display across the platform, Mac or Windows, and for the applications they are meant to be used on.
Many "rules" for successful readability. One, easy to remember, is that your line length should not be longer than two to three times the alphabet length of the font. Very long lines impede readability, and are read more slowly by the user as the eye traverses the line from beginning to end and returns to the beginning of the next line
Research shows that the font (more correctly typeface) used for screen displays must be sans serif (e.g.Arial, Verdana). The definition of screen displays is nowhere near the definition of printed material which can be read more clearly with a serif typeface (e.g. Times New Roman). It's a matter of how many pixels (screen) or dpi (dots per inch on paper) are available to make straight edges for the letters.
Reference of common fonts on OS variants, look here:Windows PC from XP
http://www.microsoft.com/typography/fonts/product.aspx?PID=135
Apple iPad/iPhone/iPod
http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/Android
http://www.droidfonts.com/droidfonts/
HTML5 is the next standard for HTML 4.01 and XHTML 1.0. HTML5 was initiated in 2004 by the WHATWG (Web Hypertext Application Technology Working Group). Its objective is to reduce the need for proprietary rich internet application (RIA) technologies such as Adobe Flash, Adobe Flex, Microsoft Silverlight and Sun JavaFX.
HTML5 supports syntax of both HTML and XML. HTML syntax of HTML5 requires DOCTYPE declaration that indicates to browser to render the page in particular mode. DOCTYPE is optional for HTML5 XML syntax. HTML5 Syntax also supports MathML and SVG elements inside HTML document.
What are the new HTML tags introduced in HTML5?
New HTML tags for better structure are: section, article, aside, hgroup , header , footer, nav and figure
New web form input tags which will reduce java script validation coding: tel, search, url, email, datetime, date, month, week, time, datetime-local, number range and color tag
New rich HTML tags: video, audio, embed, mark, progress, meter, time, ruby, rtrp, canvas, command , details, summary, datalistl, keygen and output tag.
What are the new attributes introduced in HTML5?
The new attributes added in HTML5 and supported in all HTML tags are: contenteditable, contextmenu, data-*: user defined attribute, draggable, hidden, item, itemprop, spellcheck and subject.
What are the new events introduced in HTML5?
Web Form Events: onforminput, oninput and oninvalid
Mouse Event: ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart and ondrop
Media Events: Following events can be used in all media tags like Img, Audio, Video, Embed and Object: oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange and onwaiting
What are the elements dropped in HTML5?
Following are the elements dropped in HTML5: basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex and dir
What are the tags attributes dropped from HTML5?
* rev and charset attributes on link and a.
* shape and coords attributes on a.
* longdesc attribute on img and iframe.
* target attribute on link.
* nohref attribute on area.
* profile attribute on head.
* version attribute on html.
* name attribute on img (use id instead).
* scheme attribute on meta.
* archive, classid, codebase, codetype, declare and standby attributes on object.
* valuetype and type attributes on param.
* axis and abbr attributes on td and th.
* scope attribute on td.
* align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
* alink, link, text and vlink attributes on body.
* background attribute on body.
* bgcolor attribute on table, tr, td, th and body.
* border attribute on table and object.
* cellpadding and cellspacing attributes on table.
* char and charoff attributes on col, colgroup, tbody, td, tfoot, th, thead and tr.
* clear attribute on br.
* compact attribute on dl, menu, ol and ul.
* frame attribute on table.
* frameborder attribute on iframe.
* height attribute on td and th.
* hspace and vspace attributes on img and object.
* marginheight and marginwidth attributes on iframe.
* noshade attribute on hr.
* nowrap attribute on td and th.
* rules attribute on table.
* scrolling attribute on iframe.
* size attribute on hr.
* type attribute on li, ol and ul.
* valign attribute on col, colgroup, tbody, td, tfoot, th, thead and tr.
* width attribute on hr, table, td, th, col, colgroup and pre.
With all above attractions HTML5 looks very promising, it will definitely help web developers in providing rich features to their applications like Drag and Drop, Audio, Video, Document Editing, Offline Storage and History Management with the help of HTML with minimal efforts and without involving use of any scripting language. In addition to above features, HTML5 is coming up with lots of other rich form control which will reduce validation coding efforts to great extent.
Though right now it is not a W3C recommendation and browsers don’t fully support HTML5, but According to the W3C timetable, it is estimated that HTML5 will reach W3C recommendation by late 2010.
Now users of HTML have started developing web applications or websites in HTML5, and we found some of websites that list work developed in HTML5
At RWS, our team of developers has been following all updates on HTML5 release and soon we will come up with live applications developed using this platform.
Source URLs
I am inspired to write this article after reading various articles and blogs on internet. Please find some of the source URLs below:
http://en.wikipedia.org/wiki/HTML5
iMockups
http://www.endloop.ca/imockups/
iMockups, as the name implies, is a tool made specifically for mocking up web designs on the iPad. All the stencils you need to lay out interfaces are included with the application, and as shown in the screenshot, the app allows you to align elements in a pixel-perfect fashion despite the often clumsy nature of touch screen interfaces
OmniGraffle
http://www.omnigroup.com/products/omnigraffle-ipad/
OmniGraffle for the Mac is a popular choice for initial wireframes thanks to its strong library of included and third-party stencils, and the speed with which it allows you to work. The Omni Group have brought OmniGraffle to the iPad, and if you’re a designer who uses the desktop version the ability to work on your wireframes in either version of the software is useful.
SketchyPad
SketchyPad is another app that’s designed specifically with web layout and app interface wireframing in mind. You can link your mockups together for sites with multiple layouts (for instance, index and blog post views), and it comes with 56 stencils.
- Be memorable and up to date - Keeping an active blog is a great way to generate text heavy content that is sure to keep search engines coming back to index your site and thus drive traffic to it. Websites that are not updated on regular basis do not get indexed as often.
- Keep it Simple - Remember that visitors should always be able to easily look around your site. Don't trick them into staying too long. If visitors are frustrated and can't find the right information, they are more likely to leave quickly and are less likely to come back.
- Provide Contact Information - Make it simple for visitors to find ways they can reach out to you. Provide an email address, form for their questions or a place they can simply write in, such as guestbook. Of course you should always be cautious not to give out too personal information.
- Submit to Directories - Adding your site to Google and other search engines helps index it faster. Submitting this information will allow your site to be considered for future searches.
- Describe that File - Use keywords when naming your image files that are being used by your site. Doing so will help you gain visitors when people search using Google Images.
- Create Links - Linking to your site from other websites will help generate more traffic and improve your placement in search engines.
Usability and User Centric Design Resources Repository
http://www.usability.gov/ (Step-by-Step Usability Guide)http://www.useit.com/ Research findings from many usability studies from 1994-2009. Regular Alertbox column + Web design guidelines. Conferences and training events.
http://www.simpleusability.com/ - Usability at SimpleUsability
http://www.ambysoft.com/essays/userInterfacePrototyping.html - User Interface Prototyping Tips and Techniques
http://www.upassoc.org/usability_resources/ (Usability Resources)
Description: A resource collection of usability.
Description: A resource collection, with emphasis on methods, making the case for usability and business issues.
http://www.d.umn.edu/itss/support/Training/Online/webdesign/usability.html
http://www.agilemodeling.com/artifacts/essentialUI.htm - Essential (Low Fidelity) User Interface Prototypes
http://allipuram.com/blogs/ - blog
