web developer alo

HTML5, CSS3 and JavaScript

CSS-world

March 2, 2012
by alo
0 comments

Less is more – CSS Tools

Why does CSS has no variables?

Everybody who has to work with CSS knows that this language has limitations. You are not able to use variables, functions, calculations or even reuse some of your CSS source code life can be difficult. Every time I reuse some of my CSS snippets I have to adapt the colors, margins, paddings and borders. I was hoping that with the new CSS3 standard come out with some new features for web developers so they can use CSS3 like a normal programming language, but I was wrong. So I took a look at some tools out there that will help me to improve my web developer life.

LESS and Sass can help you

Basically LESS and Sass have the same idea. Both languages improve the CSS standard with variables, functions, mixins, nesting and other features. LESS and Sass are not compatible because every language has their own syntax language and function set. If you are familiar with writing CSS source you get to know both languages very fast. Mostly they enhance the CSS source code. At the end of the individual LESS or Sass file you are using a command line tool to translate the file into standard CSS source. So both languages can be converted into files that can be used in any browser (Internet Explorer, Firefox, Chrome, Safari or Opera) out there.

Common

  • Both languages are using a command line tool to translate their language into CSS source code
  • The features are nearly the same possibilites (variables, mixins, functions, mathematic operations, etc.)
  • Both languages can be used in other IDE or Frameworks

Differences

  • LESS can be used client side (JavaScript and CSS file)
  • LESS can be uses server side (Node.js and Rhino)
  • Sass is more powerful than LESS (Sass has more features)

For example “Variables”

Sass is using the dollar sign ($) and LESS is using the at sign (@) to define variables.

Sass syntax:

$color: yellow;
$width: 500px;

.content {
  background-color: $color;
  width:$width;
}

LESS syntax:

@color: yellow;
@width: 500px;

.content {
  background-color: @color;
  width:@width;
}

Summary

Which language you are going to use depends on you personal taste. Most web development stuff can be done with LESS. When I am working with LESS I am using the tool SimpLess which automatically translated the LESS files into CSS files. Sass is more powerful than LESS and can be used in many IDEs. If you would like to greate some bigger project Sass can be the correct choice.

If you would like to know these two languages please follow these links below:

  • LESS language definition
  • Nice LESS Tool – SimpLESS
  • Sass language definition

 

 

HTML5_Logo_256

December 17, 2011
by alo
0 comments

HTML5 and CSS3! Ready for use?

Yes! But you have to keep some important things in mind before you can use all the new features of HTML5 and CSS3. First of all you have to get to know what features that you would like to use are already supported by the browsers out there.

Website analysis – Which browser do I have to support?

New HTML5 and CSS3 featuresI use the StatCounter website to get an idea which browser versions are currently used by the internet users out there. It´s sometimes interesting to see how the browser version depend on different countries.
If you are using a web analytics tool like Google Analytics you should also checking out the browser statistics. It often surprising which browsers are used by users to view your website. Sometimes you are optimizing a website for a special browser nobody uses anymore.

At the moment two communities are working on the HTML5 standard. The W3C and WHATWG evolve new HTML5 and CSS3 features. The WHATWG was founded because the W3C act to slow to release new web standards. Please keep in mind that the HTML5 standard is not released at the moment, but many features are already available for use.
What are these new features? What features are supported by your browsers?
Review these links to find out:

If you are checking out the links above you may be recognized that most features are only supported in modern browsers like Google Chrome or Apple Safari. But the newest version of the Internet Explorer 10 (will be released in 2012) catch up. So in near future every browser will support HTML5 elements. The HTML5 support is growing every second.

Using new HTML5 tagsHow can you use all these new features. With JavaScript you can test if the browser does support the feature you would like to use. But please do not test for the browser name or version. A better way to verify the browser is another method called feature detection. Instead using the browser name to decide if the browser support the feature you verify the feature directly by using JavaScript. If would like to use many HTML5 features you can use a JavaScript library. I strongly recommend modernizr.com which is used on many projects and websites.

If you would like to use new HTML5 tags that older browsers do not know. You just can go ahead and use them. This sounds simple, but as always there is a hitch. There is one browser let´s call him Internet Explorer which does not act normally on new HTML tags. You can use the JavaScript Libary (Modernizr HTML5) to solve this problem. Why does this JavaScript Library solve this problem. John Resig describe in his blog post which technique this library use to solve the problem.

