Archive

Archive for the ‘Web’ Category

Building enterprise web sites

August 26, 2013 Leave a comment

Responsive design is one of the latest and hottest topics in web design and development. Creating a responsive site, a site that offers a decent to good user experience, a site that follows accessibility guidelines it’s not easy, but it’s not that hard after all. It could take few iterations, but you’ll get there. But doing it at an enterprise level, that’s a whole different game.
First of all, what’s enterprise bringing to the table that hardens things? I’ll clarify just to know where we stand and to clearly define the requirements.

To start, enterprise usually means big. So we have volume. In terms of pages, visitors, infrastructure, human resources. Let’s see how all they’re influencing.

Lots of pages. This is probably one of the most important aspects. If you’ll develop each page individually, on its own, then you’ll waste money and time. And by the time you develop the last page, the first one becomes obsolete and needs to be redone. Of course, I assumed that you’ll want the same user experience (look and feel) on your entire website, which is the smart thing to do anyway and I won’t enter here into details why. So, coming back, there is clearly the need to reuse code in order to reduce development and maintainance effort and easily update all pages at once.

Lots of visitors. And this brings with it the need for performance. At every level: network and server infrastructure, code and process. Infrastructure is the foundation of your site and it’s also the main reason for stability (or instability) or, in other words, uptime (or downtime). If infrastructure is alright, then performance comes down to code. And on the web, this translates into server side execution time, number of requests, response size and client side execution time.

Big infrastructure. When talking about huge infrastructure, we will definitely see a heterogenous environment: different server-side technologies and different ages. So we will have outdated environment, outdated code, we will need to deploy to multiple environments simultaneously.

Lots of human resources. As many people will be involved in the development, there should be clear process and extensive documentation. Clear process will reduce the mistakes and inconsistency, while increasing development efficiency. Extensive documentation will decrease the learning curve and the need of direct support from developers. Also you should take into account that people with different backgrounds and skills will all work together. If we’re able to make development easier we will be able to reduce costs, either by reducing the need for high level skills or reducing the development time.

Now that we’ve seen what an enterprise site means and what are the basic requirements, I will just go through a list of good practices. The list of requirements could actually be bigger than the ones above, depending on your business needs. Also the following best practices are focusing only on client side development.

Architecture: Use a modular architecture

Modularize as much as possible. Besides a core framework, everything should be described and implemented as a component. Components will be assembled together to create pages, microsites or web applications. This will lead to many advantages. Different teams can implement different components. The user experience can be changed in its entirity or partially, but the most important aspect is that it can be done globally. Updating a component will update all the pages using it.
Beside the component developer, we identify the role component user, which is the person that will assemble a page, microsite or web application from the existing components.

Architecture: Use a governance process

Even though the component development process can be easily descentralized, ensuring consistency and avoiding development overlaps should be done centrally through some kind of governance process. Representatives from all teams should be involved. By consistency, I mean using the same technologies and architectural patterns for the same purpose. Overlaps can mean implementing the same components twice or components very similar in nature. E.g. if you implement an autosuggestion input component for cities, while you have already an autosuggestion generic component, then you’re overlapping. It’s better to find a way to integrate a city suggestion service into the generic component.
Before starting to implement a component, check to see if you cannot use an existing one, even though it means some degree of customization.

Architecture: Reuse

As I told one of the main reasons of a governance is to reuse as much as possible. Either we’re talking about your code or third party libraries. Do not reinvent the wheel, it will always be round and, unfortunately, maybe not from the first tries.

Architecture: Adopt the new

As a rule of thumb, always prefer to use the new version, either we’re talking about a standard or a JavaScript library. This way your site will take better the test of time. Of course, the problem is the browser support (read IE support), but there are usually workarounds.
Use the new HTML tags instead of the deprecated ones. STRONG is preferable to B, as it is related to semantic instead of layout.
Use CSS transitions instead of JavaScript animations. CSS transitions gives better performance (as they could make use of GPU), but JavaScript animations could be used as a fallback, when browser don’t offer support.

Architecture: Create extensive documentation

Document the development process, patterns, choice of technologies. Heavily comment your code. Document all the components and create some kind of easy browsable index. Consistency should be a concern when it comes to documentation too, by using the same style and tools throughout all teams.
Extensive documentation will reduce the learning curve, especially for new resources. It will also reduce the developers involvement in the deployment and support for component users.

Architecture: Encapsulate JavaScript/CSS into easy to use components

I mentioned earlier about different roles in your organization. Could be that the users of your components don’t have a high degree of knowledge in JavaScript and/or CSS (Please keep in mind that JavaScript is the most misunderstood language). E.g. YahooUI is great library, but it requires JavaScript knowledge. Same goes for jQuery components. Instead of this approach, or actually over this approach, you should use a very simple principle: convention over code. Just to take out the JavaScript part out of the equation you could use CSS classes to annotate, by convention, your component. E.g. instead of $("TABLE.whatever").tablesorter() you can simply use .sorted CSS class and include $("TABLE.sorted").tablesorter() in your main JavaScript as an onload event. Of course, this will impact the initial load performance, but there are always trade-offs :).

Performance and maintanability: Reduce the number of global resources

