Technically Easy

Category: Design

  • Speed Up Your Web Site By Using CSS Sprites

    Speed Up Your Web Site By Using CSS Sprites

    If you own a web site or blog, chances are you have thought about how to make your pages load as fast as possible. This is an obsession with many, while a learning experiencing for others. I am one of those that look for ways to make my blog display faster. I have tried and used many different tactics, including changing settings for the browser cache, gzip compression, WordPress caching plugins, reducing the number of graphics, and reducing the number of third-party widgets that appear on my blog. The more that has to load, the slower a page will become.

    When I created this new WordPress theme, I wanted to try something new – CSS sprites. CSS sprites are used by some of the larger web sites to reduce the number of image downloads that are needed to display a web page. While I am not an expert by any means, I have managed to get some of the common images that appear on this blog to load from an image sprite.

    (more…)

  • My Thoughts on Web Page Designs

    For those that have been reading Technically Easy for some time, you may have noticed that I modify my blog design every few months. Since switching over to WordPress, however, I have kept the same template, with a few modifications. In the past week, I have been creating a new blog design from scratch, and have thought about some of the design issues that I have seen online.

    In this post I will talk about my thoughts on Web page designs, and what I think are common issues with many designs in use today.

    (more…)

  • Creating Clickable Web Site Header Images

    I like to write posts that can help others complete a task, whether it is with computers, web sites/blogs, networking, or digital photos. Some times, I come across questions that get asked on a frequent basis. While the questions may seem to be simple to answer for some, I also realize that many people don’t have the technical knowledge others may have acquired through the years.

    This post is going to talk about creating header images for a web site or blog, and how to make them link back to a home page. If you are new to HTML, creating such an image is very easy to do.

    (more…)

  • Photo and Image Editors

    As I visit web sites one thing that always get my attention is the amount of time it takes to complete a page download. With web sites using more images to display the content, it can at times take much longer than necessary to finish downloading a page.

    The biggest problem with the sites that do use a lot of images on each page is the size of the images. Some who manage web sites don’t realize that images need to be resized outside of the browser to decrease the download size. Specifying the size of an image in the HTML code will only shrink the displaying of the image, not the actual size. To shrink the file sizes you will need an image editor. In this post I will list a few image editors that can be used to edit your images for your web site.

    (more…)

  • Check Web Browser Compatibility for Your Website

    When you are designing a web site it is important to always test the design in many browsers. The reason for this is that different browsers may display your web site in different ways.

    It has always been a difficult task to test your web site design in many browsers and many versions of the different browsers. To help with this there is a web site that can do this all for you, and provide screenshots of your web site as it is viewed in the browsers.
    (more…)

  • What to Avoid When Designing Web Sites

    I enjoy using Entrecard on a daily basis. It allows me to find new blogs that I would have never have visited without going through Entrecard. At the same time I also find blogs that I would never visit again, not because of the content, but because of how they are designed.

    In this post I will list several points that I consider to be a bad for Web sites and blogs, and items that should be avoided if you want to keep your visitors coming back for more.

    What You Should Avoid When Managing a Web Site

    I have written many posts regarding designing a good Web site, at least in my opinion. These are outlined in Blog Designing Tips for New Bloggers and Web Site Design Tips.

    Now let’s look at some bad points that you should avoid when designing Web sites.

    1. Creating a complex design.

      Avoid adding too many links, objects, and ads to the sidebars and focus more on providing an easy to find and read navigational links. Your visitors won’t stay around hunting for a specific link. Keep the navigation simple.

    2. Popup Ads.

      These windows that open when you visit a site are really annoying, and in reality serve no real purpose as most users would just close them anyway. Making money with ads is okay by me, just as long as they are incorporated in the Web pages and don’t display in a new window.

    3. Background Music.

      I have visited many Web sites that include some music that loads and then plays in the background. If you would like music on your site, provide the play option to the user and don’t play it automatically.

    4. Flash animation – no real content.

      I usually visit sites looking for specific information. When a site’s navigation and content are all contained in flash animation, I usually close the window. Although flash can look great, I prefer the standard text to Flash on a Web site. Besides, search engines can’t index content properly if it is built in Flash animation.

    5. Copied content – no original ideas.

      Don’t copy the hard work of others and post it on your site. You will probably be punished by the search engines for having duplicate content, and won’t get many visitors in the end. You could write a brief summary of the Web page and then link back to the original site.

    6. Many Large Images.

      Many times I have visited a personal Web site and had to wait for several minutes for some images to download. If you would like to use photos on your site, make them smaller in an image editor first, and then upload them. Don’t let the browser do the resizing since they will still be large, and just look smaller.

    Summary

    This post has provided several items that you should avoid on your Web site if you want your visitors to keep returning for more. The items listed above are the most common annoyances on Web sites today, and they are the reasons I refuse to re-visit a Web site.

    Now the question to you is: what would you add to the list to make it more complete?

  • Getting Colour Values from Web Site Templates

    Many of us aren’t the greatest Web site designers, or just don’t have time to design one, and because of this we rely on templates that others have created. The only problem with this is we may not understand how the entire Web site is designed with regards to files used and the layout of the site.

    One issue that I have recently read about is getting the values for the site colours to use with Google Adsense. The template user wanted to know how to get the colours from the template to blend in the Adsense ads with the site. The problem a user may have is reading the cascading stylesheets that come with a template to find the correct colours. In this post I will show how to retreive a colour from a Web site without look at the cascading stylesheets.

    Using an Image Editor

    This method may seem long when you read it, but it basically involves taking a screenshot of the Web site, pasting it into an image editor and then retrieving the colour.

    In this example I will use Windows Paint and Windows calculator to get the colour. You can use any image editor that allows you to retrieve colours, such as Photoshop or Paint Shop Pro.

    To get the colours use the following steps:

    1. Open up your Web browser and navigate to the Web site.
    2. Press ALT+Print Screen to make a copy of the screen. The screen copy will be in memory, so you won’t see anything change.
    3. Click Start->Run and then enter mspaint.exe in the Run dialog. This will open up Windows Paint.
    4. In Paint, press CTRL+V to paste the screen copy from memory into the document. You should now see the screen in Windows Paint.
    5. From the toolbar on the left, click the eyedropper icon, also called Pick Color and then click the colour you want to find the value for.
    6. Once you have clicked the colour, click Colors and then Edit Colors from the menu at the top. You should now see the Edit Colors dialog box on the screen.
    7. Click the Define Custom Colors button to expand that dialog box.
    8. The colour you clicked with the eyedropper will be the selected colour in the dialog. Write down the three numbers beside Red, Green, and Blue labels. For the Web, we will be converting those three numbers to hexadecimal.
    9. Click Start->Run and then type calc.exe in the Run dialog box.
    10. With Windows calculator open, click View and then Scientific to get more advanced calculator functions.
    11. Near the upper-left corner of the calculator you will see four option buttons: Hex, Dec, Oct, Bin. These are the differernt number systems. We will focus on Hex (hexadecimal) and Dec (decimal) for now. Ensure that Dec is selected.
    12. Typein the Red value that you retrieved from Windows Paint in the calculator, and then click the Hex option. The value should now be converted to hexadecimal, which you should now record somewhere. If the number is not two characters in length, then append a leading zero to the value.
    13. Click the Dec option and then enter the Green value, and then select the Hex option. Write down that value beside the red value.
    14. Repeat the previous step for the Blue value and write that value down next to the green value.

      15. For example, if you had a value of Red=155, Green=98, and Blue = 201, then your new number should be 9B62C9.

    15. The number you should end up with will be 6 characters in length. This is the hexadecimal number that represents the colour you selected on your Web site. You can now use this number in Google Adsense, or any other place and the colour will match your Web site.

    Summary

    This post explained how to retrieve a colour value from a Web site without reading the cascading stylesheets. Windows Paint was used to retrieve the Red, Green, and Blue values of the colour, and Windows Calculator was then used to convert the three numbers to hexadecimal. Using this method, you can easily find out colour values of an colour on any Web site.

  • Introduction to HTML

    I recently wrote two posts regarding designing Web sites: Designing Web Pages: Tables or CSS and Introduction to Cascading Stylesheets (CSS). The information presented in both of those articles may be advanced for those just starting out with creating Web pages.

    I decided to create this post to provide an introduction to HTML and create a Web page. This post will create a very simple Web page that you can then display in a Web browser.

    (more…)