Archive for design
Modify the HTML Body Tag
Posted by: | CommentsThere are several HTML tags that can act as modifiers to how the web page looks visually.
First, let us re-visit the body tags. The body tags are there to tell the browser what part of the document is going to be visible to the end user when viewing the web page. This is marked up in your HTML code by putting a <body> where your web page’s content begins and a </body> tags where it ends.
How to Modify the Body Tag
So, any time you modify the body tags, you will be changing the way the web site is seen. There are several body tag modifiers you can use.
Change the Web Page’s Background Color
You can add bgcolor=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the background color for a web page.
- Code: <body bgcolor=”white”> (this would make the background all white)
Change the Web Page’s Text Color
You can add text=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the background color for a web page.
- Code: <body text=”black”> (this would make the text all black)
Change the Web Page’s Link Color
You can add link=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the color of links on a web page.
- Code: <body link=”blue”> (this would make the links all blue)
Change the Web Page’s Visited Link Color
You can add vlink=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the color of link that have already been visited on a web page.
- Code: <body vlink=”red”> (this would make the visited links red)
Change the Web Page’s Active Link Color
You can add alink=”VALUE” (replacing VALUE with the name of the color or the HEX number) to change the color of an active link.
- Code: <body alink=”purple”> (this would make the active link purple)
More Helpful Body Tag Tips
You can use more than one of these at a time. If you wanted to, you could use more than one of these body modifiers at a time. you would just need to remember to put a space in between each body modifier. For example:
<body bgcolor="black" color="white">
This is how you would link more than one together, this would tell the browser to make the background of the web page black and the text on the web page white. There is no limit to the number of these modifiers you can use on the body tag, as long as everything is formatted correctly, the web page should come out the way you want it to.
Only add these modifiers to the opening body tag. It is important to note that you only add these modifiers to the opening tag <body> and not the closing tag </body>.
Where can I find the HTML color or HEX values? You can find these many places. One of the best examples, is on w3school.com’s HTML colors page here:
Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!
Tips for Designing a Web Site for the iPad
Posted by: | CommentsApple has come out with the latest of its products to split the tech world down the middle. Opinions about the iPad are diverse and often polarized. For the webmaster looking to expand the reach of their web site, though, it doesn’t matter which side of the debate you find yourself on. Like it or not, the iPad is here, and probably isn’t going away soon.
This means that you are going to have to take into account designing web sites for iPad. Among the many technical points there are a few large-scale considerations that all webmasters should consider.
They will have it both ways
The biggest challenge from a programming perspective will be the fact that there is no natural preference in using the iPad in either portrait or landscape viewing format. In fact, for those of you who haven’t used it yet, the iPad has orientation awareness, so when the user turns it, the web site automatically adjusts itself to its rotation.
This represents a set of unique challenges. First, it means that web site simplicity jumps back up the priority list. A user who is sitting there waiting every time they turn on their iPad is going to lose patience quickly.
Second, and related to that, is that it might well be necessary to create more than one site design. Some site layouts will not translate well to portrait, especially ones that are heavily based around having lots of information in side bars. In nothing else, it means that the webmaster has to take both orientations into account in all of their programming.
No Flash or Java!
This one will get your attention. The iPad runs the Safari browser. This browser does not support plug-ins for this platform. So if your web site is based in any way on Flash, Java, or anything else that would require a plug-in, you will need to adjust your site design to find another way to present it. HTML5 looks to be possibly taking over a lot of the features that are currently relying on these other methods. Seeing as how you’ll probably want to learn it anyway, using it more in your page code might be one way to prepare for these restrictions.
The mouse has been caught
Users will not be using a mouse to navigate through your web site on this device. They will instead be using their own fingers. While the touch screen responsiveness and accuracy is described as being impressive, this type of browsing will require that things the user might click on be spread well apart. Closely packed together lists of links won’t be easy to use. Your design will likely have to change to include lots of large, hard-to-miss buttons.
Apple’s web site has extensive technical information to add to this guide: search for the phrase “iOS Human Interface Guidelines.” There are also web sites that will preview what your site will look like on an iPad so that you don’t have to buy one. This all may seem like a lot, but given how explosively past Apple products have taken off, it’s not unreasonable to think that the same might occur with the iPad. If it does, you’ll want your web site to be ready for it.
Related posts:
Hosting News Facelift
Posted by: | CommentsIt is not often that I highlight other sources of hosting information here, but I do feel like something should be said for the hard work and dedication that has gone into turning The Hosting News website around. For years, the Hosting News was a good source for finding hosting information – but the website interface was badly designed, ugly and hard to navigate through.
For many of us, we remember The Hosting News website looking like this:
However, since the ownership situation has been shifted around and they have headed in a new direction, the layout and design today looks more like this:
Isn’t it amazing what a new layout can do to breath new life into a website project? While I might not be the guru of website style and design, I can point out that example B is a lot better than example A.
So if you haven’t visited The Hosting News lately, go give them a shot. I think you will agree with me that the better designed website has really turned this website around into a resource we can all learn something from.
Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!© Mitch Keeler 2011 | Check out my firefox help site and my tech blog too!
3 Free Photo Gallery Tools
Posted by: | Comments
It might be easy to find a free photo gallery script you can get up and running on your website. However, not all scripts are created equal. Sometimes you might want a simple page dedicated to photos, and other times you might need an entire domain dedicated to the idea of showcasing your images. I have searched the Web high and low to bring you the best free image gallery tools for big projects, medium sized projects and lightweight projects.
Here are the three best free image gallery scripts, depending on the job you need them for.
An Advanced Free Image Gallery Script
Zenphoto is a great gallery tool that also comes with some CMS (content management system) options to make it a great tool to use to run your entire website. It doesn’t try to do too much though, when it comes to features. it keeps things simple by just delivering one of the best web media gallery management tools out there. Once installed, the administrator interface is pretty easy to pick up and with the online template system they have – you can create a beautiful website in no time at all. Zenphoto can also handle audio and video too – which makes it an all in one multimedia gallery tool too.
A Middle of the Road Free Image Gallery Script
Minishowcase is another good gallery script that keeps things really simple. With just a little PHP and JavaScript, you can put together an online gallery of photography, artwork or anything else without the need of configuring databases or customizing the code. You can literally get this script up and running in just a few minutes. All you need to do is bring the content to showcase. If you need a gallery tool that is on the simple side (but still looks good) there is no better choice than Minishowcase.
A Very Lightweight Free Image Gallery Script
SmoothGallery is the last album script I have to share with you today. Using mootools, this fantastic JavaScript gallery and slideshow system lets you setup a simple image gallery, slideshow or showcase anywhere on your pre-existing website. While you could not use this tool to run your entire website, it does make for a great way to showcase your work on the website you already have set up. So if you would rather just showcase your images on one section of your page, rather than dedicating an entire website on it – SmoothGallery is a great script to use to get that job done.
There are plenty of more scripts out there, but these three of the best for the occasions you need them. Zenphoto makes for a great tool to base your entire website off of. Minishowcase is a nice lightweight gallery tool that could maybe be put in just one section of your website. Then, last but not least, you have SmoothGallery. It would let you display your images on a single page, just to quickly show them off to your website visitors.
Facebook Fan Page Come join the fun on the Web Hosting Show Facebook Fan Page!© Mitch Keeler 2010 | Check out my firefox help site and my tech blog too!
19 Links to Help Stimulate Your Inner Designer
Posted by: | Comments
Finding design inspiration, for any webmaster, can sometimes be tough. We have searched the Web, far and wide, for some of the most inspirational design web sites out there – to help you find your creative muse. From art galleries to tutorials, there is a little something here for both design newbies to advanced design professionals.
Here are our top picks when it comes to finding the best ideas and inspirations for designs of all natures.
DeviantArt.com
Where ART meets application!
Design Solutions on Flickr
A great collection of site parts and ideas, for design inspiration.
BrowserShots.org
Browsershots makes screenshots of your web design in different browsers.
PatternTap.com
Interface collection for design inspiration!
Getting Started with HTML
Great six part series, to help introduce you to the world of HTML.
Tagul.com
Awesome looking tag cloud designs!
ScrnShots.com
ScrnShots is the best way to take, find, and share screenshots of web and screen based design.
Toondoo.com
ToonDoo is a unique way to get creative and expressive with comic strips.
99designs.com
Designer Marketplace for Logo Designs and More…
Webdosanddonts.com
Snack-sized web design tips and tricks!
IconBuffet.com
Free Icons, Stock Icons, Custom Icon Design.
img4me.com
A free text to image service.
So, what do you do?
Really funny web designer flow chart!
WooThemes.com
Great quality premium WordPress themes!
fontstruct.fontshop.com
Build, share and download tons of custom fonts!
DesignFloat.com
A Digg-like social news web site for designers!
Flash-Template-Design.com
Great professional looking flash and non-flash templates for web sites!
RedBubble.com
RedBubble is an online art gallery and creative community that makes it easy to buy and sell art as high-quality framed prints, greeting cards, posters, designer T-Shirts and more.
TV.Adobe.com
Your online source for expert insight and inspiration.
So there are our picks, now which web sites would you add to the list? Let us know your favorite design web sites in the comments!
Functionality, Design, Usability & Conversion Optimization
Posted by: | CommentsBy Hartland Ross
It used to be that driving traffic was the major metric to track driving stock prices up and entrepreneurs touting their successes, however, we have all come to recognize that traffic does not equal sales. There are many factors that contribute to a successful campaign including the source of the traffic, the offer itself BUT also your website’s ability to convert visitors into leads or customers. There are many factors that contribute to increases in conversions. A partial list is included below:
- Are there third party security verifications on your site such as Verisign, Thawte, Hackersafe etc
- Are there any dead links?
- Does your landing page relate to the ad or offer the person clicked on?
- Do you even use a landing page?
- Does your landing page have additional links to other information that will cause leaks much like a leaky bucket for visitors to leave?
- Is the checkout process too long?
- Is it obvious what you want the visitor to do?
- Is there an appropriate and balanced use of graphics and text?
- Are there testimonials on the landing page to support the offer?
- If you are doing lead generation, are you asking for more information than you really initially require?
- Have you tried playing around with the layout, buttons styles and wording and use of colors?
- Is there a sense of urgency in your offer?
- Do you spell out the benefits of your offer and not just a list of features?
I highly recommend you go through your site with the above in mind. If you have any questions, feel free to contact us.
Is your website not converting as well as you would like? Get 50% off a Website review for Lunarpages’ customers!
eBridge Marketing Solutions is offering a website review addressing functionality, design and usability with the focus around conversion optimization. 50% off the regular rate of $40/page means you now pay only $20/page. Click here to read more.