3 Firefox Plugins To Test Your Website In Different Resolutions

One of the difficulties in designing for the Internet is figuring out what your site would look like with different screen resolutions.  A while back the most common screen resolution was 800×600.  Later, as computers improved and screens got larger, the most common screen size was 1024×768.  Now, monitors are larger than ever and there are many different sizes going on.  One of the tasks of a web designer is to see what their site will look like at the most common resolutions (check out ViewLike.Us).
Well there are also Firefox add-ons that will make the task of testing your website in different resolutions easier.  Here I have listed 3 Firefox add-ons to choose from. In fact, each add-on I will be sharing with you will have appeal for different types of users.  Different users find different types of shortcuts quicker and easier.  Which one is right for you?  Let’s find out by taking a quick peek at each of them.

Firesizer

The first one is called Firesizer.

Utilizing this add-on probably couldn’t be any easier!  Basically look to the bottom bar and you’ll see where your current window size is indicated…

In order to change the size of your browser window, just right-click the size indicator…

Ads by Google

Web Design Offers www.logic-designs.com
Want To Create A Website Logic Designs Offer 25% Discount Be Hurry

Free Time-Tracking Soft www.actiTIME.com
Web-based Time Tracking Software. Download Free Version or Try Online

Watch Free Videos www.FilmFanatic.MyWebSearch.com
Watch Full-Screen, High-Res Movie Clips & Trailers - Download Free!

The Latest on HTML5 www.htmlgoodies.com/html5/
Get the latest articles now at: The HTML5 Development Center

There are three common sizes to choose from.  You can either add a customized size by clicking “Customize…” and adding your own size…

Or you can just click “Save current size” in order to save the current size of the browser window to add it to the list of sizes…

That is how easy this add-on really is!  Can you think of a quicker or easier way to test website in different resolutions?  I sure can’t!

ResizeIT

The second Firefox add-on this article will be covering is ResizeIT.

ResizeIT brings keyboard shortcuts to the table!  Basically you can set different sizes to the 4 shortcuts and, all of a sudden, testing your web projects at different resolutions becomes even easier!  They shortcut combos are ALT-1, ALT-2, ALT-3 and ALT-4.  By going to the TOOLS menu, choose Add-ons, and click the options button next to the ResizeIT label.

As you can see, you can actually choose the size settings for the combos.

Yet Another Window Resizer

The last Firefox add-on this article will be covering is Yet Another Window Resizer.

For the mouse users out there, this one is for you!  That’s because resizing your Firefox window is just a right-click away!  Right-click anywhere on a page and the “Resize Window” option shows up at the bottom of the menu.

Just like the other add-ons covered here, you can also set custom sizes.

So there you have it, three Firefox add-ons that make it ieasy to test website in different resolutions.  One gives you access in the statusbar (Firesizer), one using keyboard shortcuts (ResizeIT), and yet another via the right-click menu (Yet Another Window Resizer).
There are other ways of testing websites in different resolutions.  One way is to have a second monitor with a different resolution set (as mentioned in this article).  What other ways do you, the readers, have for testing websites (and other projects) in different screen resolutions?

Designing Websites For All Screen Resolutions

Professional Dreamweaver Templates!

Tutorial on Designing for 800 x 600, 1024 x 768, 1280 x 1024 and higher
Designing web sites to fit all resolutions is a very important web design principle. Try out the Entheos site in all resolutions higher than 800 x 600 and you will find that it is designed to fit the page exactly. Therefore, visitors who have higher resolution can see more content in one page which reduces scrolling. Most web sites are designed for only one resolution. They may look perfect in a 800 x 600 resolution but if viewed in a 1024 x 768 resolution look a little empty. You'll find a lot of wasted space around it making the web site look quite small.
From our research we have found that majority of our viewers are on the 1024x768 resolutions and higher. As time goes by more and more people are going to switch to higher resolutions as seen by our site statistics. It is therefore very important to design web sites for all resolutions. That is one of the principles we follow while designing web sites for our clients. With that bit of background information, lets get started on how to design a web site for all screen resolutions.

Step 1: Decide on the lowest Screen Resolution

Before you start you need to decide on your lowest screen resolution. Your web site will have to be designed keeping the lowest resolution in mind. Through our research we have found that less than 0.5% are on the 640 x 480 resolution So we ignore that completely. The next important resolution is the 800 x 600 resolution. Some of our visitors are on this resolution so we use this as our lowest screen resolution. This means that our web site has to fit all resolutions equal to or higher than 800 x 600.