Here is short example what the modernizr.com JavaScript library does:

<html>
<head>
<style>
  article {
    border: 1px solid red;
  }
</style>
<script>
  document.createElement("article");
</script>
</head>
<body>
<article>
  New article tag
</article>
</body>
</html>

By creating a new element with JavaScript the Internet Explorer suddenly knows this HTML tag. Sometimes life can be surprising and simple.

Mobile Devices

For web developers it´s an interesting experience to work with all the new browser features and you do not have to think about the old Internet Explorer version.Mobile devices like iPhone, iPad or Android are using the same rendering engine called WebKit so everything you develop for this engine should be the same on the mentioned mobile devices. Apple created a new website for web developers to display the new possibilities you can use on Apple devices. Of course most features are also working on Android devices.
Certainly there is something similar like the Internet Explorer. Many companies are using old Blackberry devices for their employees. Until version 6 of the Blackberry device RIM also uses the WebKit engine to render website. So the WebKit engine seems to be the winner in the mobile devices combat. At the moment the Mozilla foundation is working on a Mobile version of Firefox, but the market share is very low.
If you would like to know which features are supported please take a look at the website mobilehtml5.org.

Do not start from scratch to create a new HTML5 website

SummaryThere are a few HTML5 templates out there, but my personal favorite is HTML5boilerplate. It´s a full package with feature detection and many more.

I think HTML5 and CSS3 are ready for the World Wide Web. Google Chrome, Apple Safari, Mozilla Firefox, Opera and even the Internet Explorer evolve very fast. Every month you have a new feature you can think about to add to your website. So watch out for these websites … 🙂

<!DOCTYPE html>
search

September 3, 2011
by alo
0 comments

Search Engine Optimization (SEO) – How do I get started?

If you enter the search term “Search Engine Optimization” into Google you got millions of websites in the result page.

Well, here is another search result hit.

Quality of the content of your website

The most import thing about Search Engine Optimization (SEO) is content quality of your website. This sounds like an easy issue to improve your website, but it is very hard to realize. If you have interesting and good content you automatically get the website traffic you need. After Google does the update of their search algorithm “Panda” websites with good content quality goes up in the search result list. How do you get this good content?

How do I enhance the quality of my content (content things)?

Please take a look at this Google Webmaster Blog Post. It lists some interesting questions about the content quality a website.

How do I enhance the quality of my content (the technical part)?

– Every page needs a title (title tag). This title has to been unique on your complete website.

– Every page needs a h1 headline tag that conatins the headline of your page

– Use a short description text to describe the content of article.

– Use an image to illustrace the context and meaning of your article.

– Add an alternative text to all images

– Use subheadline (h2-h5 tags) to subdivide your content. This hint really enhance the readability of your content.

– Use microdata to add information to your page. This improvement enhance the display of your page in the search engine result list. With microdata you can add additional information in the rich snippets. Rich snippets are some enhancement of the search result entry. Google, Yahoo! and Bing are using the same format for microdata. http://schema.org/docs/gs.html

– Link to other pages on your website with other useful information.

– Link to other pages in the internet with other useful information.

– Use a spell cecking tool before approving your page

– Use a link checker tool to make sure that the links on your page are till working.

Search Engine Optimization (SEO) – Checklist for your website

If you are building a new website you have to use HTML5 to create your website. HTML5 defines some to new HTML tags that can be used to give your website a semantic structure. So search crawlers can index your website more efficient.

– Use a robots.txt file in your root directory of your website
– Add a link to a sitemap.xml file in your robots.txt file
– Use the canonical tag to define the unique address of each page. Especially if you have many domains that link to the same content this hint could be useful.
– Use the minus character “-” to seperate a filename of website name. Here is some nice video that explains why you cannot use the underscore character.
– Improve your website performance. Google mentioned that the website performance has an effect of the search result position. Here are some hints how you can speed up your website.

Some nice fairy tales about Google and Search Engine Optimization (SEO):

– Google does only index 101KB of my website. The content of my website has to be at the top of my source code.

– Google does only index w3c valid websites

