What makes responsive great is that it doesn’t require a secondary website on a subdomain or sub folder destined for “mobile.” It’s the same web page files, content and structure. WIth CSS3 media queries, we’re able to set parameters for when the browser window is smaller than normal to automatically resize, push and move content around, or remove content that is not needed. Not only does this allow the mobile version to work on ALL mobile devices but makes it easy to update the content. You only need to update one website and not two to make sure the same information is delivered to the viewer no matter what they’re viewing the website on.

Take a look at the website, Awesome Smile, using your desktop browser. To see the “responsiveness” resize it smaller.

View Awesome Smile’s Responsive Website

Sure most things can be done with an HTML snippet. But that’s not exactly proper HTML creating. If you didn’t know, an HTML snippet actually creates an iframe where it loads a separate web page to display that element on the main page. Sometimes this is ok, but not always. You’ll want to make sure Google doesn’t index it (unless you want it to) and cache sometimes becomes a problem in iWeb, limited on the type of menus you can use, the list goes on…

So why not turn your iWeb site into WordPress or get it properly written? Depending on your iWeb design, you may be able to find a suitable WordPress theme. And if not, then finding a great framework to start with and then create a child theme to mimic your iWeb site is the next best thing. Another option is to write it in HTML and CSS from scratch and then add a Lite CMS (Content Management System) to it for easy editing afterwards.

Now, both options aren’t easy, especially if HTML codes scares you away. That’s why I’m here. Most of my original iWeb sites are now either HTML or WordPress sites and they look exactly the same as they did when I first created them. Well actually, they should be improved. Fully functional drop down menus, full site search, CSS3 buttons, proper H1-6 headings for page titles, shadows! Yes shadows. Adding text shadow to a body of text and not having it turn into a picture! Thanks iWeb… Ugh! Oh and if you think it was ok to do that, well it’s not. It may look amazing and work in all browsers, even IE, but it limits your SEO opportunities.

Moving to WordPress

If you think you can get your hands dirty with WordPress, then that is the above best way to go. And just to clear the air, I’m talking about wordpress.org not com. WordPress.org allows you to host your own wordpress installation. The benefits include: simplicity, blog features, SEO ready (for the most part), open source, meaning free, and very customizable with 1000′s of ready made themes. The best way of starting this adventure is by finding a theme that is closest to your own iWeb design. Then as a bonus, make sure it can use child themes to allow you easier CSS editing without the worry of theme updates messing up your alterations from the developer. Check out two sites that I originally wrote in iWeb and now are WordPress, Real Dentistry and New American Theater. The best part is that the owners of these two sites can now update and manage them without me or even knowing any code. Thanks to WordPress.

Now there is a lot more involved. You need to know HTML and CSS but not the whole book. If you’re iWeb has a blog then you need to transfer those post over, recreate all the pages, and spend a good number of hours learning the system.

The best way to approach WordPress for the first time is to download MAMP. Don’t download the pro, it doesn’t really add anything you need. Just download the regular version, which is free. Once you install MAMP, it will create a fully working Apache server on your Mac where you can access it with Safari just like any live website. This is what is referred as a local server. Now keep in mind that people outside your internet network will not be able to access it. Only your computer and other in your local network will be able to as it’s a closed system. Eventually, I’ll write a full post about Moving iWeb to WordPress, If you would like some help or would like to hire me to complete this for you, please drop me a line.

Moving to HTML with a Lite CMS

The other option would be to write your entire website from scratch using valid HTML(5) and CSS(3). Basic HTML4 and regular CSS will do well for most. the HTML5 and CSS3 languages help add effects and styles to your overall website. Just keep in mind that IE8 and lower doesn’t play well with these, but Safari, Firefox and Chrome love it.

So this one will require a lot more work. You need to know HTML and CSS. More than what you might have done with an HTML snippet. However, with practice you could master it quite well like I have. I started with iWeb and now I’m able to work in WordPress and write HTML from scratch. These two sites, Dino Hernandez and Sacred Heart Dental Care, were just recently redone in HTML and CSS3. They used to be iWeb based. Now they have nice drop down menu, sliders, CSS3 buttons, photo galleries and more. Check the source code and see what I mean then compare them to your iWeb site. Lets just say they’re half the size, run 10x’s faster, and SEO fully supported.