Step 2: Design Your Web Site On This Resolution

Once you decide on your lowest screen resolution you need to design your web site for that resolution This means that all your graphics will be designed for this resolution. Design your web site and export the images as you would normally do.

Step 3: While converting your design to HTML make sure all your tables are measured in terms of percentages

Important: This is the trick to developing web sites for all resolutions. You need to work in terms of percentages and not pixels. If you work in pixels you are giving an absolute measurement to a table, whereas working in percentages gives a relative measurement. The table will be a given percentage of the screen resolution.
I hope you have understood this clearly. I'd like to explain this with an example. If you were to design a site for a 800 x 600 resolution, you would probably make a table with width 800 px and height 600 px. Now if you were to design a web site for all resolutions you need to make a table with width and height 100%, so that whatever the screen resolution may be the web page will scale to fit the page. It will be 100% of the screen resolution or whatever percentage you choose to give it.
The first step is to make a table with 100% height and 100% width. You could make it 95% if you want some white space around it.

Step 4: Within the table measure cells in terms of pixels except for the cell for the content

This a another very important step. You need to give a fixed measurement to all your cells except for the content cell. You can leave this cell blank.

Simple Web Site Demonstration

Check this out at 640 x 480, 800 x 600 and 1024 x 768 resolutions

	Web Site for All Resolutions
Menu Bar Link 1 Link 2 Link 3	Content This is a sample web site layout that demonstrates the design of web sites for all resolutions..... This is a sample web site layout that demonstrates the design of web sites for all resolutions.....

Notes:

• The width and height are 100%
• The first and last columns are given fixed measurements of 120 px and 10 px respectively
• The middle column (content column) is given no measurement so that it will scale to fit the page.
• The same logic is used for rows (for the height). All the rows have a fixed height except for the content row which will scale to fit the page.

Example 2 - Only the Header

Check this out in 640 x 480, 800 x 600 and 1024 x 768 resolutions

G

O

D

W

I

T

H

I

N

HTML Code

(Each cell is 9%) Step 5: Insert images and content Once you have designed your tables in terms of percentages you need to insert your images and content. The usual layouts will probably have a logo which can come on the top left corner and your navigation buttons in the top right or left navigation bar. For more complex layouts you will need to use background fills to design your web sites. Remember since you are designing web sites to fit all resolutions you need to position your images accordingly (for your header). The easiest principle I follow (if possible) is to use the top left and right corners for fixed images and let the middle tile according to the size of the page. Step 6: Test your site in all the resolutions The last step is to test your site in all the resolutions that are available on your computer. To do this you need to: Right click on your Desktop and click on Properties Click on the tab Settings Under Desktop area click shift the scale to 800 x 600, 1024x768 or higher if possible Once you have chosen the resolution you want to check the site in, click on the Test button If you can see the bitmap clearly you can click on Apply Check your site in all the resolutions and if it is working fine you've successfully designed and developed a web site for all resolutions. Congratulations!

PDO vs. MySQLi: Which Should You Use?

When accessing a database in PHP, we have two choices: MySQLi and PDO. So what should you know before choosing one? The differences, database support, stability, and performance concerns will be outlined in this article.

---

Summary

	PDO	MySQLi
Database support	12 different drivers	MySQL only
API	OOP	OOP + procedural
Connection	Easy	Easy
Named parameters	Yes	No
Object mapping	Yes	Yes
Prepared statements (client side)	Yes	No
Performance	Fast	Fast
Stored procedures	Yes	Yes

---

Connection

It’s a cinch to connect to a database with both of these:

1 2 3 4 5 6 7 8 9

// PDO $pdo = new PDO("mysql:host=localhost;dbname=database", 'username', 'password');   // mysqli, procedural way $mysqli = mysqli_connect('localhost','username','password','database');   // mysqli, object oriented way $mysqli = new mysqli('localhost','username','password','database');

Please note that these connection objects / resources will be considered to exist through the rest of this tutorial.

---

API Support

Both PDO and MySQLi offer an object-oriented API, but MySQLi also offers a procedural API – which makes it easier for newcomers to understand. If you are familiar with the native PHP MySQL driver, you will find migration to the procedural MySQLi interface much easier. On the other hand, once you master PDO, you can use it with any database you desire!