Reducing the number of global resources will reduce the number of requests and improve performance. But performance is not the only concern, maintainability is there too. It’s easier to deploy one resource and it’s easier to update one reference. By resources I mean stylesheets, JavaScript files, images, fonts etc.

The number of stylesheets and JavaScript files can be easily reduced to one. In case of CSS, frameworks like Less or Sass will be of great help and in case of JavaScript, frameworks like AMD. These frameworks will help you modularize and organize your development environment, while you will still be able to deploy only one resource into production. It makes it easy to integrate even third party resources.

When it comes to images, icons more specifically, icon fonts is the key. These are supported on many browsers, reduces all icon requests to one, they’re scalable in size and color. The only disadvantage is that you cannot have multicolor icons. You can combine icons to obtain this, but this could become cumbersome.

Naming: Prefer short, but meaningful names

As for the naming try to use generic, but meaningful names for everything, from resources to CSS classes. E.g. for resources prefer using “global.css” instead of “global_v3_blue.css” as you should stick to them for a long time. This way moving to a new version you will still have a meaningful name. Also make use of server side processing if you want to personalize the experience for different users, geographies, browsers etc. E.g. if you want to have two different CSS, one for mobile devices and one for desktop browsers, then refer to both as “global.css”, but do a server side redirect based on device detection.
As for the CSS classes, I already wrote about this subject.

Naming: Use the semantic of HTML tags

Use the semantic of HTML tags instead of defining new CSS classes, where appropriate. It is preferable to use H1 instead of .title and H2/3 instead of .sectionTitle.

Naming: Use as few CSS classes as possible

This falls into the same reuse category. It will be harder to remember which class is for what if you have hundreds of them and when to use one over the other. Prefer using contextual references in CSS selectors or combining existing classes rather than creating new classes. E.g. do not create a new class .right-menu, but use two classes .menu.right. Of course a better naming will be .menu.contextual.
So reuse comes even to CSS class names.

These are simple rules, but following it’s not always easy. But they will help you get an easy maintainable website so you can easily react to industry changes.

Categories: Web

Innovation Summit 2013 in Bucharest

May 30, 2013 1 comment

Innovation Summit just happened in Bucharest this week. In a few words: some interesting presentations, given in a more or less attractive and engaging way. Most of the things were not new, but it’s nice to hear them again as a confirmation and most importantly presented in a different way. Also, a lot of study cases were presented which always brings confirmation to the speaker’s ideas and even yours if similar.

Petru Jucovschi, Technical Lead for Windows and Windows Phone – The next level of Digital Innovation This was a presentation about innovation in user interfaces with a strong focus on the so called Metro interface for Windows 8. You can read more about it here or here. Embedding HTML5/CSS3/JS into the OS and as a application platform was presented as an innovative approach. It isn’t. Palm had webOS years ago. Indeed, HP killed it, but this was on the market years ago.

Meldrum Duncan, Innovation Consultant, Founder ?What IF! US – Oh, the mistakes I’ve made: 13 years of running innovation projects. Clearly an engaging speaker and an attractive presentation. He focused on 10 simple principles of driving innovation. Among the principles were also the ones that engage collaboration outside the office, like “Drink beer!”. Yes, yes, to engage with other colleagues, stakeholders, clients in a friendlier environment, which will open new thinking.

Windahl Finnigan, Associate Partner, UX Innovation & Strategy Director for Smarter Commerce at IBM – Full Tilt Boogie of Disruption was a too corporate speech for my taste. Even though with some good and interesting examples, the presentation was less engaging and more like a flat line.

Matt Rosa, Innovations Director at BAT – An Iterative Consumer-Centric Approach to Product Innovation discussed about tobacco industry innovation with a focus, of course, on BAT. Innovation on this field was close to zero up until 1999, but it started to cover multiple topics since then. From a process standpoint he brought the idea of going outside the organization to external agencies for a fresh and different view. Personally, I’m just glad, that with all the innovation, the base of tobacco customers is shrinking each year.

Martin Hablesreiter, designer / artist / filmmaker at honey and bunny studio – Food Design is more important than politics. The innovative capacity of food design. I liked the presentation style, the content, the slides, but for me, food is just food and what it counts is its nutritional and health value. Martin discussed in an ironic way the many influences on food design: functionality, culture, transportation, economic feasibility etc. But imagine the visual impact of the photos on the slides right before lunch :).

Susan Choi, Director of Innovation at Mandalah – How the heart and pulse of culture can lead companies to culturally relevant and successful innovation? was an advocate for local research before jumping to conclusion or using any well known stereotypes. As a case study she used a campaign launched in Middle East, where, surprisingly, they acknowledge an entire youth movement towards the digital space and into innovative solutions.

Daniel Jurow from R/GA started his presentation with a bit of his company history and how they expanded.
I clearly remember one of the slides: “93% of executives say their long term success depends on their ability to innovate, but only 18% said that heir innovation strategy works.” The speaker said that is happening because they are not taking bold steps, but smaller safe ones. I would say that this is the result when you base your innovation and related decisions on spreadsheets.

