Web Design Tips and Tricks

Easy Coding Site for Web Designers by Kelly Lynn

For web designers looking for a great option to combine a clean web interface with multiple features and the creative freedom of html coding, Webs.com may be a good solution. Packed with features for the beginning to advanced web designer, the professional-looking interface is one of the best features of this online web design solution.   In addition to the easy interface, which creates template-based pages for businesses which look like an expert designed them, it also offers high-quality high-definition audio and video which you can upload through their file uploader. The server automatically converts the video to optimal format to use in the page. All video is created in high-definition, provided it was recorded in that format, and then rendered to a "Flash media" file. Flash is known for … Continue reading

Embedding a PowerPoint Slideshow in a Webpage by Kelly Lynn

  PowerPoint slideshows are an excellent way to get information across in a visual, easy to understand, interactive way. But did you know that you can share your PowerPoint presentations with anyone – even those that do not have PowerPoint installed in their computers? Embedding a slideshow allows users to share photos, swap notes, attend long distance meetings and even promote website features. And without the need to link countless individual photos, reaching a wider audience instantly becomes much easier. With Sky Drive, embedding a PowerPoint show on any web page or blog is fast and easy. The first step, once you’ve created your slideshow using PowerPoint on your PC, is to visit the Sky Drive website. Sky Drive is a free, secure, cloud-based file storage system available from Microsoft. … Continue reading

How to Preview Your Website Before It Goes Live by Kelly Lynn

  You want your website to go live seamlessly, which means setting it up and performing complete testing before the general public sees your website. Of course, if you simply put up a new domain for testing, anyone can see it, and this means prying eyes might come upon information not meant for them or see a broken website. Fortunately, your host's hosting control panel software—Plesk and cPanel are popular—provides a way that lets you view your website even before it's live. cPanel Log in to your cPanel dashboard in your browser. Locate your dedicated IP in the “Quick Stats” panel. Type the IP in your address bar, followed by a tilde, then your cPanel user name. For example, if your IP is 192.168.1.1 and your login is “admin,” you … Continue reading

How to Decrease Website Load Time With CSS Image Sprites by Kelly Lynn

  An important part of a user's experience on your website is the time it takes for pages to load. Web pages with more pictures can take longer to load and require several server requests. Instead of using many pictures on your site, you can compress all of your images into an image sprite and use CSS to display different parts of that same picture at different locations on the page. This reduces the time it takes to load your pages, and only takes a bit more work. To make an image sprite, you will need an image editor such as Adobe Photoshop or GIMP. Simply make a new project, import the photos you need for your page, align them, flatten the image, and save. You will probably want the … Continue reading

CSS3 Multiple Columns by Kelly Lynn

  CSS3 offers many features that can give your website a great new look. One of these is multiple columns. Columns can be used in news articles, comments, and even the body of an informative page to give it a professional look. You are not confined to a three-column newspaper style in CSS3, however. There are many options to choose from so that you get the design that fits your purposes. Number and Width of Columns Perhaps the most important settings are the number and width of columns. To set the number and width of columns for the Opera browser, use the "column-count" and "column-width" properties in your style. For Firefox, you will need "-moz-column-count" and "-moz-column-width," and for Chrome/Safari use "-webkit-column-count" and "-webkit-column-width." For example, to make a which … Continue reading

Improving a Website’s Usability Through Good Navigation by Kelly Lynn

  Nothing frustrates an internet user more than visiting a website and not being able to find his way around. This is usually because of weak usability. If he’s looking for something specific but doesn’t know how to get to it he’ll quickly leave and look somewhere else. To prevent this from happening, a website should be easily navigable, and the system should tell a user where he is, where he came from, and where he can go. This is even more important in the modern web world, as most users enter a website through a search engine after searching for a keyword, rather than starting from the home page. When he lands on a page within the website, he may want to look for something else, or go to … Continue reading

How to Add Background Shadows With CSS 3 by Kelly Lynn

  With CSS 3 it is possible to add a background shadow, also called a drop shadow, to web page elements like text or boxes. This feature of CSS 3 is supported by all the latest versions of modern browsers including Chrome, Firefox, Safari, Opera, and Internet Explorer 9. The properties used for background shadows are called box-shadow and text-shadow. Box-shadow The code shown below is the basic code necessary to achieve the effect of a box-shadow. div.background { -moz-box-shadow:10px 10px 20px #666; -webkit-box-shadow:10px 10px 20px #666; box-shadow:10px 10px 20px #666; } Here is an example of how to make a box-element with a box-shadow. The box is 200px by100px and has a blue background color. First you need to wrap the element that you want to apply the shadow … Continue reading

Branding for Your Website Using a Favicon by Kelly Lynn

  The biggest and best companies in the world today have a strong online presence and their logos can be seen all over the web. They are meticulous about online branding, making sure they leave no stone unturned. Even small companies need a website in today’s modern world, and online branding is as important as traditional branding if you want to be recognizable to as many potential customers as possible. One way to maximize website branding is through the use of a favicon or “favorite icon”. This is the tiny graphic that you see preceding the website URL on the address bar of most browsers, or on a page tab, or in the bookmarks or favorites list where the website address is saved. This graphic is usually either a small … Continue reading

How to Freshen up HTML Tables with CSS by Kelly Lynn

In the early days of the Internet, programmers and designers tried to use HTML to add style and formatting to their web pages. They were never very successful because HTML was designed to control the layout and structure of web pages, not to make them look attractive. Eventually, Cascading Style Sheets were developed to control the style and formatting of pages. Just learning a few CSS styles can go a long way in making your web pages more presentable. Let’s take a closer look at how you can use styles to drastically improve the look of HTML tables. We’ll start with this plain and boring HTML table: Step 1 – Add a <style> tag in the <head> section of your HTML file. It should look like this: <style type=”text/css”> </style> … Continue reading