PSD to HTML| seoSemanticXHTML BLOG » web design

Adding a slider to your Website using jQuery

admin — Mon, 12 Dec 2011 10:05:24 +0000

You can make the header part of your blog or Website more eye-catchy by using an image slider. However, you have to put efforts to create an image slider from scratch. To save your time and efforts, the most used JavaScript library is available online called jQuery. You can use jQuery to create an image slider with fewer efforts. In this write up, we will discuss how to create a jQuery sample slider for your Website. You can download the source files at the end of this article.

Tools

HTML/CSS/JS Editor – like Adobe Dreamweaver, Aptana Studio, Notepad++, or Notepad
Browser – like Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, or Opera

NOTE: We have used Adobe Dreamweaver to design the slider and tested in all above browsers.

Benefits of using this slider

This slider is cross compatible with all modern browsers like Internet Explorer 9, Mozilla Firefox 4, Google Chrome 11, Opera 11 and Apple Safari 5.
It loads up instantly.
It is quite easy to implement and extend its code.
Create a blank HTML file. It may have following code: -

Steps

1. Create a blank HTML file. It may have following code: -

Untitled Document

2. Link the following JavaScript files within the code.

● jquery.min.js

● jquery.cycle.all.js

You can also download these files from the zip file link given below. We suggest you neither to change the code of JS file nor to remove the comments specifying the original author and license.

Image Slider

3. Now, we will create a main container (div) to include the slideshow and its page numbering. We are including slideshow div in main and a blank nav div in slideshow.

4. You can add the images in slideshow div through tag. We are adding eight different images here.

We suggest you to add above code at the location where you want to add the slider. Please do not include HTML, head, and body tags (used here) if you are adding the code in a Content Management System or previously created Web page.

5. Let us come to the core command to cycle the images in the slider. You have to add the following script in the head tag.

● fx – is the name of the transition effect to be used. Its options mentioned below. You can visit Jquery Slider Browser Effects Page to view their effects. We have used fade in our sample.

○ blindX

○ blindY

○ blindZ

○ cover

○ curtainX

○ curtain

○ fade

○ fadeZoom

○ growX

○ growY

○ none

○ scrollUp

○ scrollDown

○ scrollLeft

○ scrollRight

○ scrollHorz

○ scrollVert

○ shuffle

○ slideX

○ slideY

○ toss

○ turnUp

○ turnDown

○ turnLeft

○ turnRight

○ uncover

○ wipe

○ zoom

● speed – specifies the speed of the transition.

● timeout – is the time period between slide transitions. This time period is in milliseconds.

● pager – specifies the element or selector string to work as pager container. We have specified #nav in it, which uses the nav div and displays buttons 1, 2, 3, 4, 5, 6, 7, and 8. It will create the as many page numbers as many images you will specify in the div slideshow.

● slideExpr – specifies the expression to select the slides. In our case, it is using the images (img tags) through its ‘img’ value.

6. Now, you have to specify the formatting of above tags through stylesheet code. We are using

Here,

● main – has the code to format div main.

● slideshow – has the code to format div slideshow.

● nav – specifies the code to display Page Numbers.

● nav a – contains the code of clickable pagers.

● nav a.activeSlide – has the code to modify the active page number.

● img.slides – has the code to format the images uploaded through img tags.

You are free to change the code as per your requirement.

Complete Code

Now, the complete code will look like below. If not then you can copy the below code as well for your work.

Image Slider

Output

The slider, created with above code, will be:jQuery Image Slider

Note: It is an image.

Download

Click here to download the jquery_slider_pager.zip file. It has following contents: -

jquery.min.js – has the code of jQuery Library in Google Ajax APIs.
jquery.cycle.all.js – has the code of cycle Plugin to rotate the images.
jquery_slider_pager.html: has the code to implement the jquery slider created above.
images: folder of image files used in sample slider created above.

We hope that you will find this post and the implemented code helpful for your work. We request you to provide your valuable feedback and suggestions through comments.

Site’s Speed Optimization for Better User Experience

Keshav — Thu, 01 Sep 2011 11:57:15 +0000