Instead of the old formula for growth either through horizontal (line extension backed up by a serious mass-media campaign) or vertical integration, Daniel debated the concept of functional integration. Functional integration is the new idea to extract value of your existing ecosystem. In plain English, reach your existing customers and sell them additional products and services – maybe some they don’t even need, but they’re so cool :). Examples are clear: Apple, Google and at the summit I heard about BMW and Nike. Yes, Nike with Nike+ which allowed them to gain a huge market share. As a runner, I like minimalist shoes and trail running, and Nike don’t have options there, so I don’t use them. But it seems others really like to share their exercises on Facebook, so …

Of course, the only integration platform for end-user customers is the web.

In the end, the speaker was recommending to not restrict innovation to a single group, but encourage a culture of innovation in the company, an idea reiterated by almost all the speakers after.

Erez Tsalik
If I said in the beginning that most of the things presented. Not the case here, at least not by approach. Erez contradicted almost everything the other speakers said and he took a clear analytical approach to the process of thinking innovation. But he also reiterated that innovation needs commitment throughout the company, starting with the executive levels. Managers needs to know how innovation works and how to manage innovative people, because usually managers do not know to distinguish between a good innovative idea and a bad one. That’s the reason they should not validate innovative projects and ideas.

He discussed some of the classical approaches toward the process of innovation (if there is one). Brainstorming seems not to get the best results, because people being separated generate more ideas than together. Why? They don’t waste time listening to others. But I would think that brainstorming is good as a next step to validate the ideas and select the feasible one.

Think out-of-the-box! Or better NOT! Out-of-the-box means no rules, but with businesses constraints exists. Constraints enhance innovation, it is said that necessity is the mother of all inventions.

Another interesting topic was fixedness – symmetrical, structural, functional etc. Which is normally good. But if you want innovation you have to make an effort and break it.

Altogether, an interesting and intriguing presentation with lots of good examples. The kind of presentation that makes you think: “But what if I try?”

Alexandru Cernatescu, Co-Founder, CEO & Head of Strategy at Infinit Solutions Agency – Romanian Reality Innovation Update – What stands behind a Romanian story of success based on innovation?. Unlike the other speakers, Alex didn’t focused on innovation process, study cases or ideas. He presented, in a very dynamic way, how innovation was the basis of his entrepreneurship and how with will and abnegation can overcome obstacles and write yourself a success story.

As participants, we also had the opportunity to play with innovative products: transparent displays, latest laptops that double as a tablet, Windows phones. And we even took part in molecular food demo with Bernd Kirsch, Executive Chef of Radisson Blu, as an innovation in gastronomy. The opportunity to sample the end results was clearly a delight for all of us.

I would like to finish with a few recommendations that I liked and were shared by most of the speakers. Innovation is not limited to a small group in the company, but it should be encouraged as part of the internal culture. Managers (especially executives) should not be pose as innovation judges, as this is most probably their main focus and strength. The innovation process, if any, is ever changing and it should be part of the innovation itself.

Categories: Web

Icon fonts

April 24, 2013 1 comment

Icon fonts are a great way to enhance the performance of your website. I decided to put together a list of resources to help you understand, create and integrate icon font into your website.

Why use icon fonts?

First of all, what’s the big fuss about icon fonts? The basic idea is that instead of having tens of small images (and of course, tens of small HTTP requests) you embed all those images as characters into a font. Having only one request of a bigger size it is highly recommended instead of having multiple smaller requests, as the overhead of a HTTP request is huge in bandwidth and time.

You can also use sprites, but this approach has several benefits. First of all, it is easier and your code will be cleaner. When using sprites, the images will have only one resolution and one color. With icon fonts, you can set different colors and sizes for your icons without having to download another set – you actually set the font color and size. Here’s a demo.

There are some downsides, but I would say none of them major. Editing an icon font could be a little bit harder than editing just a simple image. Also multicolor icons are not suitable to be embedded in icon fonts. But the trend now is to have cleaner pages and icons, so multicolor icons could not be on your wishlist anyway.

As with any new feature, the biggest question is browser support. Good news here: all major browsers are on board.

If this convinced you, everything comes down to two things: creation and integration.

Creation of icon fonts

Editing

Basic idea is simple: vectorize your image into SVG images and embed them all into one SVG font. For this you can use InkScape and, as a beginner, a comprehensive tutorial and a video tutorial can be of great help.

Tip: It is recommended to fill in the name for each glyph (glyph-name XML attribute) in the SVG font. This way anyone with a text editor can easily identify the glyphs in the SVG font and change the unicode mapping for example.

Conversion

The end result will be an SVG font, but as you saw browsers support different formats. Now it comes to converting the SVG font into other formats.
For TTF I used to use FontSquirrel, but there are other better choices. http://fontface.codeandmore.com/ was a good and very fast online converter, but unfortunately you have to pay for it, though it’s only $8 per year.

What I currently use is http://onlinefontconverter.com/ to convert from SVG to TTF and WOFF. I don’t know why but usually EOT conversion got stuck so I use http://www.font2web.com/ for this final step. You can also use http://www.freefontconverter.com/ but it doesn’t convert to EOT, so again you will need font2web.

Integration of icon fonts

Font definition

To define a font you should use @font-face in your CSS and that’s pretty much it.
A basic common code sample will look like this:

@font-face {
    font-family: "MyFont";
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6 fix */
        url('myfont.woff') format('woff'),
        url('myfont.ttf') format('truetype'),
        url('myfont.svgz#MyFont') format('svg'),
        url('myfont.svg#MyFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MyFont";
    src: url('myfont_bi.eot');
    src: url('myfont_bi.eot?#iefix') format('embedded-opentype'), /* IE6 fix */
        url('myfont_bi.woff') format('woff'),
        url('myfont_bi.ttf') format('truetype'),
        url('myfont_bi.svgz#MyFontBoldItalic') format('svg'),
        url('myfont_bi.svg#MyFontBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

Or if you’re using SCSS and Compass, which I highly recommend, then the above sample will become:

@import "compass/css3";
 
@include font-face('MyFont', font-files('myfont.eot', 'myfont.woff', 'myfont.ttf', 'myfont.svgz', 'myfont.svg'));
@include font-face('MyFont', font-files('myfont_bi.eot', 'myfont_bi.woff', 'myfont_bi.ttf', 'myfont_bi.svgz', 'myfont_bi.svg'), bold, italic);

Icon usage

Now that you declared your font you can use the icons. I will show below a few examples.

<span class='icon star' aria-hidden="true"></span>

<span data-icon='S' aria-hidden="true"></span>

… and the CSS …

.icon:after {
    font-family: "MyFont", sans-serif;	
    font-size: 12px;
    line-height: 12px;
    speak: none;
}
.icon.star:after {
    content: "S";
}
.icon.star-empty:after {
    content: "s";
}

[data-icon]:after {
    font-family: "MyFont", sans-serif;	
    font-size: 12px;
    line-height: 12px;
    content: attr(data-icon);
    speak: none;
}

For the first icon I split the declaration in two, so that you can easily add other icons as well. Of course, IE7 does not have support for :after, but, oh well, if you really need it, I think you can live without icons. Second form it’s more generic and it has the same browser support as the first one.

Notice the aria-hidden attribute and speak CSS property added here for accessibility purposes. The preferred way will be the speak property, but unfortunately there is almost no support for CSS2 Aural Style Sheets or CSS3 Speech.

In the end, a few free icon fonts:

Categories: Web

Responsive design. One web. Semantic CSS.

September 18, 2012 1 comment

A new buzzword hit the streets of web development lately: responsive design. But what is it? If I wouldn’t trust Wikipedia(not saying that I don’t) and I would have to give my own definition, I would say that it is the ability of a web site to adapt to the user’s browsing device and offer the optimal experience, look and feel.
As usual, from theory to practice, there is a long and hard way. When talking about implementation, responsive design is an umbrella for a series of web development techniques and patterns. I will try to describe some of them in the next lines.
First of all responsive design starts with user device browser detection. I already wrote an article on the matter and I will come to this subjects on future posts as well. Now I will just enumerate the main techniques without focusing on a specific framework.

  • Device information repository. It is usually done on server side using the HTTP User-Agent header and mapping it against a database of devices. This database contains information about the device hardware and software like: name, manufacturer, input device (trackball, keyboard, touch screen), OS, browser, support for video, audio and image formats and many more. The most well known device repositories are OpenDDR (free), WURFL(free for non-commercial use) and DeviceAtlas (commercial). Apache DeviceMap is a new one, but it’s not on a stable release yet.
  • Pattern recognition. If you need just basic device detection, like to distinct only between mobile and desktop, you can use the browser name and map it against a list of given patterns (e.g. contains iPhone or Android). Needless to say that this method has a high failure rate and it doesn’t give you detailed information about the device and its capabilities. This technique can be applied on the server side using HTTP User-Agent header or on the client side using the window.navigator JavaScript object and its properties (e.g. appName)
  • Features recognition. This technique is applied on client side in JavaScript. This is only a part of a broader technique, progressive enhancements, which I will detailed it later on.

As soon as you’ve identified the user device, your website has several options on how to react. You can create different websites for mobile and desktop (and even one for tablets), you can create a desktop website and transcode it for mobiles/tablets or you can create only one, smart enough to adapt to all devices (existing and upcoming). And this is revealing the concept of One web. But what this concept implies, a concept for each W3C is lobbying as one of the most important guideline in web development? It is practically the same thing as responsive design, or I would say the best method to implement it, to have one website that can offer the best user experience no matter on the browser that it is accessing it.

Is it easy to implement? I would say so, but you need to have a few important things in mind. Let’s start with the most important one: content-layout separation. As we said you want to have only one website, which actually means one content. But the layout, how it is rendered and how it interacts with the user, is different for each device. If you’re familiar with the MVC concept, this is similar, but applied to your markup. The advantages are obvious: you will be able to maintain one content, your website can react differently if needed and you can clearly delimit the tasks between content editors and web developers.

As soon as we made the separation we can leave the content in the content editors’ hands and we can focus on the web development part. But do we really need to develop one layout for desktops and one for mobiles? And another one for tablets? Or even one for each type of mobile – featured, smartphone etc? Not quite. Again if you’re structuring and modularizing your website, you can get away much easier.

To easily plug in different layouts you definitely must use CSS. CSS Zen Garden is a clear example that proves its power, by rendering the same content in hundreds of different ways. But CSS alone is only a tool, you will need a technique that will enable you to unleash this power. And now we’re coming to the broader discussion of semantic CSS. Using it will gave you this level of pluggability and the good news is that to apply it you need just a mindset switch. Even though you’re developing a layout using CSS, think only at its semantics. This way it will become easy to link a content with the layout. Let’s say that you want to define the CSS class for the page title, which is displayed in blue, bold and with a double font. You will call that class title and not blue_bold_double_text. Sometime, this will not be as obvious as in this example, but always think first of the semantics and ask yourself the question: Why and when I would use this CSS class? Forget about specifics.
There are a few other related tips that you might find useful:

  • Give your CSS classes short, but meaningful names. Even though shorter is desirable, do not trade meaning over size. Do not abbreviate, further down the road you or some other developer may forget the meaning.
  • Use the semantic of HTML tags instead of defining new CSS classes, where appropriate. It is preferable to use H1 instead of .title and H2/3 instead of .sectionTitle.
  • Use the new HTML tags instead of the deprecated ones. STRONG is preferable to B, as it is related to semantic instead of layout.
  • Use as few CSS classes as possible. It will be harder to remember which class is for what if you have hundreds of them and when to use one over the other. Prefer using contextual references in CSS selectors or combining existing classes rather than creating new classes.

You structured your content and layout and now you have to develop it. There is an old concept, liquid layout, but I think it still can suit most needs. The idea is to develop a layout that can easily fit in different screen resolutions. This will translate mostly into using relative positioning and relative sizes instead of absolute ones.

We covered how a website should look like, but what about how it should feel, how it should interact with the user? I mentioned earlier about progressive enhancements and I already describe it in a previous post, so I will just restate it. The term sounds very complicated and futuristic, but it is not rocket science. It is not a framework or a new technology to learn and use. It is only a change of mindset. Mainly this applies to JavaScript and you have to keep in mind that some features that you’re going to use in your scripts could not be implemented on some devices/browsers.

To better understand the concept let’s take an example. Let’s say that you’re going to use geolocation on your website.

		navigator.geolocation.getCurrentPosition(locationHandler);
	

The above could be one option. But what happens if the user browser does not support geolocation. Your website will break and offer a poor user experience.
By simply adding an if you’re out of the trouble.

		if (navigator.geolocation)
			navigator.geolocation.getCurrentPosition(locationHandler);
	

You can even have some fail-over mechanism implemented on else branch. As I said nothing complicated, only a mindset change. Develop for the highest end browsers/devices, but think of all.

The same can be applied to CSS. If you want to implement CSS gradients you will have to do something like

		background-color: #00ff00;
		background-image: url(bg.jpg);
		background-image: url(bg.jpg), -moz-linear-gradient(90deg, #00ff00, #0000ff);
		background-image: url(bg.jpg), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00ff00), to(#0000ff));
	

This way you will be able to have a green to blue CSS gradient on both Mozilla and WebKit and just a plain green background on older browsers. Also if you have an image that one will be there as well. The browsers without CSS gradient support will just ignore the last two lines.

Another example will be pagination. If you want to implement a More like functionality (like the one from Facebook news feed) you don’t have to forget about non-Ajax devices and have a next/previous fallback.

Some other examples are JavaScript frameworks that implement features not yet supported on some browsers (read IE here), like Explorer Canvas or CSSPie.

Using progressive enhancements you can offer a better experience for advanced user devices, but without losing the low end ones. Remember that the 80/20 rule applies here as well. 20% of the users generates 80% of the traffic. You don’t want to lose the big amount of traffic, but you also don’t want to lose a big amount of users.

W3C is coming with new techniques to help you in your quest, like media queries. Using an easy syntax you can easily customize your CSS for different device characteristics, like resolution. And the good part is that media queries are becoming widely adopted, even though not fully. Another W3C standard worth to keep in mind for the future, but still draft, is CSS variables.

All these techniques apply mostly to your HTML content, but you should not forget about images. Image optimization is to be done mostly on the server side, after detecting device capabilities.

To be continued …

A short slide presentation on the topic you can find here.

Categories: Web

Just CSS? No way.

September 11, 2012 2 comments

CSS is really a great addition to the present web, but if you’re a developer you would feel like something’s missing. CSS is really helping when it comes to content and layout separation, but on its own, it is not a really powerful language. As a developer you will really feel the need of, at least, things like variables, to make your code easier to maintain.

Built on top of CSS there are two languages, Less and Sass. The basic idea is simple – a language very similar to CSS that features a simple syntax for enabling variables, nested rules, rule inheritance and many other nice features. And using some kind of compiler, you are able to generate a CSS file based on one or multiple source files.

Less

I initially used Less. Huge improvement over CSS. At least you had variables and you could organize your elements better. You want to modify a color, a font size or a padding, you just modify one variable in one place and you have all your buttons, links, lists, in one word all your components updated to the new style. The days where you just scan through the code to find that color are gone.

I don’t know about you, but in CSS I find it very hard to organize my rules. But now I have nested rules and even rule inheritance. And if we came to the code structure part, CSS imports are helping a lot. But there’s a problem with these imports: different CSS files – different requests. And you don’t want 4-5 requests in your page just for the styles. Usually you want just one. And that’s very easy now, as imports are made compile time and all your styles are combined into one.

SASS/SCSS

And now that you tasted all these things, you would want the next level. What about loops and conditional blocks (if statement)? And then I switched to SASS, which has all these features and whatever Less is bringing to the table. Actually I switched to SCSS. Because I personally don’t like languages like Haml – too error prone. And SASS is such a language. But not SCSS, with a very alike CSS syntax.

Some tips – How to organize your content

I find it very useful to have the following files

reset.less/.scss
a general reset file used to bring all browsers to a common ground
elements.less/.scss
a file containing all the global variable definitions, like button colors, heading sizes etc.
shared.less/.scss
a file that will contain CSS rules that will span across all your web site sections; then you can have a file for each section that will import this one

Conclusions

Of course, Sass/Scss has its limitations as well, but it’s a huge step from CSS. Amongst its main limitations I would remember: no recursion on mixins (which are similar to procedures/functions), limited set of functions for working with lists, there’s no way to define custom functions outside Ruby.

In this light, I can say that CSS on its own is obsolete, unless it will be extended with features like the ones above. In a future article I will come back and present how to integrate Sass with Maven and Eclipse.

Categories: Web

Font detection

November 23, 2011 1 comment

Yesterday I participated to NetCamp 2011. In the end, there was a special contest, where 5 web projects out of 20, made it to the final. The prize was 1000 euro.

The winner was WhatFontIs.com, which, I must admit, was also my personal favorite. A nice web application, easy to use and clearly explained by its author. The author was also very enough and donated the prize money to an humanitarian cause.
The idea is very simple. You see an image with some text on it and you want to know what font is using. You upload the image or specify the URL and the application analyze the image, splits into letters and then gives you a list of closest matching fonts. Further on you can download (if it’s free) or buy the font. It aggregates different font sources and searches through almost 250000 fonts. Extensions are available for Firefox and Chrome.
This is especially useful for designers, but not exclusively. I don’t see myself using this on a daily basis, but only because of my job nature. And I can see the value and usefulness in it.

There are a few things that I would like to see in such an application. First it would be nice that the application will also recognize the letters and to offer at least some suggestions. And to also have an option to contact a font author that will create the font for you if you haven’t found it.

Altogether, this web application is easy to use and valuable. And 100% Romanian. Nice!

Categories: Web

“Sad little piece of software”

June 5, 2011 2 comments

What do you think this code will do?

<html>
<body>
<a name="one">an anchor</a> <hr />
<div id="one">a div</div> <hr />
</body>

<script>
document.writeln("Element with id 'one' is '" + document.getElementById("one").innerHTML + "'");
</script>

</html>

You would think that it will print that element with id one is a div. Yep, and Firefox, Chrome and Safari will agree with you. But not IE :). For IE getElementById is synonym with getElementByName. No matter the version – 7, 8 or the mighty IE 9. I don’t know if you would guess, but if you put the div first, it has the expected behavior.
So, getElementById, in IE, returns the first element that has the id or name attribute, equal to the given value. Good to know. But sad.

Categories: Web Tags:

Tip: CSS gradients

May 17, 2011 Leave a comment

Gradients in CSS are actually a special image. Because multiple background images are possible, you can specify both an image and a gradient. Below is the entire CSS code for having gradients in all major browsers. For your convenience, I encapsulated it into a Less function.

.gradient(@fromColor, @toColor, @additionalImage) {
	background-color: @fromColor;
	background-image: @additionalImage;
	background-image: @additionalImage, -moz-linear-gradient(90deg, @fromColor, @toColor);
	background-image: @additionalImage, -webkit-gradient(linear, 0% 0%, 0% 100%, from(@fromColor), to(@toColor));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@fromColor', endColorstr='@toColor');
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@fromColor', endColorstr='@toColor');
}

Here I used top down gradient, but you can easily modify it. If the browser does not support CSS gradients, it will gracefully fallback to a plain color.

Categories: Web

Mobile web guidelines

May 16, 2011 2 comments

Mobile web principles

Some time ago I wrote an article about mobile web and what choices you have to create a mobile web presence for your company. Few days ago I gave a presentation to the students in Polytechnics about the same subject. The presentation was focused more on healthy mobile web development principles, which will also be the subject of the present article.
But first of all, why you must care about mobile web?3.7 billion unique mobile phone users, 1.2 billion mobile Internet users vs 1.4 billion classic (desktop, laptop, netbook) users in 2010, and most probably surpassing in 2011, 600 million phones sold yearly worldwide. This industry all together surpasses worldwide in revenues any other IT or entertainment industry.
Not convinced yet? Then maybe you should skip the rest of the article.
OK, so you want to dip your fingers in mobile web. Good. Let’s start first understand it.

Definitions

What is a mobile phone? If we use Wikipedia as reference a mobile phone is a device that enables you to make mobile telephone calls (… move around freely rather than stay fixed in one location …) across a wide geographic area.. Nothing more. No web, no applications. Just voice calls.

Then there are featured phones, mobile phones augmented by the manufacturer with different applications like a web browser, games and even productivity suites.

And in the late years, the smartphone. But what is a smartphone? To tell you frankly it is pretty hard to define it. More computing power or more memory? About CPU frequency or RAM size would you consider a phone to be “smart”? Complex operating system? How would you define an OS to be complex? But there is a more widely accepted definition and I will adhere to it as being the most appropriate one: a smartphone is a mobile phone on which you can (download and) install applications. And if you think a little bit, it makes sense. Nobody is born smart. But you learn and you become smart. Same way a phone, offers a new feature, by installing an application. It “learns” a new software, it becomes “smart”.
And now you have a website. Do you need to build another one for mobile? Yes and no.

Differences

Why yes? Simply because mobiles have different characteristics. We have different hardware capabilities: smaller screen sizes, resolutions, various input devices (touchscreen, trackball, smaller or no keyboard), lower capacity battery. If some of these are somehow downsides, we also have advantages: camera, GPS, newer upcoming technologies like NFC(Near Field Communication).

We also have software differences: different OSes, browsers and in many more flavors than on desktop, different tools to leverage hardware capabilities: QR codes reader, mapping applications.

When it comes to connectivity, a mobile has a smaller bandwidth and most probably higher costs per bit. But on the other hand, the user is 24/7 online (yes, it is the only device that connects us even in our sleep). Moreover, on the mobile you have a wide range of communication channels: SMS, email, web, social networks, voice, LBS, SEM. You can even expect that the classic channels (print ads, radio, TV) are closer to the user.

We don’t have to miss one important aspect: the mobile is the only device that has an integrated payment method. Either it is by SMS, integrated credit card (mostly on Asia) or NFC.

These are the technical terms, but the mobile is the most personal device and we need to take a look at its social impact. A phone is not simply a device, in many cases is the door to the user social network or it is a mobile entertainment center. In some cases, it is a fashion statement. The most expensive phone is an 8 million USD iPhone 4 and there is a 100 USD iPhone application that does nothing. Compare this with the most expensive laptop.

Another important aspect to consider when developing a mobile website or application is the user behavior. You will watch to a presentation on mobile, but most probably you will create it on desktop. You will use a software application on mobile, but you will develop it on desktop. As a rule of thumb you can compare a 30 minutes task on desktop with a 30 seconds task on mobile. That’s why you will hear about “task oriented websites”. The concept means that you will include in your site only relevant tasks to its interest and environment(physical or virtual). It would not make any sense to create a mobile website to download drivers. A mobile website for a versioning control system will offer little value, but if you reduce it to a tracking/statistics section can make its way to the user pocket.

Something that is easily ignored is the technological awareness. A phone is upgraded every 18 months, opposed to a laptop/desktop that is upgraded every 42 months. As a consequence, the technological advancement curve is much more steep and you have to keep in mind that not all the users are keeping the pace. So it could be that they are not fully aware of their phone potential.

Developing mobile web

Taking into account all these differences should I care about mobile? Definitely. Should I develop another site? No.
Following just a few principles, you will have a clean website, that can easily adapt for desktop and mobile. Without the hassle of maintaining several websites.

Content-layout separation
This principle has made its way into many software development design patterns and architectures: MVC, three tier architecture, etc. Extended to web development, this will allow faster development, cost effective maintenance, easy re-branding, improved collaboration between web developers, designers and content editors.
One web
Content layout separation allows us to have only one website and to optimize the presentation of the same content for desktop, netbooks, featured phones, smartphones, printing etc. W3C is militating for this as one of the primary objectives in web development.
Semantic CSS
Considering that you used the content layout separation, usually the link between is done with CSS classes. Semantic CSS is about how to name these classes. You should choose names relevant for the content and not the layout. So a name like bigfont will most probably become irrelevant when you will decide to change the layout or optimize for different devices; but sectionTitle will not lose its meaning over time. I will come back with a detailed article on this matter.
Progressive enhancements
This term sounds very complicated and futuristic, but it is not rocket science. It is not a framework or a new technology to learn and use. It is only a change of mindset. Mainly this applies to JavaScript and you have to keep in mind that some features that you’re going to use in your scripts could not be implemented on some devices/browsers.

To better understand the concept let’s take an example. Let’s say that you’re going to use geolocation on your website.

		navigator.geolocation.getCurrentPosition(locationHandler);
	

The above could be one option. But what happens if the user browser does not support geolocation. Your website will break and offer a poor user experience.
By simply adding an if you’re out of the trouble.

		if (navigator.geolocation)
			navigator.geolocation.getCurrentPosition(locationHandler);
	

You can even have some fail-over mechanism implemented on else branch. As I said nothing complicated, only a mindset change. Develop for the highest end browsers/devices, but think of all.

The same can be applied to CSS. If you want to implement CSS gradients you will have to do something like

		background-color: #00ff00;
		background-image: url(bg.jpg);
		background-image: url(bg.jpg), -moz-linear-gradient(90deg, #00ff00, #0000ff);
		background-image: url(bg.jpg), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00ff00), to(#0000ff));
	

This way you will be able to have a green to blue CSS gradient on both Mozilla and WebKit and just a plain green background on older browsers. Also if you have an image that one will be there as well. The browsers without CSS gradient support will just ignore the last two lines.

Liquid layout
With so many screen sizes and resolution, two possible orientations, it is nearly impossible to optimize your website for a given size. That’s why you will have to use liquid layout and your website will honor every resolution and expand through the entire viewing area. This way you will also take advantage of the full display, which is also critical on mobile.
Detection and adaptation
So far you developed your website, thinking to all the mobile users. But a user who paid over $500 on his phone wants to take advantage of it. So you will have to detect high end devices and offer extended features for them. This can be done on the client side through progressive enhancements or server side. About the latter subject I wrote another article in the past. And remember that the 80/20 rule applies here as well. 20% of the users generates 80% of the traffic. You don’t want to lose the big amount of traffic, but you also don’t want to lose a big amount of users.
Performance
This is a very sensitive topic on both desktop and mobile. On mobiles you can refer to page performance in terms of response time, cost, number of dependent resource.
Mobile guidelines
There are also very specific mobile guidelines, like no flash, order of preferred format images is JPEG, GIF, PNG, but I will not enter into details. You can find them at W3C Mobile Best Practices. You can even use automatic validators for your code like W3C mobileOK or mobiReady

This article will be a starting point for the mobile web developer and it will help you setting the right approach, when it comes to this new highly expanding field, mobile web.

Categories: Web

Cross browser event handling

March 16, 2011 1 comment

We all know very well what a mess is Internet Explorer. Especially when it comes to following standards. But if I have to choose one thing and one thing only to change in IE, I will choose event handling without second thoughts.
Why is that? Because you will face this in your every day life as JavaScript developer and writing code that handles both world can lead to hardly readable code. I said both, because all the other browsers follows W3C event model. Except IE, but this no surprise by now. Of course you have the option of using different frameworks that will hide the messy part in their internals. But why to do so, when you have already such a good framework define by W3C?
And the good news is that you can make a little trick to make IE compliant. Yes, you heard well and then your code can be clean, W3C compliant and work on all the browsers.
I explained this technique before, which is based on IE behaviors. With behaviors you can add in an uniform and transparent way methods, properties and register events. What we are looking here is to define addEventListener, removeEventListener and dispatchEvent. Fortunately all these have IE counterparts attachEvent, detachEvent and fireEvent, so only a bridge will be required.
Before actually writting the code, there is one more thing to add: IE has even different names for some events (I know, I know …), so a mapping will be required here.

<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:DEFAULTS viewLinkContent="true"/>  
<PUBLIC:METHOD name="addEventListener" />
<PUBLIC:METHOD name="removeEventListener" />
<PUBLIC:METHOD name="dispatchEvent" />

<SCRIPT>
var TRANSLATED_IE_EVENT_TYPES = {
    DOMContentLoaded: "readystatechange", 
    DOMAttrModified: "propertychange",
    DOMMouseScroll: "mousewheel",
    invalid: "error" // for HTML 5
};

/**
 * Translates W3C DOM event types into IE ones
 * @param type the event type
 * @return the translation or the initial type if there is no translation
 */ 
function translateIEEventType(type) {
    var xtype = TRANSLATED_IE_EVENT_TYPES[type];
    return (xtype != null ? xtype : type);
}

function addEventListener(type, listener, useCapture) {
    return this.attachEvent("on" + translateIEEventType(type), wrapListener(listener)); 
}

function removeEventListener(type, listener, useCapture) {
    return this.detachEvent("on" + translateIEEventType(type), wrapListener(listener));
};

function dispatchEvent(event) {
    try {
        return this.fireEvent("on" + translateIEEventType(type));
    } catch(exc) {
		// if we can log ...
    	if (window != null && window.console != null && window.console.log != null)
    		window.console.log(exc + ";" + exc.message);
    }
}
</SCRIPT>
</PUBLIC:COMPONENT>

Pretty straightforward. You probably notice the wrapListener method. The idea is to wrap the W3C listener into an IE one, so that it can be handled by IE, and consequently, to wrap the IE event into a W3C one, so that it can be used by the original handler. For the last part we also have to define the Event type and all its methods as per W3C specifications.

function wrapListener(handler) {
    var h = handler;
    if (h._wrapper == null) {
        h._wrapper = function() {
            var event = wrapIEEvent();
            retval = h(event);
            return retval == null ? (!event.defaultPrevented) : retval;
        };
        h._wrapper.toString = function() {
            return h.toString();
        };
    }
    return h._wrapper;
}


/**
 * Wrap the IE Event into a W3C one. 
 */ 
function wrapIEEvent() {
    // keep the W3C event as a standardEvent property of the window
    if (window.standardEvent == null || window.standardEvent.ieEvent != window.event) {
        window.standardEvent = new Event(window.event);
    }
    return window.standardEvent;
}

/** 
 * Creates a new event.
 * @param ieEvent the IE event. 
 */
function Event(ieEvent) {
	// wrap the IE event into a W3C one
}

Event.prototype.preventDefault = function() {

};

Event.prototype.stopPropagation = function() {

};

The only thing left for you is to fill in the gaps: wrap the IE event into a W3C one and define the W3C methods for the event – preventDefault, stopPropagation and all the rest. This is your homework. Or you can download it from here.
The final stage of the trick – using it. Like any other behavior and in this case you have to register it for all the elements.

* { 
	behavior: url(cb.event.htc);
}

Or another resolution of this problem (I would like it better) will be to stop using IE, tell your friends to do the same and them to their friends and so on until we will get rid of this “web poison”.

P.S. This was tested with IE 7 & 8. It seems that IE 9 is implementing W3C events, but still I would like to see it gone.

Categories: Web
Follow

Get every new post delivered to your Inbox.