New Blog Address: http://blog.grayjunior.com/

Archive for the ‘Tutorials’ Category

Step By Step: Create a Slideshow With JQuery & CSS3

Sliding-Gallery With JQuery and CSS By Gray Junior

Introduction

Skills Required: Basic JQuery, HTML & CSS

Difficulty: Easy

Previously, I’ve released a copy of my JQuery + CSS Slideshow for everyone to download, here. A few days later, I figured besides sharing, I could probably teach a thing or two of it. As simple as it is, if you’re able to finish up something like that, you will have no problem doing your very own slideshow in future!

What You Will Be Doing

Jquery and CSS slideshow By Gray Junior

How confusing can it get? Well, if you have experience in JQuery, basic HTML and CSS, you’ve nothing to be afraid of then! Really, it requires just basic knowledge of the languages to make it work. Only problem is, figuring out the “How”. So, let’s get started shall we?

Download Script v1.1 ↓View Demo

HTML & CSS

To even begin buildiing the mechanism of the slideshow, we need to visualize its layout. So go ahead and start setting up the page.

Slideshow Layout in HTML

<div id=”container”>

<div id=”header”>

<h1>CSS + JQuery Sliding Gallery</h1>

</div><!- – end of #header – ->

<div id=”main”>

<div id=”actions”>

<a href=”#” id=”previous”>Previous</a>

<a href=”#” id=”next”>Next</a>

</div>

<ul id=”slideshow”>

<li>

<img src=”images/flow 1.jpg” alt=”Slide01″ />

<p>Slide #01. This is a sample text.</p>

</li>

<li>

<img src=”images/flow 2.jpg” alt=”Slide02″ />

<p>Slide #02. This is a sample text.</p>

</li>

<li>

<img src=”images/flow 3.jpg” alt=”Slide03″ />

<p>Slide #03. This is a sample text.</p>

</li>

</ul>

</div><!- – end of #main – ->

</div> <!- – end of #container – ->

The slides are contained in an Unordered List, with each image inside a LI element. We shall be using the container “#main” as the holder for each of the slides. In other words, the restrictor for the size. By placing the container “#slidehsow” evenly on each side using position absolute, we now form a border around the slides. Let’s set the width of each image to 100% so that it scales along with the container “#main” for flexibility. As you can see, We have 2 other links, the “Next” and “Previous” buttons, which are just set outside the Unordered List. This is so that it will be unobtrusively place itself within the container “#main” and not bother the unordered list areas. Now, let’s move on to the CSS portion, which you will get a clearer picture of the explanation above.

Slideshow Styling in CSS: CSS Reset

/*===============================================

CSS TOTAL RESET

===============================================*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

:focus {

outline: 0;

}

This set of codes, as the comment stated, will reset some of the default styling inconsistency between different browsers to 0 or none. In other words, standardizing them. Moving on to the element styling.

Slideshow Styling in CSS: Global Elements

/*===============================================

GLOBAL ELEMENTS

===============================================*/

body, html {

padding: 20px;

font-family: Georgia, Helvetica, Verdana;

font-size: 12px;

background: #111;

color: #fff;

}

h1 {

font-size: 35px;

text-align: center;

text-shadow: 0 1px 1px #111;

}

img {

width: 100%;

height: 100%;

}

a {

color: #555;

text-decoration: none;

z-index: 10;

}

a:hover {

color: #222;

}

p {

position: absolute;

margin-top: -110px;

padding: 10px;

width: 100%;

height: 100%;

background: rgba(11,11,11, 0.7);

}

.button { //USED FOR THE ACTION LINKS

padding: 10px 20px;

background: #eee;

}

.next { //POSITIONING OF “NEXT” LINK

float: right;

margin-right: 20px;

}

.prev { //POSITIONING OF “PREVIOUS” LINK

float: left;

}

.box-shadow-up { //UPWARDS BOX SHADOW

-o-box-shadow: 0 -1px 5px #222;

-moz-box-shadow: 0 -1px 5px #222;

-webkit-box-shadow: 0 -1px 5px #222;

box-shadow: 0 -1px 5px #222;

}

.box-shadow { // NORMAL BOX SHADOW

-o-box-shadow: 0 2px 5px #000;

-moz-box-shadow: 0 2px 5px #000;

-webkit-box-shadow: 0 2px 5px #000;

box-shadow: 0 2px 5px #000;

}

As you can see, its pretty straight-forward. Very much what you may have learned in the school and the usuals. The only new things are the CSS3, such as box shadow and RGBA. You may notice that I had seperated each and every elements with their own class, such as box-shadow, button, etc. The reasons for such effort is to better organize your styling. IDs are generally used for javascript or php to identify an element, so it is always a good practice to separate designing and styling from positioning and defaults. In other cases, it could also be a certain same set of styling will be re-used again and again. Instead of increasing the length and size of your stylesheet, a smarter way would be to use a class to attach the same set of styles to different elements.

Slideshow Styling in CSS: Slideshow Elements

/*===============================================

SLIDESHOW ELEMENTS

===============================================*/

#container #main {

position: relative;

padding: 10px;

margin: 30px auto 20px;

width: 800px;

height: 400px;

background: #eee;

}

#container #main #actions { /*POSITIONING OF LINKS */

position: absolute;

top: 50%; /*POSITION AT CENTER */

margin-top: -25px; /*OFFSET ITS HEIGHT */

width: 100%;

z-index: 10;

}

The “#action” ID are used for the “previous” and “next” links, that shall change the slides. In this case, I would like to position them in the center so that it would be more noticeable. In order to do that, I used a simple line of code to achieve centered positioning: “top: 50%”. If you have done that, you would notice that it isn’t exactly centered. That’s because our links have a size rather than a single line. So to offset that, we set its margin-top to -25px.

#container #main #slideshow {

position: absolute;

/* POSITION TO LEAVE 10PX BORDER */

top: 10px;

bottom: 10px;

left: 10px;

right: 10px;

background: #fefefe;

list-style: none;

overflow: hidden; /* HIDE CONTENTS */

}

#container #main #slideshow li {

/* TAKING THE SIZE OF THE SLIDESHOW */

width: 100%;

height: 100%;

overflow: hidden;

}

By setting the #slideshow’s Top, Right, Bottom, Left to 10px, not only does it create a 10px border-like, it also allows the slideshow to inherit the size of its outer container “#main”.