---

Database Support

The core advantage of PDO over MySQLi is in its database driver support. At the time of this writing, PDO supports 12 different drivers, opposed to MySQLi, which supports MySQL only.
To print a list of all the drivers that PDO currently supports, use the following code:

1	var_dump(PDO::getAvailableDrivers());

What does this mean? Well, in situations when you have to switch your project to use another database, PDO makes the process transparent. So all you’ll have to do is change the connection string and a few queries – if they use any methods which aren’t supported by your new database. With MySQLi, you will need to rewrite every chunk of code – queries included.

---

Named Parameters

This is another important feature that PDO has; binding parameters is considerably easier than using the numeric binding:

1 2 3 4 5 6 7 8 9

$params = array(':username' => 'test', ':email' => $mail, ':last_login' => time() - 3600);   $pdo->prepare('    SELECT * FROM users    WHERE username = :username    AND email = :email    AND last_login > :last_login');   $pdo->execute($params);

…opposed to the MySQLi way:

1 2 3 4 5 6 7 8

$query = $mysqli->prepare('    SELECT * FROM users    WHERE username = ?    AND email = ?    AND last_login > ?');   $query->bind_param('sss', 'test', $mail, time() - 3600); $query->execute();

The question mark parameter binding might seem shorter, but it isn’t nearly as flexible as named parameters, due to the fact that the developer must always keep track of the parameter order; it feels “hacky” in some circumstances.
Unfortunately, MySQLi doesn’t support named parameters.

---

Object Mapping

Both PDO and MySQLi can map results to objects. This comes in handy if you don’t want to use a custom database abstraction layer, but still want ORM-like behavior. Let’s imagine that we have a User class with some properties, which match field names from a database.

1 2 3 4 5 6 7 8 9 10

class User {    public $id;    public $first_name;    public $last_name;      public function info()    {       return '#'.$this->id.': '.$this->first_name.' '.$this->last_name;    } }

Without object mapping, we would need to fill each field’s value (either manually or through the constructor) before we can use the info() method correctly.
This allows us to predefine these properties before the object is even constructed! For isntance:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$query = "SELECT id, first_name, last_name FROM users";   // PDO $result = $pdo->query($query); $result->setFetchMode(PDO::FETCH_CLASS, 'User');   while ($user = $result->fetch()) {    echo $user->info()."\n"; } // MySQLI, procedural way if ($result = mysqli_query($mysqli, $query)) {    while ($user = mysqli_fetch_object($result, 'User')) {       echo $user->info()."\n";    } } // MySQLi, object oriented way if ($result = $mysqli->query($query)) {    while ($user = $result->fetch_object('User')) {       echo $user->info()."\n";    } }

---

Security

Both libraries provide SQL injection security, as long as the developer uses them the way they were intended (read: escaping / parameter binding with prepared statements).

Lets say a hacker is trying to inject some malicious SQL through the ‘username’ HTTP query parameter (GET):

1	$_GET['username'] = "'; DELETE FROM users; /*"

If we fail to escape this, it will be included in the query “as is” – deleting all rows from the users table (both PDO and mysqli support multiple queries).

1 2 3 4 5 6 7 8 9

// PDO, "manual" escaping $username = PDO::quote($_GET['username']);   $pdo->query("SELECT * FROM users WHERE username = $username");   // mysqli, "manual" escaping $username = mysqli_real_escape_string($_GET['username']);   $mysqli->query("SELECT * FROM users WHERE username = '$username'");

As you can see, PDO::quote() not only escapes the string, but it also quotes it. On the other side, mysqli_real_escape_string() will only escape the string; you will need to apply the quotes manually.

1 2 3 4 5 6 7 8

// PDO, prepared statement $pdo->prepare('SELECT * FROM users WHERE username = :username'); $pdo->execute(array(':username' => $_GET['username']));   // mysqli, prepared statements $query = $mysqli->prepare('SELECT * FROM users WHERE username = ?'); $query->bind_param('s', $_GET['username']); $query->execute();

I recommend that you always use prepared statements with bound queries instead of PDO::quote() and mysqli_real_escape_string().

---

Performance

While both PDO and MySQLi are quite fast, MySQLi performs insignificantly faster in benchmarks – ~2.5% for non-prepared statements, and ~6.5% for prepared ones. Still, the native MySQL extension is even faster than both of these. So if you truly need to squeeze every last bit of performance, that is one thing you might consider.