A website is weighed against various parameters in order to ensure that it enables a friendly user experience. One of these factors, which is of immense importance is the speed of the site or in other words, the time taken by the site to load itself. If a site loads fast, it allows users to quickly get the information they wish to know. This is an important consideration as users usually don’t prefer to wait for long. Also, having a fast site can create a competitive advantage for webmasters as site’s speed has made it to list of Google ranking factors. Therefore, efforts must be made to improve the speed of the site. We are going to highlight some of the effective ways of optimizing the site’s speed to enable a pleasant user experience.

Code –Optimize It First

It must be ensured that the source code is not bulky. The HTML and CSS documents must not contain unnecessary characters that may increase the file size and affect load speed. Optimizing the code is the basic thing to do.

Minimizing HTTP Requests

It is important to minimize the HTTP requests made to the server as they increase the downloading time, thereby decreasing the speed. Two effective ways to reduce the number of such requests include:

Using CSS Sprites

This is a useful way to lessen the number of image requests and it does so by combining all background images into a single image.

Combining Files into Libraries

Combining various files, say scripts and stylesheets, and creating their libraries is another way to reduce the number of HTTP requests.

External CSS and JS Files

It is a good practice to keep the CSS and JavaScript files as external components as this reduces the number of HTTP requests and thus leads to fast loading pages. As these files are cached, keeping them inline delays the rendering of the web page.

Make Use of Caching Systems

Caching systems are the best option as the files don’t need to be downloaded several times if these are used. They help load the site faster by caching all files. You can enable the Browser Cache, Page Cache and Disk Cache for your Website.

Optimize the Images

Images are known to increase the loading time, thus it makes sense to optimize them so that they don’t affect the speed negatively. There are several image editing software that can be utilized for this purpose. They allow saving images in different suitable formats such as PNG & JPEG while reducing the file size which ultimately results in fast loading site.

Usage of Content Delivery Network (CDN)

It is a great thing to make available the content across multiple locations across the globe so that users see it. In this regard, using a CDN can come handy and will allow the users to access the site easily; no matter how far they are located. A CDN does so by caching the content and making it available across distant servers so that the site downloads fast and users face no problems in seeing it.

Go for Gzip

Gzip Compression is an efficient means used by sites to reduce the size of various files whether HTML, CSS or JS, etc. Using Gzip reduces the response time and makes a site faster.

Keeping CSS at Top and JS at Bottom

To enable progressive rendering and make pages load faster, it is a good practice to keep CSS at the top of the page. On the other hand, having JS files at the end of the page helps as it then doesn’t prevent the browser from downloading other components.

Redirects Should be Avoided

For the simple reason that they cause delay and hamper user experience by taking more time, Redirects must be avoided to maintain a good speed for the site.

Site’s speed is important as it directly affects the users’ experience and is one of the ranking factors, therefore it must be dealt with serious attention. A site needs to load fast and allow users to quickly view the content.

We hope that the above mention practices provide some insights to our readers. We would be delighted to get suggestions and opinions from our readers.

Top 10 Sign Up Forms

Keshav — Tue, 19 Jul 2011 13:32:14 +0000

The Sign up form is an important perspective of a Website. We need a Sign up form to build the relationship with our regular visitors, readers, or buyers. If the Sign up form is not designed effectively then the number of visitors turning into regular users/buyers might not be impressive.

In this write up, we’ll highlight the top 10 Sign up forms and you can refer them while designing yours.

Geni

Open Geni.com, fill above form having three text fields and one radio button, and click on Start My Family Tree. Geni does not ask to verify the email address and enter a password when a visitor first time lands on its home page. It allows the visitors to start using its service.

While a visitor is enjoying its service, Geni sends an email to visitor’ email address with a default password and logged in him/her automatically. After allowing the visitors to save their family tree, it asks them to verify the email address and change the password. What a nice service indeed! You can use the same concept and allow visitors enjoying the services offered without forcing them to register first.

Nokia Ovi App Wizard