JQuery

Having the layout and looks setup, we are now ready to move on to developing the slideshow’s mechanism. First, Let’s declare some of the variables for easier calling later on.

Slideshow’s Mechanism

// DECLARING VARIABLES FOR EASIER CALLING

var slideshow = $(‘#slideshow’),

main = $(‘#main’),

actions = $(‘#actions’),

next = $(‘#next’),

previous = $(‘#previous’),

desc = slideshow.find(‘p’);

It’s pretty self-explanatory as well if you know basic JQuery. Next, we shall start declaring the function for the mechanism.

(function($) {

$.fn.slider = function(settings) {

//THE DEFAULT SETTINGS FOR THE SLIDESHOW

var defaults = {

speed: 800,

actions: true,

width: 800,

height: 400

};

//EXTEND THE SETTINGS SO USER MAY CUSTOMIZE

var settings = $.extend(defaults, settings);

What this does is basically, to declare a set of given settings with default values, and then extend it to allow users to customize it by setting their own values. The extend is an API of JQuery’s massive library, that allows the merging the contents of 2 or more objects together into the first object in its parameter.

//CHANGE THE SIZE OF THE SLIDESHOW

//TO THE SIZE USER DECLARED IN SETTINGS

main.css({

“height”: settings.height,

“width”: settings.width

});

Of course, when you allow the users to set their own values, you need to apply them to make changes. The first basic settings to apply would be its width and height. So to call on the values declared in the settings, we use “settings.width” or “settings.height”, where “settings” is the variable’s name you used.

function animation(action) {

//IF USER CLICKS ON NEXT LINK

if(action == “next”) {

//HIDE THE FIRST SLIDE

$(‘li:first’).animate({

height: 0,

opacity: 0

}, settings.speed, function() {

//SHOW IT WHEN ITS APPEND TO

//THE BOTTOM OF THE LIST

$(this).animate({

height: settings.height,

opacity: 1

}, ‘fast’);

//REMOVE SLIDE AND APPEND AT THE BOTTOM

$(this).remove().appendTo(slideshow).show();

});

This function handles all the animation you would see in the slideshow. The parameter passes the direction in which the slideshow should animate. If the user presses “next” then the slide that is currently showing will have its height and opacity reduced. On its second part, you notice that the height is now set back to “settings.height” and opacity 1. That’s because we would still want the slide appeared as the last of the list of slides, but hidden. As processed by the last line, this slide will be removed and then append back to “#slideshow” as the last one, and shown with “show();”. Sounds confusing? Well not really if you’re able to visualize it. I shall assist you in doing that with the snapshot examples below:

Before Clicking Next:

before-clicking-next

After Clicking Next:

after-clicking-next

} else {

//HIDE THE LAST SLIDE

$(‘li:last’).css({“height”:”0″,”opacity”:”0″});

//REMOVE THE LAST SLIDE AND

//PREPEND AS THE FIRST SLIDE

$(‘li:last’).remove().prependTo(slideshow);

//ANIMATE AND SHOW THE SLIDE

$(‘li:first’).animate({

height: settings.height,

opacity: 1

}, settings.speed);

}

}

If user clicks on “previous” link, this set of codes will be activated. What it does is basically a reversed flow of the “next” animation. It hides the slide on the last of the list, removed it and prepend it back to “#slideshow”. The key in this animation is prepend and append. The difference is prepend inserts it on the top/first in the list while append inserts it on the last/bottom of the list(Look it up on JQuery’s Documentation). Once prepended, it will then animate to the given set of height and opacity 1.

Following So Far?

Well, it wasn’t that difficult right? If you can visualize it, its pretty easy to do a simple slideshow. The major bits are done, and we are left with tweaks and the action links.

// ONCLICK EVENT FOR NEXT SLIDE LINKS

next.click(function() {

animation(‘next’);

return false;

});

// ONCLICK EVENT FOR NEXT SLIDE LINKS

previous.click(function() {

animation(‘previous’);

return false;

});

It’s pretty straight-forward here. We bind the click events to the action links and call the function with the parameter of the direction. Returning false will prevent the page from re-loading.

//HIDE AND SHOW THE LINKS IF ACTIONS IS TRUE

if(settings.actions) {

actions.css({“opacity”:”0″});

// MOUSE ENTER EVENT FOR ACTIONS TO APPEAR AND DISAPPEAR

main.mouseenter(function() {

actions.stop().animate({

opacity: 1

}, ‘fast’);

}).mouseleave(function() {

actions.stop().animate({

opacity: 0

}, ‘fast’);

});

}

}

})(jQuery);

Here, we check to see if user allows the “action” setting to be “true”. If so, we will hide the links on initial loading, and only appears when the mouse hovers over the “#main” container. Simple as that!

Conclusion

This is a simple tutorial to explain how a basic slideshow is done. With the newly introduced CSS3, many new creative slideshows are appearing, such as rotation, scaling, etc. Slideshow is very common nowadays and is used for many different purposes. Its generally pleasing to see with minimal effects, and helps to feature some of the content a website or blog has for their users.

Do you enjoy this tutorial I compiled for you? If you do, I would really appreciate if you share it with others through the social media below! Thank you!

Download Script v1.1 ↓

Related Post

JQuery & CSS3 Slideshow on 28 Dec 2010.

Advertisements

Step By Step: Designing A Landing Page With Photoshop.

Having learned and studied some techniques in designing and how colors may trick our eyes into believing something that is not, I hope to share with you these techniques so that you may create your own style of design someday. The techniques in this tutorial are simple and straightforward. Its all about understanding what our eyes will believe in, and the balancing of strong with softer colors.

Edit: Visit my newly setup blog over at http://blog.grayjunior.com/ to receive more tutorials and inspirational works by me!

Case Study: A Photographer’s Diary

In this tutorial, we shall be looking at how to create a simple landing page that sells a photographer’s prints and a simple diary. The theme I chose for this particular tutorial will be “Bokeh”.

The term “Bokeh” originated from “Boke” in Japanese which stands for blur, haze or out-of-focus, and its a popular technique in photography as well as web design. Most of it is applied as a background, and only on occasional designs will you see it elsewhere. As this is just a landing page, the design will focus more towards promoting as a single page, rather than an actual template applied throughout the other pages. Of course, it may be tweaked to become a template for use though. Let’s get started shall we?

The End Result: What You Will Be Creating

Photographer Diary

Preview ImageDownload PSD (External Mirror)

Step 1: Creating The Background

Setup a new template with the size of 1140px by width, and 1200px by height. Of course, you may wish to extend both sizes to your need, but in this case, let’s stay with 1140 x 1200px. I’ve placed standard guidelines to help me get equal spacing before I start throwing in stuffs. The guideline goes by 10 and 20px on the left, 20 and 50px on the top, 1130 and 1120px on the right.

Since we will be creating a “bokeh” design, we will need a rather unique background. A good photo will most definitely enhance the design results. I’ve picked this particular photography out from DeviantArt, which I think its a very good piece. Photo taken by TraceLegacy @ http://browse.deviantart.com/?qh=&section=&q=TraceLegacy#/d1mf4ob

Create a new layer and name it “Background” if you wish. This layer shall contain the background. Download and open the image in photoshop, resize and position it till you are comfortable with the result.

step-1_resize_bg

Step 2: Setting The Guidelines

Next, in order to have a neater and consistent look, guidelines are a must in a design. It helps you to be more organized and ease your process. So here, as you can see in the screenshot, apply these guidelines as follow: 100px on the left, 200px on the top, 1040px on the right and 1100px on the bottom.

These guidelines serve to help out setup the main content area background. On to creating the background.

step-2_guidelines

Step 3: Creating the Content Background

Now that we have the guidelines laid, its easy for us to create the shape we want with the exact size. Create a new layer and name it “BG Fill”, and use the Rectangular Marquee Tool and drag from the first point down, ending with a rectangular selection. Next, select a #fefefe as the base color, and use Paint Bucket to fill the shape.

step-3_content_bg

Add in a smooth gradient by right-clicking the layer “BG Fill” and check Gradient Overlay. Set it to #cccccc on the left and #fefefe on the right. To create that glossy border, simply add a 10px-sized stroke with the color #575757, position Inside and blend mode as  Soft Light. To make it look more “lively”, let’s add in a soft shadow with the following details: 40% opacity, 120° angle, distance 5, spread 0 and size 10. The following screenshots showed how it is done.

step-3_content_grad

step-3_content_stroke

step-3_content_shadow

Step 4: Adding Title & Description

A page without a title identifies nothing. So let’s quickly add in a simple yet elegant title and description for the page. Choose a cursive font face, such as “Bickham Script Pro” and set the size to 140px. I chose the word “Genius” as the word looks gorgeous in cursive style.

Download “Bickham Script Pro” Font at http://www.searchfreefonts.com/font/bickham-script-pro-regular.htm.

Remember the guidelines we have before? Place the title aligned to the top 20px margin, as show in the screenshot.

step-4_title

Add in a soft gradient, from #cccccc to #ffffff, just like what you did to the content background’s gradient. Drop its shadow to 40% opacity, at 120° angle, of a distance 2, spread 0 and size of 1 to add depth. To add in a small amount of glow/blur effect, we add in 1px-sized stroke, with the color #575757 positioning on the outside.

Give the page a short description using the font “Century” at size 20px, and aligned it just below the title. A mix of cursive and traditional serif gives it a nice touch and combines really well.

step-4_description

Step 5: Sparkling Effect

Let’s create some uniqueness to the title by adding a tiny sparkling effect to it. Select the title layer and use the Eraser tool to remove the “i” dot. Create a new layer with a name, say “Sparkle”, then select the brush tool and use a soft-round preset. Pick the #ffffff color and paint a spot shown in the screenshot. Now, we’re going to resize it and make it look like a sparkling effect.

step-5_sparkle_brush
Still selecting the “Sparkle” layer, use Free Transform to resize the brush shape. You may do so by either using the shortcuts CMD + T or CTRL + T for windows, or simply go to the menu -> Edit -> Free Transform. Resize it to a small width and height, tilt it 45° to the left and apply the transform. Copy that layer and paste it again, but this time round, tilt it 45° to the right. Now, does it resemble a sparkle? Merge this two layers together and all you need to do now is to resize it to an acceptable size.

step-5_sparkle_resize

Shift it above the “i” to replace its missing dot, as seen in the screenshot.

step-5_sparkle_place

Step 6: The Menu Buttons

We need just a simple menu in this tutorial, as it is a simple landing page. We will have two buttons, one on the left and one on the right. Let’s create the first one on the left. Select the Custom Shape tool, use the rounded-rectangle with a radius of 10px, and drag a shape. You may decide on your own size, or even create guidelines to make the shape’s size if you want. Once you have the shape, go to the blend options and add in drop shadow, gradient Overlay and a decent sized stroke. Then align it with the guidelines you have created previously. The screenshots below show how it is done. (Gradient colors: #485e90, #7f9bdb), (Stroke: #485e90)

step-6_button_grad

step-6_button_shadow

step-6_button_stroke

Just buttons alone may not seem obvious or attractive enough to catch much attentions. In this case, we may add small graphics icon to visually represent what that button might be. As the button on the left shall bring users to the “diary”, I chose to place a pencil as the detail. The usual blending options, drop shadow to add depth for the graphic.

step-6_pencil_effect

Step 7: The Menus

Well, now that you have the basic shapes and blending option for the first button, why create it again? Simply use this shortcut to speed up the process of designing: Press Alt while selecting the button layer, drag it to the position you want. There you go, you have another button of the exact shape and looks. Change the gradient colors so that the two buttons can visually identify themselves and create diversity. This may allow users to quickly know which area they are actually looking for, with the help of visuals.

Step 8: Setting The Content Guidelines

The important part of a well-designed page is always the content. No matter how visually attractive your design may look, without a well placed content layout, its hard to keep readers on it, much less to say creating hotspots or guiding user’s eye movement. To keep it simple, we will have a featured products on the top, and one of the diary logs below.

Take a look at the screenshot. I’ve taken the extra time to indicate each margin guidelines so that it is easier for you.

step-8_content_guidelines

Now, as you can see, I’ve already placed the title there. The reason is that it helps me better set the margins according to the layout I want. Don’t worry about the title as I will go into it in the next step.

Step 9: Product Titles & Descriptions

I’ve used “Bickham Script Pro” with a size of 100px for the title, but you may wish to explore around with a different set of fonts.

step-9_prod_title

step-9_prod_desc

I actually intended to use one of the popular web safe fonts this year, which is Georgia. But I thought, well its a landing page, so let’s add some characteristics to it instead. So instead, I used “Artbrush” to have some artistic style. With a size 30px and 50pt line height, it sits nicely on the margins we’ve created with a decent amount of space for our price tag.

Download ArtBrush Font – http://www.urbanfonts.com/fonts/ArtBrush.htm

To add in a striking price tag that attracts attention, increase the font size to 70px and change its color to maroon color such as #5f0c0c. In addition, as the scenario of this featured pack is very much like a discounted product, emphasizing on it would help greatly. There are multiple ways to go about it, and in this case, I chose a rather simplistic emphasizing by underlining it with a brush.

Next, since we are done with the description of the featured product, we need to have an image to visually explain what it contains and what is it. So, let’s throw in a few images here. Go ahead and use your own images if you want. The images I used here are stock wallpapers from Mac’s library, which are also brilliant works. As the images may be very big, we need to resize it. To achieve a proportionate image without distortion, hold down shift and then resize. Another ideal method to have equal sizes of different images, is to use the height and width percentages.

step-9_prod_price

Now that you have the basic product image on the left side, we need to do some blending to add some depth and making it look like a photo. Simply add in a small amount of shadow, say distance of 2px and size of 5px, and a 5px white border on the inside. If you wish to add some characteristic, you may wish to try tilting it 45°.

step-10_prod_effect

Step 11: The Purchase Button

We have all the image and its description done. But we lacked a button where users can purchase it right away. So let’s create one that would stand out from the rest of the graphics. Use the Rounded-Rectangle Tool to create a 10px radius shape, with the color #f2dd6b. You may wish to type in the words you want first, so that you may better estimate the size of the button you need. Use a web safe font, in this case, we are using Georgia, 25px for the “Purchase it!” phrase.

step-11_purchase_btn

Add in a Gradient Overlay with the color #f2dd6b on the left, and #fced97 on the right, to create a soft gradient. Give it a small shadow such as distance 2px and size 1px, and 1px stroke with the color #edd657, a slightly darker yellow than your gradient.

step-11_purchase_btn_border

Now, here’s another effect we are going to put in to create a double border effect, which makes the button looks very “alive”. Add in an Inner Glow effect, with the color #fdfeff, opacity 75%, choke 0, size 2px. There you go!

step-11_purchase_btn_innerglow

Step 12: What’s In The Pack?

To better present and market a product, its always a good practice to be detailed. Customers want to know what exactly are they purchasing. So do them and yourself a favor by displaying small thumbnails of the package, that is still visible, near the featured product. Get a few more photos and resize them accordingly. To speed up the process, you may want to use the percentage to adjust in order to get equal sizes.

step-12_item_resize

Step 13: Separating The Contents

Since we are creating a simple landing page, you should go ahead and throw in your own imagination and creativity. I decided to stick with just a single post below. Another idea is to fully promote your products below as well, such as featured products, popular picks, etc.

But before you continue, the contents below may differ from the what’s on top. In this case, a single post from the diary. By adding a simple border, you intentionally break the two set of contents apart. This helps to guide the user’s eye to read the top and the bottom separately. Let’s go ahead and add the border by using a pencil with the color #575757, and draw it along the margins we created. Well, I personally thinks that it was a little darker, making it stand out alot more than usual. You may wish to reduce the tone of the color to something lighter.

step-13_separator

Add another white border just below the first one to add some depth and character to it.

step-13_white_separator

Step 14: The Single Post

Let’s go ahead and setup the basic margins for the post. The screenshot below  shows the margines required for the post.

step-14_post

Give a title to it with font size 25px and drop its shadow with opacity 20%, disance 2px and size 1px. Add in a sample text, such as Lorem Ipsum, bold it with a font size of 15px. Place a post date to the right, aligning with the margins set before, as shown below.

step-14_post_date

If you notice, I had a faint white shadow, behind the actual font. To do this, simply duplicate the actual one and change its color to white. This helps to add some depth to it. Alternatively, you may just drop its shadow for the effect. This is just another technique similar to the border technique.

Step 15: Post Image

Nothing could better enhance your website visually, than a well-taken photo or beautiful image. So let’s go ahead and throw in a post image, just under the text. But wait, we need margins to properly set it in place. Follow the screenshot to correctly set the position and size of the image background.

step-15_post_image_bg

step-15_post_image_clip

With the margins set in place, what’s left is to place an image into the designated area. For this tutorial, I shall be using a photo taken by Chicah – Northern Lights, http://browse.deviantart.com/?qh=&section=&q=northern+light#/ductie. Add in the image and position it where you wish to have the beautiful view of it. Don’t worry if its larger than the designated size, photoshop will take care for you. After positioning it, right click on the layer and select Create Clipping Mask. Now, your image is seamlessly “cropped”, “cut” whatever you wish to call it, into the size you have designate it to be. That’s it! Your design template is ready!

Final Touches, Your Creativity

Of course, this design is nothing close to perfect nor is it complete yet. Even at this point, I could name a few areas for improvements, such as the navigation of the post with “Previous Log” or “Next Log”, highlighting what’s so unique about the products, some footer navigation and copyright stuffs, etc. The purpose of this tutorial is to guide you along with the basic setup of a design, and allowing space for you to throw in your creativity.

Conclusion

When it comes to web design, not only are we suppose to visually enhance a website, it is also our responsibility to properly design the content’s layout, as well as the development concerns. Whether is it possible to do so with the current technology? Would it really enhance the user experience with this design? Or does it simple visually enhance it but unintentionally created more problems such as, multiple HTTP requests, loading of images, etc.

I would like to thank you for reading through, as it is my first hands-on in putting up an actual tutorial. Should you have any comments or even to express whether you like it or not, please feel free to add in. I would very much appreciate it!

One last thing though, if you think this tutorial is good and hope to see a PSD to HTML conversion tutorial, please tell me by commenting in this article. If there’s enough responses, I will give it some thought and allocate time for it. Thank you!

Back to top ↑

CSS Techniques For Beginners Part 1

Back to top ↑

Introduction

I intended to release it during the halloween period, but guess I didn’t make it on time. As the title says, this tutorial was meant for beginners and people who wish to learn some basic CSS. As you might have guessed, there are tons of tutorials and demos out there that goes deeper into CSS. The purpose of this tutorial is not to replaced any others, but simply serves as an additional information for people who are picking up and learning as beginners.

Setting Up A CSS Stylesheet

I believe most of us are equipped with the basic knowledge of setting up a website or a page. But at the same time, there are also many out there who are new yet keen to learn. And as this tutorial is catered to this group, I shall briefly walkthrough this part.

In order for a website or a page to be have beautiful layouts, visuals and effects, you need a stylesheet, also mostly referred to CSS (Cascading Style Sheet). To do this, there are 2 main methods: 1) Inline styling, and 2) Attaching an external stylesheet with the extension “.css”. For the first method:

    The Code: 

  • <head><style type="text/css">
  • <!--- Your CSS Styling here -->
  • </head></style>

And as you can see, the styling should be contained within the “<head>” element, and closed before the “</head>” closes. Another form of inline styling could also be used, as shown below:

    The Code: 

  • <p style="background: #222; color: #fff;">You texts here.</p>

This is rarely used as most people would perform it within the stylesheet. It is also considered a bad practice for a couple of reasons such as, older screen readers are unable to see these styles, making your page size larger, not separating design from contents and maintaining it could cause headaches.

But there are also situations where such methods could be better than others. For example, if you only need to change a particular portion of your content, you might consider using this method. Or when used together with javascripts, small alterations are made using such inline styles as they are easier. But if a particular set of styles will be repeatedly used, creating an extra class  for it is the most ideal instead.

For the second method:

    The Code: 

  • <style rel="stylesheet" href="stylesheet.css" media="screen" />

This method is the most commonly used, considered the best practices and standard across all platforms. Media refers to the targeted devices or platforms, with values such as projectors, print, screen. Unless otherwise stated, the default for the media attribute will be set to “all”.

Now, I believe you are ready to get started on your CSS stylesheet! So, let’s get the ball rolling.

CSS Reset

CSS Stylesheet

Why do you need to reset? Well, by default, certain elements came along with its own style in different browsers, such as margins, paddings, etc. In order to gain control of every elements and to reduce inconsistencies, most people would use a CSS reset, to set all elements style back to 0 or none. If you know that you need to style up most of the elements, a reset is suggested so that you may not stumble upon some deforms later.

Here’s the code for CSS reset(Eric Meyer’s CSS Reset):

    The Code: 

  • html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, figure, footer, header,hgroup, menu, nav, section, menu,time, mark, audio, video {
  • margin: 0;
  • padding: 0;
  • border0;
  • outline0;
  • font-size100%;
  • vertical-alignbaseline;
  • backgroundtransparent;
  • }

In most cases, such resets suffice most projects, and used by majority. Alternatively, you may also use YUI’s Base CSS. No matter whose or which version you use, it does the same thing altogether. To reset and reduce inconsistency.

CSS3: Webkit, Moz, O, Khtml

Basically, I meant different browsers. “webkit” refers to Safari and Chrome, while “moz” refers to mozilla firefox, “Khtml” refers to Konqueror Browsers, and lastly, “O” refers to Opera. Why use short-forms then? When CSS3 was introduced, different browser vendors have adapted their prefix into it, as most of the new features are still under-going testing and developments. So, if a CSS property has the vendor prefix, e.g. “-webkit-border-radius”, it means they are still under testing for that particular browser, and such are still not under CSS’s specifications. Note: Using such extension will not pass the CSS validation.

Basic format of a vendor prefix:

    The Code: 

  • '-' + vendor prefix + '-' + CSS property: value;

Examples of different vendor prefix:

    The Code: 

  • -webkit-border-radius: 10px;
  • -moz-border-radius: 10px;
  • -khtml-border-radius: 10px;
  • -o-border-radius: 10px;

CSS3 Commonly Used Features

Since the day CSS3 was released, many bloggers and designers have adopted the use of its new features. Although they are still under development and testing, nonetheless they still work in most major browsers.

Box shadow

As the name indicates, it casts a shadow onto any elements such as “<p>”, “<span>”, “<div>”, etc. To enable box shadow on your content element, just initiate the vendor prefix + box-shadow: x-offset y-offset blur radius #color, as shown below:

    The Code: 

  • -webkit-box-shadow: 1px 1px 2px #333;
  • -moz-box-shadow: 1px 1px 2px #333;
  • box-shadow: 1px 1px 2px #333;

The “x-offset” and “y-offset” simply means how many pixels should the shadow cast from the element. Color could be indicated either in hexadecimal form, the color’s name or in rgba( CSS3 new property). An example of the 3 methods are shown below:

    The Code: 

  • -webkit-box-shadow: 1px 1px 2px #333;
  • -moz-box-shadow: 1px 1px 2px lightblue;
  • box-shadow: 1px 1px 2px rgba(33,33,33, 0.5);

You first input the color in R-G-B form which is only numerical sets like the above, then declare the amount of transparency, between 0 to 1, you wish to have for that color. Of course, its optional to be declared. If it is not stated, it shall be default value of “1”.

To cast an inner shadow on an element, you may have to add an additional value in front, as shown below:

    The Code: 

  • -webkit-box-shadow: inset 1px 1px 2px #333;
  • -moz-box-shadow: inset 1px 1px 2px lightblue;
  • box-shadow: inset 1px 1px 2px rgba(33,33,33, 0.5);

Yes that’s it. Just one word “inset”, your box-shadow shall now be inner shadow instead. Of course, “x-offset” and “y-offset” can be of value “0” while having a blur radius value of more than 1, the shadow will still appear.

html5-css3 and future of our web

Border Radius

Seen these beautiful boxes across the web? Before CSS3 came out, people used various methods to mimic the way an actual rounded box or container looked like with huge chunk of CSS and HTML elements nesting, image replacement in png, etc. Now, its easier than ever to get one of these beautiful feature appear on your pages. Here’s how to do it:

    The Code: 

  • -webkit-border-radius: 10px;
  • -moz-border-radius: 10px
  • border-radius: 10px;

Easy? Yeah, of course! With just 3 lines of code, you can execute the rounded-corner effect to your elements. Why include the last one though? Well, it simply serves like a prevention measure. Should the CSS properties be included into CSS specifications, or that the vendor had removed their prefixes, the last line of code will be used instead, thus not losing the effect.

Multiple Background

This is also another fabulous feature added, which could significantly have an impact on designing for websites. instead of using multiple “<img>” elements within a container, or declaring multiple “<div>” elements with their background set within a container, this additional feature solves it all.

    The Code: 

  • background: #222 top left no-repeat; /* Fall back */
  • background: #333 top 11px no-repeat;
  • background: #111 bottom left no-repeat;
  • background: #444 left repeat-y;
  • /* Combining the above 4 background property into 1 below. */
  • background: #222 top left no-repeat, #333 top 11px no-repeat, #111 bottom left no-repeat, #444 left repeat-y;

As you can see, it is basically combining 4 sets of background property value into 1 single background property. Nothing difficult nor any changes to the way a background is declared as before. Simple and neat. But do note though, like the sample I’ve shown above, it is really good practice to have fall-back preventive measures. Think of “What if..?” situation, and you will understand why.

Text Shadow

Reduce the work load of the browser from rendering a lot of images. Save the trouble of doing it in photoshop and saving as png for the text shadow effect. You need none of those now, cause CSS have finally include this feature in CSS3. Just like box shadow, the values are the same way of declaring, with “x-offset” “y-offset” “blur-radius” “color”. Simple huh? Yup, that’s it. On top of that, it works in all major browser except IE 7 and below, I believe.

    The Code: 

  • text-shadow: 0px 1px 2px #333; /* Fall back */
  • text-shadow: 0px 1px 2px rgba(33,33,33, 0.5);

Web Fonts

create beautiful web with css3

Well, if you did follow my blog and some of the simple tutorials I made, I believe this is familiar. In this case, I shall not touch on it much, except to put a sample up here. If you really are interested in this, take a look at my tutorial: “The Beauty Of Typography.” By the way, yes it is really beautiful. One of the important element that a design won’t miss out. I’m pretty sure you wouldn’t want too, since everyone loves to beautify their own websites.

    The Code: 

  • @font-face { font-family: "Chunkfive"; src: url('chunkfive.otf'); }

Gradient Backgrounds, Colors

Yes, you may now have gradient colors across your website, pages, elements, wherever you want. Only problem is, different vendor has a different way of implementing it. There are tools out there that can assist you in generating a gradient color, but I believe it is in general good for anyone to know. This is the standard declaration of the gradient effect:

    The Code: 

  • /* Webkit Radial and Linear */
  • background: -webkit-gradient( radial, point1, radius1, point2, radius2, from(color), to(color));
  • background: -webkit-gradient( linear, point1, point2, from(color), to(color));
  • /* Mozilla Radial and Linear */
  • background: -moz-radial-gradient( point1, radius1, point2, radius2, from(color), to(color));
  • background: -moz-linear-gradient( point1, point2, color, color);

In the radial type, point1 and radius1 defines the effect of the inner circle, while point2 and radius2 defines the effect of the outer circle of the gradient. Simply put, point1 with radius1 will apply the “from(color)” to point2 with radius2 “to(color)”. Sounds confusing? Well, imagine you are dragging your mouse from one point to another. The 2 points you made with your mouse, are exactly like point1 and point2 in this situation. The points may be represented in pixels, position or percentage. Below is an example of a gradient in “webkit” and “moz”:

    The Code: 

  • #content #main .post {
  • background: #23adad; /* Fall back */
  • /* Webkit Gradient Background */
  • background: -webkit-gradientlinear,left bottom,left top,color-stop(0.06, rgb(119,158,18)),color-stop(0.53, rgb(155,190,45)));
  • /* Mozilla Gradient Background */
  • background: -moz-linear-gradient( center bottom,rgb(119,158,18) 6%,rgb(155,190,45) 53%);
  • }

As you can see, “webkit” and “moz” has a different way of implementing a gradient color. Not a lot of difference, but could be confusing for anyone on first few tries. Notice that there’s an additional “background” property declared on the first line? Well, this serves as a fall-back scenario.

In every piece of design, scripts and layout, we need to consider and ask ourselves this question “What if…?”. In this case, What if users browse your pages with an old browser that doesn’t recognize gradient property? Then, CSS shall take the value of the first line of the same property, as page rendering reads from the first line to the last. Therefore, whichever property’s value placed closest to the last line, shall replace the ones declared on top.

So, what’s with the multiple ID selector doing there? Well, I shall be covering on this in the next topic.

Grouping And Nesting Selectors

When it comes to grouping and nesting, it is about organizing a set of selectors that belong to a group or section like “headers”, “footers”, etc, specifically targeting a class or ID that exist within the declared parent selectors, or modifying a group of selectors in which you wish to apply same styles and positioning.

grouping and nesting selectors

As I mentioned before, page renders from the first line to the last. CSS does the same. Except that when it comes to the selectors, it is not from left to right. It is from right to left, which means descendent selectors to ancestor selectors. Whichever placed on the left is considered the outer most container.

Nesting Selectors

    The Code: 

  • #content #main .post { background: #222; }
  • #content #main .post p span { color: lightblue; }

It is generally a good practice to do this as it is easy to trace back to its parent element, without having to worry about over-ridding each other. Imagine this, you want lightblue for this first paragraph in “#content #main”, and red for the second paragraph in “#content #main .post”.

    The Code: 

  • #content #main p { color: lightblue; }
  • #content #main .post p { color: red; }

If you were to settle yourself with just the first set of style, you will see that whatever paragraph texts inside “#main”, will all rendered as lightblue. But if you include the second piece of styling, you will notice that whatever paragraph texts inside “.post” will turn red, but paragraphs oustide “.post” will still be blue.

Try doing this yourself, by copy pasting this set of code. You will see the differences:

    The Code: 

  • <div id=”content”>
  • <div id=”main”>
  • <p>test</p> <!– Paragraph inside ‘#main’ is lightblue –>
  • <div class=”post”><p>test</p></div> <!– Paragraph inside ‘.post’ is red –>
  • </div>
  • </div>

Grouping Selectors

    The Code: 

  • #content #main .post, #content #main .date { background: #222; }
  • #content #main .post a, #content #main .comment a { color: lightblue; }

Notice the comma between 2 sets of selectors? That is a grouping method. Why use grouping then? Here’s why:

    The Code: 

  • #content #main .post { background: #222; }
  • #content #main .date { background: #222; }

Aren’t they the same styling? By declaring it twice, CSS has to render extra lines. Imagine if you had a lot of styling to do for each elements, but are the same. Grouping is as simple as that. It helps you get organized without repeating yourself, reduce extra work for the browsers, smaller size of your file and maintaining of the stylesheet easier.

IE Conditional Stylesheet

Yeah, apparently Internet Explorer needs our unconditional love before it is willing to display whatever we want. A common practice is to include conditional commenting that only Internet Explorer would recognize.

For All IE Versions

    The Code: 

  • <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->

For IE Version 7 & Below

    The Code: 

  • <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie-7.css" />
    <![endif]-->

For IE Version 6 & Below

    The Code: 

  • <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-6.css" />
    <![endif]-->

For IE Version 8 & Above

    The Code: 

  • <!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-8.css" />
    <![endif]-->

As shown, these methods are called conditional commenting that should be located within “head” section of a HTML page. “lt” simply means “less than” and “gt” means “greater than”, but you don’t have to include all of them though. As more and more people use latest technology to present information online, users have to follow the lead and upgrade their browsers. And problem only arise when users used IE 7 and below, so targeting IE 7 and below should do just fine.

Resources

If you wish to step  into the depth of CSS, you may wish to take a look at these articles.

Smashing Magazinehttp://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

Tutorial Zine – http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/

Web Designer Wall – http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/

Gradient is confusing at times. And it is times like that, a simple tool is the hero. Here’s one of the many out there I would use for simple gradient effects.

CSS3 Gradient Generator – http://gradients.glrzad.com/

Having trouble picking colors to use on CSS? These tools could help.

Adobe’s Flash Kuler – kuler – Online Color Manager

Color Scheme Designer 3 – Color Scheme Designer 3

I hope you enjoy this simple tutorial I’ve compiled, and certainly hope you learn at least something from this tutorial. I would of course, appreciate if you would share this with others who are also interested by using the social icons located below. Thank You! Cheers.

The Beauty of Typography

Back to top ↑

Introduction

Seen those beautiful letters across the web, on the posters, graphics and arts? I’m sure most of you would love to put those up on your own website. So, I hope at the end of this article I am capable enough to teach you some simple techniques that might help you achieve what you want.

What is Typography?

I shall just briefly touch on what typography is, since I believe most of us have already heard of it or have come across it.

“Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques.” Quoted from Wiki

It simply means that our text is composed not only readable but also visually satisfying, or creates a mode of attention for readers. To know about it, you may wish to read wiki’s full article, or just google up “typography”.

http://en.wikipedia.org/wiki/Typography

Before I get started, I’m going to show you a few examples of some beautifully crafted websites that shows how beautiful typography can be. This might help you to get some knowledge of what typography really is, and hopefully inspire you with some great ideas in designing your own website.

@font-face for CSS3

After having a good look at how others manipulate these beautiful fonts, I’m sure you would love to have those as well. There are a few ways to achieve those effects, which I will share on the later part of the article. Now, let’s take a look at the CSS method. Its easy and simple to implement a new font in your CSS, for you to use on your contents.

    The Code: 

  • @font-face { font-family: 'New Font Name' src: url(Walkway_Bold.ttf); }
  • @font-face { font-family: 'New Font Name' src: url('http://www.example.com/newfont/Walkway_Bold.ttf'); }

The code above shows two basic methods in using a custom font on your website. The first one uses a font that you have uploaded to the server, in the same directory, while the second one will retrieve the font from an external source. In both situation, the fonts are provided/downloaded by your server or other servers you have linked to. Let’s take a look at using the local fonts.

    The Code: 

  • @font-face { font-family: 'New Font Name' src: local(Arial); }
  • @font-face { font-family: 'New Font Name' src: local(Arial), url(/fonts/Arial.ttf); }

This set of codes simply uses what is already pre-installed in the user’s computer, thus no downloading of fonts is performed. But what differentiates the second set of code from the first, is that if it happens that the user do not have that font installed locally, it shall then be downloaded externally.

Additionally, you may provide a format declaration for your new fonts if there is a need to. The use of the format values are usually for platform-specific font data. In this article, I will not go into that specific aspect. This is an example:

    The Code: 

  • @font-face { font-family: 'New Font Name' src: local(Arial) format('truetype'); }
  • @font-face { font-family: 'New Font Name' src: local(Arial), url(/fonts/Arial.ttf) format('truetype', 'opentype'); }

If you do require a list of the type of formats available, these are the few of which are used.

String Extension
“Truetype” .ttf
“Opentype” .ttf , .otf
“Truetype-aat” .ttf
“Embedded-opentype” .eot
“SVG” .svg , .svgz

The techniques above only embeds the font into your “font-family” list. In order for you to use it in your content, you will have to include it in that particular element’s “font-family” selection. An example would be:

    The Code: 

  • @font-face { font-family: 'Walkway' src: url(Walkway_Bold.ttf); }
  • h1 { font-family: ‘Walkway’, Arial; font-weight: bold; font-size: 20px; }

Notice that a second font is declared? Just like your normal selection of “font-family”, if the first font is not available, the second one shall be used. In this case, I selected a web safe font. Speaking of web safe, now that I have shared the technique of applying a custom font, it is always good to know what are the fonts that are considered safe.

Web Safe Fonts

The term “Web Safe Fonts” indicates that the list of fonts that are available throughout all platforms. These fonts are also common in our local font library, therefore there is in no way such fonts, when used on web, will be unavailable. Just to list out a few, these fonts are considered web safe.

Serif Fonts

  • Cambria
  • Constantia
  • Georgia
  • Palatino Linotype
  • Times New Roman

Sans Serif Fonts

  • Arial
  • Arial Black
  • Calibri
  • Century Gothic
  • Helvetica
  • Impact
  • MS Sans Serif
  • Tahoma
  • Verdana

Monospaced Fonts

  • Courier New
  • Courier

If you wish to take a look at a list of beautiful web safe fonts, visit:

http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css

Where Do I Get These Fonts?

Now that CSS3 and all major browsers support such techniques, more and more font library websites, tutorials, etc, surfaced on the WWW World. These are the few places I frequent to see some beautiful and popular fonts people like:

There are of course, many others out there. Seek a few out to widen your library as some beautiful fonts are not available throughout all sources.

But please do take note about copyrights and infringements. These people created beautiful fonts for us to use for free, only to hope that we do not abuse or misuse them. So do respect their work. Some may state “free for personal use only”, “Free for commercial use” or both, while others could possibly be copyrighted or under Creative Commons License: http://creativecommons.org/licenses/by-sa/3.0/

Are There Any Other Methods?

Of course there are many other methods available online. The web has everything that you may possibly need. As promised, I will be sharing other methods you could use to achieve the same effect. The first, of course is paid services. There are a few websites that provide Web Font Embedding, but they require either annual/monthly payment, or one-time fee. I shall touch on those later.

Let’s go on to free. Something which everyone loves the most. Thus far, I have seen many instances of Google font usage. They provide easy implementation, most important of all, free, as well as some custom fonts. Although not much selections in their library yet, it helps you to break free from those common and boring fonts. I’m going to guide you through this, as some might be afraid to meddle with the source codes of their website.

Google Font Library

Google Font Library @ http://code.google.com/webfonts

Navigate yourself through Google’s web font library. Then, from there choose a font you wish to use on your website.

Google Font Details

Google Font Details

Google Character Sets

Google Character Sets

There are 4 tabs in this page, mainly: Specimen, Character List, Description, Get The Code. In the Specimen tab, you will get to see the various styles and sizes of the font after you have selected the font. While at the Character List, well, you will see the font’s character style. It is pretty straight forward here.

Google Embed Font Code

Google Embed Font Code

Here is the key to get your new font to work on your website. The first line of code is the Stylesheet’s link from Google’s CDN server. What you have to do here, is to scroll all the way to the top of your source code, then paste that line of code within the “<head></head>” portion. Below is a screenshot of an example for you to take a look.

Place it within the header

Place it within the header

Just as the guide I have provided above, declare the new font in the element you wish to use. Now, have you got it? Well, there you go! You have a new and beautiful font on your own website! If you do happen to like the font, or wish to upload to your own server, google allows you to download the fonts.

Google Download Font

Google Download Font

Alternatively, you may wish to use the common way to beautify your website- the PNG format. Get the font from the libraries, open up photoshop, style your word, save it for web devices in PNG format. Then, set it as either “<img/>” or as background in CSS. Of course, the latter is considered less efficient as it is not as SEO friendly as text-based contents or image tags with title/alternate text attributions.

If I Wish To Use Paid Services..?

Well, if after reading my tutorials on embedding your own fonts, you find that you would prefer such services provided to you instead, there’s a list compiled online, for your ease.

For more details about which is better, do check out this article @ Smashing Magazine.

http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

Conclusion

As CSS3 and HTML5 continues to flourish in the WWW world now, more and more designers or website owners are cutting down the usage of image. It helps their website to be more user-friendly, saves loading time, a more professional look( people would go WOW! how did they pull that off without an image?!), and easy to implement.

Using animation from JQuery or recent CSS3, we created a more interactive website for people to browse. Typography has become a big part of a design, content as well as a form of art. Yet without a proper way to implement such typography, we have to resort to using images. With @font-face, and it being supported in all browsers now, we can easily pull off beautiful and stunning typography. Say good bye to boring and common contents! Hope this article will be useful for people who has interest in typography.

Mobile Web: What and How?

Back to top ↑

Introduction

Before you go wondering what this is all about, I have to say that it has nothing to do with “popular mobile of the year”, “2010 best smartphones”, nor any advertising of any of the listed phones. This post is only meant for additional information for anyone who loves designing. Be it web, app, or any possible other things, mobile is now in our list of device and screen resolutions to be considered.

As the mobile devices gain popularity, the usage of mobiles to surf the web increases. As a result, when we design a website, we have to develop a seperate design for the mobile devices. There are quite a number of popular smartphones in the market now, and here’s a short list of screen resolutions for those devices:

  • Apple iPhone 3GS – 320 x 480 pixels
  • Apple iPhone 4 – 960 x 640 pixels
  • Samsung Galaxy S – 800 x 480 pixels
  • Samsung Epic 4G – 800 x 480 pixels
  • HTC Evo 4G black (Sprint) – 800 x 480 pixels
  • Verizon HTC Droid Incredible – 480 x 800 pixels

CSS3 For Mobile

Now that we know the sizes, how do we detect if user is using a smaller resolution? CSS’s @media queries allows you to style your layout based on the screen size the users are browsing with. An example of such technique:

    The Code: 

  • @media screen and (max-width: 1400px) { background: #000; }
  • @media screen and (min-width: 900px) { background: #fff; }

The “screen” after @media, simply refers to the type of presentation. E.g. print, screen, etc. By default, @media queries targets all type of presentations, unless specified otherwise. Therefore, putting an “all” into the @media queries is the same as not putting any, as shown below:

    The Code: 

  • @media all and (max-width: 1400px) { background: #000; }
  • @media (min-width: 900px) { background: #fff; }

The “max-width” and “min-width” condition applies for the size of the browser the user is on, but to specifically target a device, there is a seperate set of condition you could apply for better results.

    The Code: 

  • @media screen and (max-device-width: 800px) { background: #000; }
  • @media screen and (min-device-width: 600px) { background: #fff; }

Alternatively, if you think its best to seperate different set of CSS for devices, you may wish to use this particular HTML coding.

    The Code: 

  • < link rel=”stylesheet” media=”screen and (max-device-width: 800px)” href=”example.css” />
  • < link rel=”stylesheet” media=”screen and (device-aspect-ratio: 16/9)” href=”example.css” />

For best practices, I would suggest separating a device CSS from the standard CSS styling. Speed – It is only logical to load the stuffs that are required for the website to work. Why load something more? This particular factor is important for mobile devices as speed is the key. We have limited speed, usage and connectivity as we move.

Inspirations For Mobile Web

 

Mail Chimp Mobile

Mail Chimp Mobile: http://mobile.mailchimp.com

Kt Tape Mobile

Kt Tape Mobile: http://m.kttape.com

In most mobile web, styles and graphics are reduced to the minimal to keep a clean and neat interface for users to browse easily. In some cases, JQuery and ajax are still used to maximize the potential a mobile device is capable of giving. Such technique creates an interactive user interface without having users to re-load or leaving the page.

Conclusion

I believe that web on mobile shall continue to increase its popularity, all thanks to iphone which started to heavily influence its consumers in using it anywhere and everywhere. With their larger screens, its so easy to read and surf the web now compared to the past. Now, the entire mobile market starts using the same concept, and the trend is born.

If I do miss out any important key points to note, or mistakenly assume something please do tell me, as I made this post in the hopes of sharing what I have already know to everyone.