Once the site is made with valid HTML code, you can continue editing it on the code level or add a Lite CMS to it. There are a number of CMS’s available, Crushy, PageLines, Pulse, and Unify to name a few. I’m not really going to go into detail about each of these. I’ll save that for a Lite CMS post later on. But some of these are Free, Paid, self hosted, or they host it. You just need to add a class to an editable area in your HTML code to get it working. Then it works in the same manner like WordPress.

Is this something you would like done? Let me know and lets talk!

First a little background. CSS/CSS3 allows you to customize the appearance and reaction of your web elements. In regards to buttons, or call to action buttons, CSS will help you provide different styles when a user hovers and presses a button. Give it rounded corners, text shadow, and even gradient or image properties. This will work on all modern browsers, Safari, Google Chrome, Firefox, Opera. IE9 and the upcoming IE10 will utilize most of it but I’ve included the basic background color as a fall back. But rest assured all Mac users will see your beautiful CSS3 button in action!

So how do we add it to iWeb? All you need is an HTML snippet and a few minutes deciding the colors.

Lets start by adding the main styles for the button. Below is the first part of our overall snippet, the main a.button styles.

First we have the background-color which is the default solid color to fall back on. Next we have the gradient colors. The -webkit is for Safari, -moz is for Firefox, -o is for Opera, -ms and filter is for IE9+. These are gradients so the first number, #79affb, is the top color and the second number, #2b8df9, is the bottom color. Next we have a border radius of 20px to give our button rounded corners, a button width of 130px, and the font styles.

For the next state, we want to add a hover effect for the button when the visitor moves their mouse of it. Below you will see the “hover” code. All that is changed is the colors. I went a little darker for the top and bottom gradients.

Next add the active state. This shows when the user pressed the button. The colors here are reversed order.

Finally, we need to add the HTML link for the button to show in the HTML snippet. This is a typical <a href></a> link but with a class called “button”. The class will call the above scripts and apply the styles to any element with that same class of “button.” I also added a target to force the button to open in the same window as the current webpage and not the HTML snippet.

Place all above codes together into your HTML snippet and you will have a full CSS3 HTML button.

Image CSS Button

Now, if you want to full proof your button, then an image background should be used instead. Design your button in iWeb or any graphic editing application such as pixelmator or photoshop. Create three styles of the button all the same width and height. Below is the full source code:

Notice this code is a lot less. I’m using background: url() to call the image file with a position of 0 0. This tells the browser to draw the normal background and start at the top left corner of the image file. Next the hover and active only needs to have the new background positions since I’m using the same background file and the same styles. So the hover state is positioned at 0 -47px’s from the top left and the active state is positioned at 0 -94px’s from the top left.

Download the Source

Feel free to download the source file. I’ve included both buttons in the HTML file and the brown image background for the image button. I used iWeb and Pixelmator to create my image and had all three button images on the same canvas.

Download Source

About JotForm

JotForm is an amazing online service that allows users to create a complete form using a WYSIWYG editor right from their web browser. You can customize it to your complete happiness with text fields, dropdowns, radio and check buttons, payment gateways, HTML formatted text, print/clear/send buttons and more. Perhaps the best part is that JotForm is completely FREE for your basic use giving you a free risk to try the service. If you find you need more submissions, payments or data space then, you can upgrade to a higher (paid) plan. You view their plan options below.

The basic free plan provides you with a 100 submissions that resets each month. One of the greatest features is that you can create an unlimited number of forms to spread over all of your websites. Another great feature is the ability to provide a way for your viewers to upload files to you. JotForm allows you to include upload buttons on your form allowing the viewer to send one or multiple files to your JotForm account and/or Dropbox.

Finally, you can customize the form to your complete style preference by including the entire source code with style sheets onto your server. Or you can use the predefined themes provided by JotForm.

Quick video tour

Here is a quick video tour of JotForm from their website which explain most of the features.

A few examples

You can view examples of the different forms I have used on a number of my design websites.

NAT Contact Form ASD Testimonial Form Real Dentistry Appointment Form

How to include your new form into iWeb

1. After customizing your form to your hearts desire, head over to the Editor Menu and select either “Source/Script Code” or “Embed Form“.

