Sol Designs Blog

Flash vs. Javascript

2009-04-19T13:19:00.000-07:00

As the web continues to expand, customers have become more savvy to the newest technologies. Any good designer knows that full flash sites have practically no SEO value. Although google has started to change this, the other search engines have not caught up. So how do you build a dynamic site without compromising searchability? jQuery, Scriptacoulous and MooTools. These javascript based technologies offer animated designs while keep sites search engine friendly. For example, take a look at the navigation on this page: http://affinitybeauty.net/.

The navigation on this site is clean and dynamic. Best of all, all the content is located on one page. This of course has its cons. If it is a large site, you do not want to have everything on just one page as it will take a long time to load. But for smaller sites, it is a great option.

The great thing about the javascript framework tools is that you can mix and match. You can use several plugins to create cool effects. For example, on this site we used the same navigation as above, but also added an image gallery to the home page.
http://fcakitchens.com/chrisbaetz/new-site/
Eventually, the image gallery along the bottom of the home page will open to a lightbox gallery displaying all the images in full size.

There are numerous plugins and customizations. For example, for our contact forms, we used a jQuery plugin which displays the form in a lightbox over the page: http://soldesigns.net/. Click on Contact Us or Get A Free Quote.

This gives your site a more dynamic feel without compromising its searchability.

Below are links to the sites that offer these tools and explanations on how to use them:

jQuery
MooTools
Script.aculo.us/

Videos: Upload to your site or YouTube?

2008-09-16T16:33:00.000-07:00

Several clients have approached me about uploading videos to their site. While many sites do this successfully, it is not always practical for everyone. Yet, many clients want to showcase their products, or give video seminars, and that's a great way to capture your viewers attention. So what is the easiest, most effective way to get this done?

My answer every time is YouTube. YouTube has made video uploading so easy, that it would be silly to go any other route. Here are the main reasons why:

YouTube compresses your video to a size suitable for web viewing
The videos are shown in a flash player which 90% of browsers come installed with already
There are no video codecs or standalone applications needed (movie player, windows media, quicktime video player)
YouTube allows you to upload different video formats

When you hosts videos on your server, you run across the possibility that the viewer may not have the application needed to view your video. This means that they have to go to a different site, download the program, hope their firewall/anti-virus allows them to download it, then come back to your page and download the video form your site in order to see it.

As a web designer and video editor, YouTube is the way to go. Not only do they facilitate the uploading process with their new multi-video uploader tool, you will get exposure that you may never have gotten if you hosted your videos on your site only.

So video away! Publish away! And most importantly, have fun and be creative!

As always, I welcome any comments, questions or concerns...

Sol

Blogging for Search Engines

2008-07-07T20:48:00.000-07:00

Time and time again you continue to hear about blogging being great for search engines, but is it really? Yes it is!

There are many reasons why search engines love blogs. The most important one is actually the most logical. If your site is important enough to blog about, then it must be important to find in search engines.

The great thing about blogs is the way they are programmed. They automatically make keywords for you, descriptions, tags, and all kinds of nifty things that search engines love. Most blog sites offer some type of rating system or you can rate blog articles on sites like Digg or Del.icio.us.

So what should you blog about? About your site of course! What do you do? Why is it better than anyone else's? Can you offer advice to others? Do you have products to sell? Are there questions that your customers asked repeatedly?

These are all great starting points. The most important thing to remember is to always link back to pages within your site and make sure that your posts contain keywords relative to your topic. And most important of all, make sure that your title is relevant to your site's content! The title is what search engines will find when they try to read your blog. The better the title, the more hits you will receive.

Happy blogging!

Affordable Web Design in South Florida

2008-06-22T18:24:00.001-07:00

Let SolDesigns.net help you with all your design needs. Although they specialize in web design, they also offer graphic design and programming as well. Great customer service, wide range of services. Your one stop for all your design needs!

read more | digg story

Designing for Newsprint

2008-06-14T09:27:00.000-07:00

So, 2 weeks ago, a client asked me to design an ad for the newspaper. And of course, I thought, no problem! I've designing graphics for many years now, however this was my first news print design. For those of you who have never come across this, believe me, it is not as easy as it seems. Below are things to take into considerations:

Newsprint is dark, therefore whatever you design, plan on your white areas being gray.
Most newspapers will require that you embed the fonts for your designs and that they are Post Script fonts, not True Type which is the most common.
Your design has to be at least 200dpi

Here are a couple of little tricks to help with the design. Create your image with a gray background. Probably something around #cccccc would be a good color. So basically, all your whites will actually be gray.

When I set up the document, I set it at 300dpi. I rather have to scale it down, then have to scale it up and distort. Always start big and scale down if necessary.

The fonts, this was the trickiest part yet. All my fonts were true type, so I had to scour the web for post script fonts. Here is where I found them: http://www.myfonts.com/

This of course is for a black and white ad. If you are creating a color ad, remember to set your document to CMYK. Otherwise, the print company will usually not accept it or your colors will be completely off.

Hope this helps!

If you have any ideas, questions or topics, email me and I will gladly post information on it!

sol@soldesigns.net

Sol

osCommerce: Client does not support authentication protocol requested by server; consider upgrading MySQL client

