Modern web design – 2

Written on 10 December 2011, 12:12am

Tagged with: , ,

See part 1

3. Some usability issues

Thirty Usability Issues to Be Aware Of
Fitts’ Law: a model of human movement which predicts the time required to rapidly move to a target area. So always put your labels on top of the input fields
-according to the same principle, sometimes you might better be off putting the button in front of the search field [#].

-The foveal area (“a small wide space area where your eyes are aimed at and it is the only area where you can perceive the maximum level of detail”) is very important – because this is the area where you have to deliver the message.
Image credit: The 11 best art and design books of 2011

Minesweeping and Mystery-Meat Navigation (MMN) are both indicating problems in finding or identifying the links on a page. Here are two examples here and here. By looking at the article, would you tell that that it contains a link? I don’t think so. One uses italic text to implement link text, while the other one uses a bigger font size (2px more). At a better look (with Firebug), I notice that on the second example, in addition to the bigger font size, the link is also reddish (color: #840000 !important;). But I am colorblind, so here’s a great example of accessibility problem.
In conclusion, regarding link texts, don’t reinvent the wheel: make your link texts blue-ish or bold to stand up from regular text and (for the non-touch devices) always have the mouse cursor to ‘hand’ when mouse over a link.

4. Typography – 101

“What Font Should I Use?”: Five Principles for Choosing and Using Typefaces
From this article I learned:
-what’s a serif
-the main font groups (GHOTMS): geometric, humanist, old style, transitional, modern, slab serif
-how to combine two fonts on a page: pick them either very similar, or very different
-the most important rule is that there is no rule (There are only conventions, no ironclad rules about how to use type, just as there are no rules about how we should dress in the morning.)
-and, the most important rule never use Comic Sans 🙂 If you do, then you’re a Comic Sans Criminal
So, you need a typeface:

To be continued 🙂

Modern web design

Written on 8 December 2011, 11:50pm

Tagged with: , , ,

In the latest months I continued the dive into the Rich Internet Applications concept, but switching from Flex to HTML5, user interface design, typography – in a word, modern web design. I am reading 2 new e-books – in fact, a collection of articles written on Smashing Magazine during the latest years. Thanks to the retina display, I rediscovered the joy of reading interesting things before going to sleep 🙂
So, after some weeks, here is what is worth mentioning (read what I remember):

1. Responsive web design

Guidelines for responsive web design:
-you can use CSS media queries to target a specific browser, or even a specific design
-you can get the device orientation without reloading the page
-you can server low-res or high-res images for a mobile/normal device to save bandwidth
-there are some meta tags specific to Apple devices

<meta name="viewport" content="width=device-width; initial-scale=1.0">

-keep in mind that most users are right handed and they have fat fingers [#]

2. User psychology

10 Principles Of Effective Web Design
-don’t give the users too many options. They make hundreds of choices every day [#]
-moreover, don’t you dare to make them think 🙂 Be obvious and self-explanatory. If you have a multi-step form, make sure that the user always knows where he is and how long until he’s done.
-users want instant gratification
-keep it simple
-users want to be in control: don’t open the links in a new window. If you still do, at least warn the user (use a marker next to the link to suggest the new window). When you ask users to fill a form, make sure that your submit button doesn’t say ‘Submit’ – but an explanatory expression: Why your form buttons should never say Submit
users don’t read, they scan: See the f-shaped pattern of scanning the web content
-users are really good at ignoring the ads
-users hate unknowing (uncertainty). That’s the Cliffhanger-Effect (Zeigarnik-Effect). And the people in advertising know it.
-users do not like change. 90% of them never change the default settings. But they eventually get used to the change (see facebook redesign)
-sometimes, users don’t know what they want. You must show them what they want. At least that was Steve Jobs’ philosophy.


To be continued
🙂 Read part 2

How many lines of code do you have?

Written on 2 December 2011, 05:41pm

Tagged with:

Do you want to know how many lines of code you have in your application? Challenge accepted 🙂
Here’s a 10-minutes, 50-lines ColdFusion script that counts the number of lines in all the files from a given folder.

<cfsetting requesttimeout="300" showdebugoutput="no" />
<cfset initialDir = ExpandPath( '../' )>
<cfset files = 0> <!-- we will store the number of files that we traversed --->
<cfset lines = 0> <!--- this is what we need  --->
<cfset localRoot = "E:\your\input\folder" />
<cfset separator = '\'>
<cfset extensions = 'cfm,cfc,htm,html,css,js'> <!-- add here the list of extensions --->

<cfset tick = GetTickCount()> <!--- start the clock --->

<!--- get list of ALL files --->
<cfdirectory action="list" directory="#initialDir#" name="localQuery" recurse="true"/>

<cfoutput query="localQuery">
	<cfif type EQ 'File'>
		<cfset extension = LCase(listLast(name,".")) /> <!--- get the extension --->
		<cfset temp = ListFindNoCase(extensions, extension)> 
		<cfif temp IS NOT 0> <!--- if the file extension is one in our initial list --->
			<cfset path = directory & separator &  name>
			<cfset files = files + 1>
			<cfif FileExists(path)>
				<cftry>
					<cffile action="read" file="#path#" variable="content" charset="utf-8">
				<cfcatch type="all">Error reading file</cfcatch>
				</cftry>
				<cfset content = replace(content,Chr(10),Chr(13),"ALL")/> <!--- replace all LFs with CRs --->
				<cfset content = replace(content,Chr(13)&Chr(13),Chr(13),"ALL")/> <!--- replace all double CRs with single CRs --->
				
				<!--- 
				...and here is most important part: 
				we remove ALL the other characters that are NOT CR (\r)
				we end up with a string containing ONLY the CRs
				we simply count the length of this string and then add 1
				--->
				<cfset thisFileLines = Len( REReplace( content, "[^\r]+", "", "ALL" ) ) />
				<cfset thisFileLines = thisFileLines + 1> 

				<cfset lines = lines + thisFileLines>
				File #path# has <strong>#thisFileLines#</strong> lines<br /> 
			</cfif>
		</cfif> <!--- end if extension --->
	</cfif><!--- end if type file --->
</cfoutput>

<cfset tock = GetTickCount()> <!--- stop the clock --->
<cfset time = round((tock-tick)/1000)>

<cfoutput><hr />There are <strong>#lines#</strong> lines in #files# files. Search took #time# seconds.</cfoutput>

I got:

There are 101637 lines in 527 files. Search took 3 seconds.

See also