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)>
					<cffile action="read" file="#path#" variable="content" charset="utf-8">
				<cfcatch type="all">Error reading file</cfcatch>
				<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> <!--- end if extension --->
	</cfif><!--- end if type file --->

<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

Amazing things you can do in HTML5

Written on 24 November 2011, 07:21pm

Tagged with: , , ,

  1. manipulate the browser history and build awesome asynchronous user interfaces like this one or highly responsive and intuitive interfaces like this one
  2. know the user location and serve him customized content (remember that ‘date single women near [your location]’ ads? :P)
  3. store data in the user browser: more than 4k of data, stored on the client, that persists beyond a page refresh and isn’t transmitted to the server. For example to store the number of the last page read in an online book or to save the settings of an online game between browser restarts
  4. use new input types (like the slider, color picker, date picker, etc) and unload the validation task on the browser
  5. allow the user to take your app offline, edit it, and synchronize it when back online. Example: GMail offline
  6. Play video for everybody
  7. Use the canvas element to draw amazing 3D text or sticky things (try this link on your mobile device, and shake it :))

Yes, you can use all of these features plus many, many more right now. Most of them will gracefully degrade if the browser is too old or simply does not support them.
Now read the list above once again thinking about the implications on the mobile browsing.