---

Summary

Ultimately, PDO wins this battle with ease. With support for twelve different database drivers (eighteen different databases!) and named parameters, we can ignore the small performance loss, and get used to its API. From a security standpoint, both of them are safe as long as the developer uses them the way they are supposed to be used (read: prepared statements).

So if you’re still working with MySQLi, maybe it’s time for a change!

40 Seriously Awesome MooTools Tutorials and Plugins

MooTools is a lightweight, object-oriented and very popular framework for JavaScript, written in JavaScript which can spice up the interactivity and beauty of your site. User interface plays an important role in the success of any website; JavaScript, CSS and AJAX are commonly used to provide users the leisure of rich user interface over past few years. But using one of the most popular JavaScript libraries, MooTools you can add extra smoothness and interactivity in your website. In this post we have covered some MooTools tutorials and plugins which can be very handy if you are just entering in the world of MooTools.

1. How to Auto Caption Images Using MooTools

In this tutorial your will write a simple script that will select all images with the class of captioned, Take its title attribute or alt attribute and Display it right below the image.

Read Full Tutorial
Demo

2. Sexy Alert Box

Sexy Alert Box replaces old fashion and abruptly appearing alerts with good-looking ans smoothly appearing Alerts using MooTools 1.2 or up.

Read Full Tutorial
Demo

3. AJAX Username Availability Checker Using MooTools 1.2

Almost every website offering membership to its readers needs username availability checker to facilitate users in a way that they know if their desired username is available or already registered on the specific site. So here is a tutorial on how you can implement a username availability checker using MooTools 1.2.

Read Full Tutorial
Demo

4. AutoCompleter

You must have noticed Google giving suggestion about your search queries in a drop down. This Auto-completer script provide the same facility for text suggestion and completion using MooTools.

Read Full Tutorial
Demo

5. AutoGrow Textarea MooTools Plug-In

This MooTools plug-in expands a text-area as the user types something in it.  This version is based on the jQuery plug-in developed by Chrys Bader (www.chrysbader.com).

Read Download Plug-in
Demo

6. Background Animations Using MooTools

Mootools a JavaScript framework made animation very easy. This tutorial will show how you can use animated effect in your website.

Read Full Tutorial
Demo

7. Better Pull Quotes with MooTools

This tutorial will use MooTools to create a great-looking pull quotes which will automatically display quotes without repeating any content.

Read Full Tutorial
Demo

8. Create a Quick MooTools Slideshow with Preloading Images

This code will let you learn how to create a simple image slideshow using MooTools with the feature of pre-loading the images; which looks more elegant and enhance the pleasure of viewing the images.

Read Full Tutorial
Demo

9. Create a Simple, Powerful Product Highlighter with MooTools

In this tutorial we’ll be creating a flexible tool for highlighting the products or services available on your website using the MooTools; a JavaScript framework.

Read Full Tutorial
Demo

10. Create a Spectacular Photo Gallery with MooTools

In this tutorial, you will learn to combine many of MooTools’s features to create a nice and simple photo gallery.

Read Full Tutorial
Demo

11. Create a Sprited Navigation Menu Using CSS and MooTools

In this tutorial your will learn to create a sprited navigation menu using CSS and Mootools

Read Full Tutorial
Demo

12. Create an Animated Sliding Button Using MooTools

Every website should have attractive and good-looking buttons to gain the attention and attraction of readers. If you want to be a successful website owner you need to be creative and should not use the old style boring buttons. In this tutorial you will learn to create an animated sliding button using MooTools.

Read Full Tutorial
Demo

13. Create Snook-Style Navigation Using MooTools

This tutorial will teach how you can use an image and Mootools to create a slick mouse-over effect.

Read Full Tutorial
Demo

14. Create Twitter-Style Dropdowns Using MooTools

Well, everybody must have seen the drop-down login menu to twitter. This tutorial will teach you how you can duplicate that functionality of twitter like drop-down menu using MooTools.

Read Full Tutorial
Demo

15. Facebook Sliders With MooTools and CSS

This tutorial will explain how to create Facebook-style sliders that control the height, width, and opacity of an image.

Read Full Tutorial
Demo

16. FancyForm

FancyForm script replaces old checkboxes with the new interactive and flexible checkboxes with Tick being the sign for checked option and cross for the unchecked option.

Read Full Tutorial
Demo