Nokia Ovi App Wizard allows visitors to create Nokia Ovi mobile application from the RSS feed of a Website, Twitter, YouTube and Facebook channels. It just engages the visitors to create the application on its landing page without forcing them to register first with Nokia Ovi.

Posterous

Posterous Sign up form

Posterous provides the easy to use blogging service. You have to enter details in just three text fields and click the large button ‘You’re almost there’ to start blogging. If you don’t want to do that even then Posterous gives an option to email your blog, they’ll publish it and create a login ID for you.

Tumblr

Tumblr Sign up form

Tumblr is another blogging service allowing users to post their articles, images, and host multimedia files. It only asks for three details: email address, password, and URL.

Twitter

Twitter Sign up Form

Twitter is a famous social networking micro-blogging service. It only asks to fill four text fields, checks the username’s availability on-the-fly, and doesn’t ask for ‘Re-enter your Password’.

There are ample amount of chances that user can forget the password if he/she is entering the password only once. Therefore, we suggest you either to ask password twice or in case of single password box, you should give a checkbox option to unmask/mask the password so that users can check what they’ve entered.

blekko

blekko sign up form

blekko is the new social search engine allow users to like and report spam the search results. There is no need to sign up if you want to search the Web using its slash tags. However, it requires you to login for liking and reporting spam the URLs appeared in search results. The best thing is that blekko checks the username’s availability instantly while you’re typing and modifies the validation as you change the text in user name box.

Amazon

Amazon Sign up Form

Amazon is a famous online store. It has integrated both Sign up and Sign in forms together. The new users can select ‘No, I am a new customer’ and click ‘Sign in using our secure server’. Amazon will send an email to the provided email address with the instructions to create the new account.

flickr

Flickr Sign up Form

Browse the flickr.com and it asks ‘Create a New account’. Click on this button and then a pop-up window appears asking to login with your Yahoo, Google, and Facebook accounts.

Reddit is the famous micro-blogging news service. The text fields like username, password, verify password, and CAPTCHA are marked as essential, whereas email is optional. Reddit has established its own library of CAPTCHAs and incoporates white alphanumeric words with net-shaped black background.

Delicious

Delicious Sign up Form

Delicious is the famous online bookmarking service from Yahoo! Yes, its sign up form is large but it shows the option to Check username availability as soon as someone types a name in the user name box.

Yahoo !

Header of Yahoo Sign up form

Yahoo.com has the traditional large sign up form but it currently adopted the functionality allowing users to sign up using their existing Google, Facebook, or any other Yahoo account.

Facebook

Facebook Sign Up

Like Tumblr, Posterous, and Geni; the social-networking giant aka Facebook shows the sign up form on its home page itself. The visitors have to enter the email address twice but password once. In addition, Facebook doesn’t ask for CAPTCHA and automatically sends the verification email to provided email address.

Conclusion

You can take inspiration from above sign up forms and design an innovative one for your Website. With invent of social login options, the visitors always like to sign up with their existing accounts on other trusted parties. We invite our readers to add more interesting and innovative sign up forms using links in their valuable comments.

The Best Tool to Design your Website

Keshav — Fri, 13 May 2011 06:04:37 +0000

There were around 266,848,493 Websites on Internet till December 2010 as per Netcraft Web Survey. 47 million new host names and 7 million active Websites were added till its survey. The number is still going on. If you are going to launch your Website in near future then it must have something unique so that you can get large number of regular visitors.

The first thing to be preferred by each visitor is the Website Design. Giving an eye-catchy and faster loading design is the key to get more number of visitors. And the Website design solely depends upon the tools being used for designing. In this write up, we’ll discuss three famous Adobe tools frequently being used for designing. However, we invite our readers to let others know about the tool being used and why.

Adobe Photoshop

Photoshop needs no introduction as it’s one of the excellent and popular software being used for Web & Graphic designing. It is the first choice of each Web designer to create regular, innovative, and creative designs for their clients or employers. Adobe Photoshop is raster based designing software and works on pixel based levels. You can create the large-sized images in it but when you scale them then they’ll look pixilated. That’s why Designing Industry Experts suggest using Photoshop only when you’re sure about the design size and other measurements.