– Google does use the meta tag keywords to check the quality of a website

– Google does allow only one h1 tag on a page

Webmaster Tools – Please register to improve the search rank of your website

Google Webmaster Tools

Yahoo! site explorer

bing Webmaster Tools

This blog post only the most important things about search engine optimization (SEO). It’s a never ending story so make sure you are always keeping up your knowlegde about SEO.

Here are some useful links to keep your informed

– My blog 🙂

Google Webaster

Google Webmaster Help

mobile

August 3, 2011
by alo
0 comments

Web app vs. native app and mobile website

Today many people use smartphones like iPhone, Android,  Windows Phone 7Blackberry and many more to get access to the mobile web. If you are interested in some statistics about mobile phones you can take a look on the website “StatCounter“, but be aware that market share can vary in different countries.

So what´s the difference between a web app, native app and mobile website?

Difference between mobile website, web app and native app

Sometimes the differnce between a mobile website and a web app are very hard to explain, but here is my definition.

Mobile websites are normal website which are optimized for mobile devices. On the other hand web apps are some sort of web applications which means that they are like an application you can buy in the app store. Both of these types use the browser of the mobile device. Some of these mobile browsers are Safari (iPhone, iPod and iPad), Google Chrome (Android) and Opera (can be installed on many systems). Mobile websites and web apps are developed with HTML5, CSS3 and JavaScript (by the way many JavaScript). On the other hand we have the native apps which are developed in different programming languages.

Native app –  iPhone, iPod and iPad

On Apple devices you have to download the iOS SDK to develop an application for the apple app store. One component of the SDK is the development environment “Xcode” where you develop your source code. Xcode only runs on apple devices. The programming language are Objective-C, C or C++.

Native app – Android

On Android devices you have to download the Android SDK to develop an application for android devices. The programming language for Android devices is Java. So I recommend to use the development environment “Eclipse” to develop an Android app.

One “Native app” for every platform

So far you can see we have many programming language for native application. If you like to sell your application in different app stores you have to develop your application in many programming languages. Do you? No, there are some frameworks out there that will help you to develop your application just once and sell it everywhere you like.

Web frameworks for native apps – PhoneGap and Titanium

PhoneGap and Titanium are two frameworks to avoid the programming language overhead. You build your application like a web application with HTML5, CSS3 and JavaScript and this frameworks are translating your web source code into native source code. You can use these frameworks to publish your web application in the different app stores for mobile devices.

Web app and mobile Website

If you do not need to publish your web application in the app store you can use different frameworks to build your web application. jQuery Mobile and Sencha touch are just two awesome JavaScript frameworks out there to build your web application.

jQuery Mobile

If you like to build a mobile website I would like to recommend jQuery Mobile to build your mobile website, because this framework is much smaller than Sencha touch. jQuery mobile does not have as many functions like Sencha touch, but it does support more mobile devices. Especially some old blackberry devices.

Sencha touch

Sencha touch is a very good framework to build a web app. If you are already familiar with ExtJS you will be able to build a web app very fast. This framework does not support as many mobile devices as jQuery mobile, but it does have a very large support of many functionalities.

Nice list with some emulator for testing, testing, testing,…

After finishing your mobile website or web app you have to test your work.

On mobilexweb.com you find many tools for testing.

Thanks for reading.

router

July 16, 2011
by alo
0 comments

Website performance – Reduce the number of http requests of the browser

In my first article about website performance I demonstrate how you can measure the performance of your website. Further more I pointed out the most common best practice rules for performance optimization.

In this blog article I like to describe the loading process of browser. Before you even think about performance optimization it is important to know how a browser loads all elements for the website.

How does the loading process of a website works