2(a). Both of these codes will work. I have found that if you are using a custom “Thank You” text then you should use the Script Code. This will allow the message to appear inside the HTML snippet instead of a new page or directing you elsewhere. However, you can’t fully customize every aspect of the form.

2(b). Using the Embed will give you more options of placing it into your website and other platforms like Facebook, WordPress, Tumblr, Blogger, etc.

3. After you decide which to use, copy and paste the code into your HTML snippet and press apply. You will instantly see your form appear on your iWeb page.

Observations

Updating:

If you use the script to place into your HTML snippet, the entire form is hosted on the JotForm server with no customizations being made within iWeb. This will allow you an easy way of updating the form without updating iWeb because the form options are being handled by JotForm. By using the embedded code you will need to adjust the contents of the HTML snippet from iWeb and republish your site (or use a text editor and edit the widget(#).html file on the server bypassing iWeb).

Firefox:

Firefox adds a slight difference on how it handles the locations of each field of your form. If you only apply the HTML snippet, alot of times Firefox will end up cutting off the bottom of the form. This will also be aparent if you place required marks for certain fields. If the viewer doesn’t fill out that field, the form displays a “required message” that pushes everything else down, again causing the bottom of the form to disappear. This happens because the HTML snippet is a fixed height. Therefore, I always provide enough extra height to compensate firefox.

Backgrounds:

Each form allows you to change the background to color or image. I always use a #transparent setting so that my website background is used making the form look like it is part of the website and not an add-on widget.

Additional Help

JotForm has a great getting started section and forum on their website but if you need any advice or help integrating your HTML form into iWeb, please ask below in the comments.

Health Online Link Directory is the newest in online databases for health resources. It allows for healthcare professionals to list their practice, office, services, articles, and resources for public use in a modern and professional way.

Business owners are able to list their website using a Free Listing (limited) or Paid Listing opening full benefits of Health Online Link Directory SEO results. Subscribers are also able to manage their own accounts, edit their listings and advertise.

Visit Their Website

View Our Other Designs

About This Project

The website is a complete custom design from the ground up. No other website is like it in style, content and offerings. The overall design brings a peaceful, updated and professional look for Dr. Uy’s dental practice and her patients to enjoy.

Visit Their Website

View Our Other Designs

Also note, this website redesign was sponsored by my recent website giveaway last November 2010. A complete and FREE website design/redesign for a non-profit organization.

Visit Their Website

… drum roll please….

BlueSky Ads is the the new kid on the block to bring a new venue for people wanting to sell their items in a safe and enjoyable atmosphere. The website allows full control to the user for communicating, posting and editing their own ads at anytime. To bring the peace of mind to the viewers, BlueSky Ads approves and monitors each ad daily to make sure everything is top notch! Ads are free to post and all transactions are done between the seller and the buyer.

I recently had a online viewer ask a question about getting a particular jQuery slider working with iWeb. I figured this would be an excellent way to make a post about adding image sliders for our beloved iWeb platform.

NOTE: This tutorial will require you to get a little dirty as you will need to edit the HTML code and upload it to a hosting server, or MobileMe for it to work correctly in iWeb. Also make sure you read the license of using this code. Most of the time it is free to use personally but require a paid license for commercial use.

View Demo & Download Source

Step 1: Download the Source

First thing you need to do is head over to Slidesjs and download the source file (also located above). The download package will include two folders, one named examples and one named source. Within the example folder you will find 5 different way of displaying the slider; Images with titles, Linking, Product, Simple & Standard. For my tutorial, I will focus on using the Standard display of the slider.

Step 2: Time to get dirty; Editing the Code

Before we even think about adding the slider to iWeb, we need to format it to our liking. As stated earlier, I’m going to work with the Standard Example. Within the Standard folder, there is a css, img & js folder and a index.html file. The css folder contents will give you the look of the slider. The image folder will include all of the slider buttons and your slide images, and the js folder is the engine.

Since I am only using the Standard folder, I went ahead and renamed it to “slider” and uploaded the folder to my hosting server. If you are using MobileMe, you can upload it to your idisk’s public folder.

NOTE: The use of the public folder is only an example that I am using. Another location on your idisk would be /idisk/web/sites/foldername. If you are using a dedicated hosting server then you should publish iWeb to a local folder and then FTP to the directory. This way it doesn’t overwrite your sitefolder. However, you can also do the same and place the extra stuff in a separate folder on the server. For example, my hosting server uses a /public_html/ folder for the website files. I then place a folder on the root / for my extra elements like the slider.

After you have uploaded the slider folder, open the index.html file. You can view it by using your favorite HTML editor application (Textedit, Coda, TextWrangler, etc.).

Dont be too discouraged. It looks like mumbo jumbo but we will go through this piece by piece. Lets take the first part of the code, the head.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Slides, A Slideshow Plugin for jQuery</title>

	<script src="js/jquery-1.4.4.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>
	<link rel="stylesheet" href="css/global.css">
</head>

The head section will consist of the doctype,  link to the js files and the css file.

For each src=”" and href=”" you need to add the absolute URL so that iweb can find the file properly. Below is the example of where it would be located on MobileMe’s public folder. Remember, I changed the name of the standard folder to slider to make it easier for me. You of course can name it anything you want. What is in RED you will need to change to fit your needs.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Slides, A Slideshow Plugin for jQuery</title>

	<script src="http://www.yourdomain.com/slider/js/jquery-1.4.4.min.js"></script>
	<script src="http://www.yourdomain.com/slider/js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'http://www.yourdomain.com/slider/img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>
	<link rel="stylesheet" href="http://www.yourdomain.com/slider/css/global.css">
</head>

Next is the body. Place the absolute URL’s, just like above, to each of the images (<img src=”) and if the image links to a new page (<a href=”).

Again, change the Absolute URL path to the correct location to the correct server. Don’t want a title displayed, no problem, leave it blank. Ex: title=”" (make sure the quotes are there).

The dimensions of the images are the end of each line. You need to make sure EVERY image is the exact same size, in this case, 570×270.

Extra Info

To remove the background from the slider you will need to edit the CSS file. Find where it says “background” right after the body { and change the hex code to #transparent and remove everything else in the line up towards the ;. Should look like this:

body { font:normal 62.5%/1.5 Helvetica, Arial, sans-serif; letter-spacing:0; color:#434343; background:#transparent; padding:20px 0; position:relative; text-shadow:0 1px 0 rgba(255,255,255,.8); -webkit-font-smoothing: subpixel-antialiased; }

To edit the information that is displayed below the slider, go to the footer in the index.HTML file and find the <div id=”footer” and edit accordingly. If you do not wish to display it then you can remove the section.

Add to iWeb

Finally, once you have everything edited, you can place the index.html code into a HTML snippet inside iWeb. As long as the source files and images are placed on a server or MobileMe, you should be able to view the slider in iWeb prior to publishing.

If your images are displaying funky, as in different sizes. Make sure they are all the same and shown correctly in the HTML and CSS code. In this example the images are width:570px and height:270px. If nothing is working, go back to your code and double check the URL’s and make sure you didn’t miss any src=”…” All it takes is one keystroke mistake and nothing works.

I hope you find this tutorial works well for you, please leave a comment below if you have any questions and even examples of your completed slider.

Customizations

There are a number of other things you can do to this slider. If you’re not using the default image sizes, 570×270, you need to make sure you also adjust it in the CSS. You can also remove the outer white frame, pagination buttons, the “new” ribbon” and left/right arrows by not referencing them in the HTML and/or CSS.

Good luck with your slider designs and integrations into iWeb! If you run into a road block, feel free to leave a comment below.

[Updated, April 5, 2011]

Current Design (Soon to be gone)

The current or soon to be previous site design wasn’t horrible but at the same time wasn’t working well for the organization. The background had a “cloud/sky” theme that did not fit the style and a navigation menu that couldn’t offer much in expansion. Not to mention the main features of the site for the members was not working. As you can see in the image, there really isn’t much to it.

Click to Enlarge

New Design Preview

The new design will get rid of cloud/sky background and give it a more professional and modern feel with a full image slider on the main page showcasing future/past events. Flavors of purple will be throughout the site, mostly in the header, which resembles the color of dentistry.

Some of the new features of the site will include a full blog for announcements and seminar trainings, image galleries, resources and social network integration (a huge must in today’s digital age). Most importantly, it will have a working member’s area. This will provide the 250+ membership a secure area of communication, registering for events, message forum, member directory and more to come.

Click to Enlarge

Final site launch should be soon as the majority of work is completed.

Oh, and feel free to leave a comment below.