Adobe Illustrator

The Adobe Illustrator is a vector-based graphic editor and is famous for creating vector arts. This is mostly being used for Print Media instead of Website Designing. However, this is the preferred to tools to generate the vector based image files like EPS and SVG. The graphics created in Illustrator doesn’t look pixilated even on high zoom out or low zoom in.

Adobe InDesign

Adobe InDesign is another vector-based application. It is mostly used to design books, newspapers, magazines, brochures, flyers, and posters. One can use Adobe Digital Suite InDesign to publish content on e-book readers and tablets.

What Do you Suggest?

Now, we invite our readers to tell which program they use in their Web designing and why. Please keep us informed and other readers of this article about the benefits of your opted Web designing tool. This will create awareness amongst us.

Web Design Trends Currently In Vogue

pratima — Mon, 11 Apr 2011 12:54:30 +0000

The art of web designing continues to evolve itself and defines new standards every day. Designers in their zest of creating unique Web designs keep on experimenting with various things. Also they have to conceptualize and design a site which meets the expectations of the visitors or their clients.

Some of the developments in web design industry turn out to become trends which are then followed to create appealing websites. Here we are going to discuss some of the latest trends that have caught the fancy of designers because of their effectiveness.

Web Design Trends To Watch Out

Interest in HTML5 and CSS3

Designers are taking keen interest in both HTML5 and CSS3 as they offer advanced features that can be utilized to make a site more effective.

HTML 5 highlights:

Canvas Element for graphics
New APIs
Video element
Drag and Drop

CSS 3 Features

Text and Box Shadow
Border Radius
Multiple backgrounds
Attribute Selectors
Border Image
Multi Column Layout

Use of Negative/White Space

A lot of importance is being given to the use of negative space which helps in presenting a clear picture to the users about the site. It refers to the blank space between the various elements of a site and helps the visitor to quickly scan the web page. It prevents the design from appearing cluttered and for this benefit; designers are making much use of the white space.

Focus on Typography

Using Typography to create high impact is something which designers have been doing for long. But now they are moving beyond to use not only web safe fonts, but are exploring wide variety of fonts to select a suitable typeface. At the same time they are also taking care of other typographical elements such as text size, style, line spacing, etc to create an attractive visual effect.

More Single Page websites

Given that visitors are always in a rush and it is difficult to retain their interest for long, In this regard, Single page websites present an effective solution as they provide the required information on a single page. The trend is gaining strength and one can witness single page sites already. However it is tough task for designers for they need to achieve a fine balance between the various elements and yet provide all necessary details without clutter.

Mobile friendly websites

The number of users who view sites using their iphones, iPads, touch devices, etc is already high and expected to grow even more. This necessitates the creation of mobile friendly websites. As a result, sites are being designed with much help from CSS3 so that they fit into the screens of mobile devices.

Infographics

With the use of Infographics, designers can present complex information which can be easily understood by the visitors. This is the prime benefit which has led to Infographics becoming a trend in web design.

Using Minimalism & Simplicity

Not to forget both these principles which though present from the very beginning have regained their importance. Designers have found new love for them as they help create powerful sites despite using a few elements. Minimalist and simple websites are easier to navigate and focus entirely on the content.

These are some of the web design trends that are much in use and one can observe many websites following them. We welcome our readers to provide more insights.

Dump The Tables for Layout Designing

admin — Tue, 01 Sep 2009 06:57:30 +0000

To layout the page structure and content, web pages were built using HTML. Tables were cell based similar to MS Excel and Word. With the advancement of web technology, tables have become obsolete in this new era of design. We draw tables whenever there is a need to display data, but we fail to understand the extent of annoyance tables create for the browser and reader. It is always advisable to not use tables as:

Erroneous – Tables gained popularity with HTML command – border=”0″ in the nineties. Though tables were never supposed to be a part of the layout but they still managed to survive.
Inconvenience & Inconsistency – Internet serves as the ideal medium for exchange of information. Any layout consisting table doesn’t allow easy accessibility. The table based content is not comfortably read by the screen reader, thus causing greater extent of inconvenience for the user. Any inconsistency in the flow of the content on the webpage disrupts the visual uniformity.
Large file size – the presentational data is mixed with the content and therefore increasing the file size unnecessarily.
Low Loading speed – The fast lives of people demand faster speed, but the tables ruin the loading time of the content. It becomes more difficult for users using mobiles or PDAs for web access.
Unfavourable for SEO – Tables are not SEO website friendly. Google is compatible with
and CSS layouts for the website. Tables create a hindrance while searching for the website making it difficult for the browser to optimize the website.
Uncompetitive – the web standards are improving and these grids for the layouts and images were unable to cope up with the improving web compliance, therefore lacked in providing a competitive edge.
Table-less CSS design layout was an ideal alternative in the modern web design world. Here are a few reasons why CSS tableless designs perform better than the standard page layout with tables.
The web designers can exploit their creativity and make the designs more complex while designing the layout. However, the table based layouts restricted the designers to remain rigid and inflexible.
The search engine rankings can improve with the CSS tableless design as the web page file size is smaller which reduces the code to conduct ratio. This allows the web spiders to crawl through the website easily and provide favourable rankings.
The CSS style sheets help to maintain visual consistency while running through the complete website. Any change in the layout or style can be changed easily in the same CSS document and the changes are instantaneously reflected in all the pages.
It is easier to update CSS based layout as it consumes less time.
Executing a re-design for the website is faster and less expensive. When we remove the presentational mark-up from the webpages, re-designing becomes less intensive.
The web designers can comfortably attach different stylesheets for different media types
The website becomes higly accessible as the navigation is easier for the users when the website is in CSS tableless layout. Users with disabilities or people using mobiles or PDAs have easy access as there are no spacers to restrict the accessibility.

15 Essential Checks Before Launching Your Website

admin — Wed, 15 Jul 2009 06:29:18 +0000

In this article, we are creating a checklist of all the basic but essential tasks which should be done and tested before launching any new website.

1. Loading time. It should be optimal. Check everything from video, flash, image to html, css, javascript. To see the list of a few tools to test page spped, see our article Tools to Analyze Page Loading Speed.

2. Favicon. It shows on the left side of the url in browser window. It plays a important role in branding. Code for favicon:

3. Website Title. It’s the first thing that shows on the top of a browser window. It is important from SEO point of view also. Code for Title: This Is My Website Title

4. Meta tags. Search engines take their data from meta tags. So they play a crucial role in SEO. Code for Meta tags:

5. Proofread all the content. Always double check the content. Make sure that everything is correct including spelling, grammar and punctuation.

6. Links. You can use this http://validator.w3.org/checklink to check if your website has any broken link.

7. Forms. Test contact/order or any other form(s) you have on the website. User should get proper feedback upon successful/failed submission of the form.

8. Email Address. All the email addresses provided within the site must be created already.

9. Copyright statement. Always double check the copyright statement.

10. Analytics. To measure success of your website and to see if it is meeting the expected goal, check the detailed behavior of users. It is mandatory to have some analytical application installed on the website. Common analytics tool are google analytics, Clicky, Mint and stat counter.

11. Sitemap. This helps a lot from SEO point of view. You should also submit the sitemap to Yahoo,Google and MSN/Bing. Sitemap also helps a user find the right page.

12. W3C validation. To make standard compliant website, I always validate my markup and CSS on w3C.
http://validator.w3.org/ – Validating markup
http://jigsaw.w3.org/css-validator/ – Validating CSS

13. Cross browser compatibility. Just to ensure that website is accessible across all major browsers I check my websites on Internet explorer 6/7/8, Firefox, Safari, Opera and chrome. To get more information, please visit our other article 10 helpful resources for cross browser testing.

14. Cross operating system compatibility. I always check my website on Mac, linux and windows.

15. Downtime & Server Speed. Downtime and slow server speed not only adversely effect the search engine ranking but also create a negative impact on visitors. Investment in fast and reliable hosting is always worthwhile.