First the browser loads a website that contains the HTML source. The browser analyse the HTML source from top to bottom of the HTML source. The HTML source contains many elements like CSS, JavaScript and images and other elements which are not part of the HTML source.  When the browser gets to an element with a external reference it downloads this element. If an element is a JavaScript file the browser stops the rendering process of the website. That´s why you especially have to reduce the number of JavaScript files. The browser has to make a http request to download an element, but there is a problem. The browser cannot download all elements at once. It has to download these elements in parts. How many http request a browser can make depends on the browser. The range goes from 2 to 6 parallel http requests. In short old browser can make less http request than the new ones. On the website (http://www.browserscope.org) you can check many features of your browser.

So the parallel http request are a huge bottle neck for the performance of a website. That´s why we have to reduce the number of http requests. Particularly the JavaScript files.

Images – Best file format and size

A website contains many references to CSS, JavaScript and image files. First we take a look at the website images. Please make sure that you always use the best image file format. If you are not sure about the file format, you can check it by uploading your image to the website (http://www.smushit.com). In addition this website also reduce the image file size.

Images – Use CSS Sprites for background images

Now we take a look at the CSS background images. A very good solution to reduce the number of CSS background images is to use CSS Sprites. The idea is to add every CSS background image into one image file. You can do this by yourself or use this website (http://spritegen.website-performance.org) to create the CSS Sprite. The CSS Sprite is another image file that contains many images. How do you use an image in the CSS Sprite? You just have to replace the normal background image reference with the CSS Sprite reference. With the CSS property “background-position” you can use any image in the CSS Sprite. The CSS Sprite tool in mentioned before displays a list of all background-positions of all images so you do not have to calculate this background positions by yourself.

Images – Data URI scheme for mobile devices

Another way to reduce the number of http requests is to make the images part of the HTML source by using Data URI scheme. First you have to encode the images by base64 and put them in normal image tag. Modern browser can handle this Data URI, but there are some older browser that do not support this technique.

Reduce the number of http requests of  JavaScript and CSS files

To reduce the JavaScript and CSS files you have to combine them by yourself. Please make sure that you have at less JavaScript and CSS files as possible. Sometimes when you copy and paste many JavaScript files into one JavaScript files you get an JavaScript error message you did not get before. I always use the Google closure compiler and JSLint website to check my JavaScript source. This checking routine does solve you a lot of trouble.

Thank you for reading my article.

performance

July 10, 2011
by alo
0 comments

Website performance – Fundamentals

In the last few years the web has changed in many ways.

The browser market has changed, new browser with different rendering engines appear in the world wide web. Of course the old browser are still alive, but this is something given a web developer has to live with it every day. New smartphones with different browsers become a part of your mobile web life.

So websites become a very important part of your life and that´s why website performance is so important. You do not want to wait 20 secondes before a sport news website loads the results of your team.

So how we can make your website faster and better.

How did I get started

Last year I had the chance to visit the google developer day conference in germany. One speech I visit on this conference was”Real World Website Performance Optimization”. I already was familiar with most of the performance optimization rules, but on this day I started to get to know how to speed up a website.

The speaker uses the website (http://www.webpagetest.org) to test the performance of some big company website. I was really surprised to see that many website have  such a bad performance. But there was something else. On many websites most of the performance of a website is lost in the front end (the browser client) and not on the backend (the server).

After this conference I tested some of my websites. Oh no, the website performance was bad on many of my websites. So I started to get into the issue “How do I speed up my website!”.

Measure the website performance

I use the website (http://www.webpagetest.org) to test the performance of a website. One benefit of this website is that you can create a video of the website loading process. This video gives you a better impression how the user sees your website in different parts of the world. Some website I tested were so slow that you can drink a cup of coffee before they finish loading.

This year Google starts a new website to test the performance of a website even for mobile websites. The website (http://pagespeed.googlelabs.com) uses the Page Speed tools to analyse your website results are based on the page speed tool.

Best practice rules of website performance optimization

Therea are two best practices rules of two different companies. Get to know there best practice rules of Yahoo and Google give you a very good idea of how you can speed up your website.

Yahoo – Best practice rules

http://developer.yahoo.com/yslow/help/#guidelines

Google – Best practice rules

http://code.google.com/intl/de-DE/speed/page-speed/docs/rules_intro.html

5 most important things you have to optimize on your website

  • Reduce the number of http requests
  • Put Javascript at the bottom of the page
  • Compact CSS and Javascript files
  • Activate server caching on your server

Some useful tools for website performance optimisation

Yahoo – YSlow

https://addons.mozilla.org/de/firefox/addon/yslow/

Google – Page Speed

http://code.google.com/intl/de-DE/speed/page-speed/download.html

Thank you for reading my article. I hope you enjoyed my first article.