17. iPhone-Style Passwords Using MooTools PassShark

In this tutorial you will learn how to create a iPhone-like password field, showing the most recently typed character and hiding previous per normal password fields.

Read Full Tutorial
Demo

18. JavaScript drop down menu using Mootools

Drop down menus are very important for any website layout and beauty. So in this tutorial you will learn to create a very easy and unobtrusive drop down menu using MooTools Core Build and the Fx.Slide.

Read Full Tutorial
Demo

19. Kroppr

Kroppr is an image cropping tool for your website that allows users to rotate, re-size and crop images with minor changes to your site.

Read Full Tutorial
Demo

20. Milkbox

Milkbox is a simple and sleek lightbox clone written for MooTools.

Read Full Tutorial
Demo

21. MooFlow

MooFlow give you a completely awesome browsing experience on your website, almost same as you get on apple.com for viewing the products.

Download
Demo

22. mooRainbow

Description
Download
Demo

23. mooSlide

mooSlide replaces common lightbox with Ajax one. You can have any type of content in it like HTML or FLASH, it can slide from top or bottom. It can be very handy to create beautiful sliding login panel.

Download
Demo

24. MooTools CountDown Plugin

I assume every one have used rapidshare at least for one time and had to wait for some seconds for the downloading starts. Using MooTools you can make a similar CountDown plugin by the use of which you can implement the same system that rapidshare is using.

Original Link
Demo

25. MooTools Kwicks Plugin

MooTools Kwick Plugin will enable you to have a hidden detail of an image displayed when you take your cursor on that image.

Original Link
Demo

26. MooTools Zoomer Plugin

Zoomer provides an elegant method for zooming in on large images.

Original Link
Demo

27. Morph Effect on mouseenter/mouseleave with Mootools

In this tutorial you will learn to add an elegant morph effect on unordered list on mouseover.  Demo can elaborate more about this tutorial.

Tutorial
Download
Demo

28. Sexy Animated Tabs Using MooTools

If you have less space and more content to display then you can use tab systems. This tutorial will show you how to create sexy and animated tabs which can handle lot of content in little space.

Read Full Tutorial
Demo

29. Sexy sliding JavaScript side bar menu using mootools

A sliding menu can help you to save a lot of space on your website. This tutorial will use MooTools to create a sexy sliding side bar menu with very smooth sliding effect.

Read Full Tutorial
Demo

30. Sliding Labels Using MooTools

This tutorial will teach you to create sliding labels using little jQuery code. Luckily the effect doesn’t require much MooTools code either!

Read Full Tutorial
Demo

31. Smooth Scrolling with MooTools Fx.SmoothScroll

Learn to create smooth scrolling effect using MooTools Fx.SmoothScroll.

Read Full Tutorial
Demo

32. TableGear

TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.

Download
Demo

33. Two CSS vertical menu with show/hide effects

This is a simple tutorial which will teach you to create two vertical menu with hide/shoe effect. One example will use Simple JavaScript and other will use MooTools.

Read Full Tutorial
Demo

34. Using CSS and Mootools to simulate Flash horizontal navigation effect

This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.

Read Full Tutorial
Demo

35. Using MooTools to Instruct Google Analytics to Track Outbound Links

Google Analytical provides important information about your visitors and where they are coming from, and if you want to see what are the exit links then by using MooTools you can direct Google Analytic to track outbound links

36. Facebook-Style Modal Box Using MooTools

This tutorial will teach you to combine CSS, Facebook’s imagery and MooTools to create a stylish and lightweight Facebook like Modal Box.

Read Full Tutorial
Demo

37. SqueezeBox – Expandable Lightbox

SqeezeBox is an overly which is designed getting inspired from LightBox. It will display the images in the full size in the same window like LightBox.

Download
Demo

38. FancyUpload – Swiff meets Ajax

FancyUpload replaces unobtrusive, queued and multiple-file selection with a fancy animated progress bar. It is very easy to set up and completely customizable using CSS and XHTML.

Download

39. Create a Simple News Scroller Using MooTools

News scrollers are very common on internet because of their effectiveness. In this tutorial you will learn to create a simple news scroller using MooTools.

Read Full Tutorial
Demo

40. Checkbox Filtering Using MooTools ElementFilter

This tutorial will use MooTools ElementFilter to make a checkbox filter, for example if you are making a search box, when you type your search in the box, elements with matching text will automatically be checked!