2008-05-22T10:38:00.000-07:00

After numerous attempts to find the solution to this problem, I found one that worked. I had gone through a slew of message boards, and forums, and everything I tried did not work. I did remember osCommerce working on my server on godaddy, so what was the difference? The operating system. When I tried to install osCommerce on a Windows (IIS) based server, I would get the error: "Client does not support authentication protocol requested by server; consider upgrading MySQL client".

Clearly this is not an easy solution, but its the best I found compared to the other ones. First, I backed up all my files on the server and I changed the server to Linux. And presto! osCommerce began the installation process, and everything worked!

Hopefully, this will help someone else.

Sol

Creating Tableless Designs

2008-05-17T16:29:00.000-07:00

More and more customers are asking designers to create tableless designs. For the most part, the clients are not really sure why, but they have heard it around, or read it on design sites. So why no table? Isn't life easier with them?

It is important that we understand why tables for the web were created. For the most part, tables in the html world were created for well...organizing data. The problem was that we as designers found a clever way to arrange our designs back in the day, perfectly with tables. But that time has come and gone. In an era where stict html standards are being applied to most browsers, (and I say most, with the exception of IE who insist on making a designers life miserable), tables are a thing of the past and should be used for data. The other thing is that as search engines become more advanced, items in tables will be considered data (as in statistical type data), versus pertinent content.

The beauty of CSS is that, if done correctly, you could change your whole design layout with some minor modifications to one file versus page by page.

Granted, CSS is not perfect as it does not display exactly the same in all browser (i.e. IE(pun intended)), but it does make life a lot easier when it comes to re-designing a site. Plus, the search engines love css! They read all the h1, h2 codes, bold codes, etc, making it easy to distinguish what is important in your site without compromising design.

The key to tableless designs is seting up your page correctly. This is usually the biggest pitfall. I have a standard layout that I use for all my pages and then build from there.

For the most part, I start with a huge container that will hold all my content. Then, I nest in little section divs. Below is an example:

<div id="mainContent">

<div id="sideNav"></div>
<div id="contentText"></div>
<div id="bottomNav"></div>

</div>
<div id="footerInfo"></div>

mainContent will hold the bulk of my content except for the footer information (copyrights, disclaimer, privacy, etc..). In this case it contains my side navigation, my main content, and my bottom text navigation or anything else I need along the bottom. Usually the side navigation is a graphical version of the bottom. I usually have 2 navigations for SEO purposes.

Below is an example of css I have used in the past:

#mainContent
{
width: 100%;
text-align: center;
background-color: white;
}

#contentText
{
width: 450px;
text-align: center;
color: #333333;
}

#sideNav
{
text-align:left;
width: 250px;
line-height: 2.3em;
font-size: 16px;
float: right;
color:#333333;
}

#bottomNav
{
clear: both;
color: gray;
}

#footerInfo
{
width: 99%;
color: gray;
font-size: 10px;
float: left;
clear: both;
padding: 2px 2px 5px 2px;
border-bottom: 1px solid #1e5075;
margin-bottom: 5px;
}

If you notice, the side navigation is floating but the contentText is not. (See my post on divs.) This is so that the mainContent div will expand down to cover all of the space, otherwise the navigation div and the content div will be floating and the mainContent will not expand all the way to the bottom.

This is the basic layout. You can float the navigation left or right in this set up. Using this basic setup will help make your css designs a success.

Have a css question? Are you stumped on a design that won't display correctly on all browsers? Email me! I'll try to help!

P.S. Feel free to look through the code on this page, it is all built in CSS!

Happy Designing,

Sol

CSS Mysteries Revealed

2008-05-17T15:44:00.000-07:00

Can pages look the same across all browsers? Is it really possible? Almost! For the most part, if you stick to the CSS standards (W3Schools), then with the exception of some very minor variations, your pages will look the same. I know at times it seems almost impossible, but its not. The key to cross-browser design is knowing what objects do what in each browser. For example, nested floating divs will not make the parent div expand in Firefox, however in IE, the div will inherit the child's properties. Why? who knows, but there are solutions to each issue.

I always make good practice of making sure that the div which will contain the most information (be the biggest in size), is not floating. This way, the parent divs will always inherit the size. Otherwise, you just have a bunch of stuff floating around your page.

Typically, I focus on designing in IE6 and Firefox 2, and for the most part, if it looks good in these 2 browsers, then it will display correctly in the rest......EXCEPT for IE7 or the NEW IE8. I'm not sure what Microsoft was thinking on this one. You would hope that with the new browsers, they would be more compatible to css. Unfortunately, this is not the case. But, like I said, if you stick to the rules, you will usually be okay.

If you are desperate and have tried everything, email me and I will try to help. I have pretty much uncovered every css mystery.

Here are some links to sites that will display a screen print of what your pages look like in different browsers. They are really cool and have saved me a lot of time and headaches with clients. If you find some more please let me know!

http://ipinfo.info/netrenderer/index.php
http://browsershots.org/
http://www.iecapture.com/

P.S. If anyone has the IE8 Beta installed, can you let me know how this page is displaying? The rendering engines have made a mess of it, so I am hoping that Microsoft did not go backwards, and it is just a rendering error. Thanks for your help!

Happy Designing!

Sol