For my web site project, I have found that using only solid color backgrounds can become really boring. I know that solid color backgrounds are good in the sense that they are not distracting from the main content of a web page. But sometimes they do work. In my search for cool backgrounds on the web, I found a post on delicious.com about different sites that will generate a background for you to your liking and then let you download them for free. Not all of them are that great in my opinion (watch out for number 14 on the post) but others are close enough to what I was looking for (such as number 13). Number 2 on the list is also pretty cool. So if you’re tired of solid color backgrounds, hopefully you’ll find the following post helpful:
In the course of designing my photography website, I had to deal with alot of photographs that I had taken over the years. These files were of all different sizes, formats, and locations. I run Macintosh and I had not been using iPhoto for organization. So I needed simple program to process all of my photos into one size and format to then be uploaded to my website, where I’ve chosen “simpleviewer” to display them.
After googling “image resizer”, the results all offered “online services” (aka pain in the a-55 try to get you to pay for stuff websites). Most of them were complicated and slow. Then I found “Image Resizer”, developed by John Wordsworth. It’s a 1mb mac-compatible program available for free on Apple’s website: http://www.apple.com/downloads/macosx/imaging_3d/osximageresizer.html . This program offers all that you need in the simplest package. For those of you dealing with image files that may be large or not properly formatted, I highly recommend this program. You can choose to manage pixels in height/width, output folder, naming system, and formatting. You can also drag many files at once to be processed consecutively. Though I don’t know if this program is available for Windows, I’m sure there’s much more offering out there in this department. I hope this post is helpful!
On a lighter note, I found an interesting/scary article on “Cybernukes” (aka the potential end of the internet as we know it). Enjoy!
“GIMP is the favorite graphics editing program of many designers and graphic artists. It is free and compatible with Windows, Mac and Linux (the two big reasons for its popularity). It has a wide array of features, as well as plug-ins, filters and brushes. Documentation is primarily available in online communities, as well as through extensive add-ons.”
I took some photography courses in high school that I absolutely loved. Photography has been one of my favorite hobbies since. In digital photography course that I took in high school, we used Photoshop to edit the images. I found Photoshop interesting and fun to play with. Now that I’m in college, I haven’t had much time to take a photography class or to even just continue it as a hobby. But out of the pictures I do manage to take here and there, I’m always thinking of ways to edit them but I don’t have the money to buy Photoshop, especially because all my money has gone to tuition alone. Luckily, I recently discovered GIMP which is a free photo editor that works a lot like Photoshop but is not as complex. It is missing a few things, but then again, it continues to be upgraded, as most things do. I found this article on Smashing Magazine, however, that tells you how to add certain elements to GIMP that will make it even more similar to Photoshop. I think GIMP is especially handy with building websites because sometimes you can’t find the perfect picture online to use in a web site so it is definitely a plus to have the option of creating your own perfect picture. It’s also handy for everyday uses like editing a picture that you want to print out and frame for someone. It makes it pictures look more professional. It’s also just fun to play around with. Sometimes that’s the best way to learn about a program. I know that I’ve learned a few things that way. Although I don’t have my edited GIMP image on my laptop, I did a pretty impressive job (for a beginner) of merging two pictures into looking like it was one single picture that was taken. I have yet to add any of the elements from the article but thought it would be a good article to post. So take a look! And if you are interested in downloading GIMP for free, click on this: GIMP .
One aspect of the web design process that has remained problematic for me, moreso than finding useful web widgets or figuring out difficult coding, has been creativity. Making a successful website does not simply require technical know-how or a good eye; it has to be clever, original, and memorable. There are millions and millions of websites in existence. If your site has nothing to distinguish it from millions of others, it will be completely lost in the shuffle. Because I had no need for a personal web portfolio and had no groups or events to promote, I had to come up with an idea for a web site for my CS103 project that was completely original. Here are some things that I realized I needed to consider in creating a memorable site that people would want to visit over and over.
1. Think About YOUR Web Experience
What kind of sites do you frequently visit? How do those sites service your needs as a web surfer? How could these sites be improved upon – what’s missing? Considering these questions will help you make a site that is not only personally interesting and fulfilling, but will also help other web users who may be having the same feelings as you. Websites have to have a purpose to attract visitors; determining a legitimate goal for your site is the first step to making it a success.
2. Do your research!
So you’ve come up with an incredible idea for this brand new humor site. You’re going to take funny pictures of cats and write captions on them in chatspeak. Great, sounds hilarious. But http://icanhascheezburger.com/ already exists for that same purpose! While it can be advantageous to consider trends and internet fads when creating a site, it’s important to have a site that adds something new to the web. If users can get the information they’re searching for elsewhere already, there’s no reason for them to visit a site that reiterates the content of a previously existing possible site. Make sure you so adequate research to make sure the site you’re creating is actually an original!
3. Create a Memorable Design
Design is one of the most important aspects in attracting repeat visitors to a site. If a website is disorganized, unappealing, or unoriginal, chances are a user won’t return. One thing we have frequently discussed in CS103 is the importance of using white space and guiding the eye around the page. But it is also important that design reflects the page’s content. If the site’s subject is not particularly unique, it’s important to have a particularly unique layout. Memorable images or an unconventional layout might help distinguish your sites from others that are similar, offering something new and interesting to attract the viewer. Or, if the content of your site is more revolutionary, it’s important that the layout doesn’t distract the viewer from the creativity of the site’s new content or technology. Even template designs can be tweaked to work creatively with the site’s message.
4. Creative Use of Tech Elements
Technology such as Flash allows for almost unlimited creativity in web design. Music, animation, pop-outs, roll-overs, and more can all be used to create a memorable experience for a web user. Use this technology to your advantage! A clever idea can go a long way, even if it’s simple. Humor sites, travel guides, fashion blogs, and the like are all a dime-a-dozen on the internet. But creative use of new features can help the site go from everyday to interesting.
While my site is not yet complete, just getting to the point it is now a great ordeal. Building a web site is not easy. Sure, most of it may be made up of code — code that you could learn over time and adapt to. However, in order to build a site that truly functions, one has to look past that.
First off, the web builder must design a site that can clearly get across what he or she is trying to convey. In my case, I decided to go for simplicity. There is one basic color palette across the entire web site that I found to be easy on the eyes. Also, every page (once all are complete) will have the exact same design. Therefore, when a user visits my site, he or she will know exactly where to go to find what they are looking for.
A site should reflect its content. If you plan on using a CSS template as I did, find one that suites your website. There are thousands upon thousands of templates out there; I guarantee that you will find one that fits what you are looking for.
Getting to this point in the web building process isn’t easy. It requires a lot of deep thinking about your web site as a whole. After you get to this point, all it is about is filling in the empty spaces. In reality, creating the design of the web site is my far the most difficult part of it all. As a lesson, one that I have learned well, don’t rush the design-making process in building your web site. If you do, then all of the content that you want to show off the world will become null.
I have realized that asking people for their critics about my website has been very helpful. Looking at your own website and looking at another’s is a completely different experience. As much as one may want to deny it, there is a bias when looking at your own website. It is your own creation–something you took a lot of time and effort to make. Therefore, looking at your own website may not be as clear as someone else looking at it.
When another person looks at your website, he or she takes it at face value. In other words, their opinion of your website is formulated when they first see your website. It is a more accurate representation of what your website means to the outside world. To you, your website may seem easily navigable, easy on the eyes, and comprehensible. However, after a couple of outside perspectives, you realize that it isn’t the case. This has happened to me on several occasions. I have considered these critiques seriously and made the decision of whether or not to edit my website based on what the person said. At times, I disagreed with the critique. At others, I had a clear realization.
I would advise not to be shy and to show your website to others. The worst that can happen is your website improving. Also, it is important not to take the critiques personally. Although, your website might be a personal project, bristling at criticism will not allow room for growth and improvement. Good luck!
Lightbox is an easy way to incorporate many different images into a small element on your webpage. Some benefits to having lightbox instead of a thumbnail page include smoother loading and operation on the page. Users can organize and tag their pictures with captions without creating a page that slower connections can’t load quickly. Also in relation to the lightbox page’s operation users can expect viewers to enjoy the added ease-of-use of lightbox to browse full-sized images quickly.
Below is the protocol for integration of lightbox into the code for your page. This is found at http://www.huddletogether.com/projects/lightbox2/#how
How to Use
Part 1 - Setup
- Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
- Check the CSS and make sure the referenced
next.giffiles are in the right location. Also, make sure the
close.giffiles as referenced near the top of the
lightbox.jsfile are in the right location.
Part 2 - Activate
- Add a
rel="lightbox"attribute to any link tag to activate the lightbox. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Optional: Use the
titleattribute if you want to show a caption.
- If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]“>image #1</a> <a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a> <a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts
This post is informative because it is the most basic information relating to use of lightbox in a page. Apart from the technical value of the post its highlighted here how unobtrusive lightbox is in the code. Also you can see that all of the images can be loaded from one or many directories if properly tagged with the
rel="lightbox" attribute . This presents a clear organizational advantage over thumbnail and embedding methods.
It bears mentioning that for every image you include that hasn't already been loaded to your page will require you to enter in a new line of code. All the files included in lightbox must be accessable (in the same directory as the .html file.) Also the comment about bracketed [album] tags means that if you write into the code a bracketed title for a group. If properly written into the code the images will appear as a group with the title [Roadtrip!]
For all you folks out there whose web projects seek a lot of web traffic, here are 8 ways to increase your site visitors!
1) Submit your site to all the major search engines.
2) Submit your site to all the major web directories. This will generate traffic directly from the directories themselves and will also help to improve your link popularity.
3) Keep updating your content. For repeat visits, it is crucial to provide regular updates to the website.
4) Exchange links. Trading links with other websites that are closely related to the subject of your website can bring you more website traffic.
5) Use word of mouth. Tell everyone you know about your website. Trust me, world travels fast when you have something cool to talk about.
6) Become active in bulletin boards and chat rooms focusing on your website’s topic. Leave insightful comments, and people will click on your profile, then visit your site.
7) Improve your search engine ranking by focusing your content on keywords related to your topic.
Give free incentives to people that visit your website, such as prizes.
Hope these help!!
I don’t know about any of you, but that was MY biggest question this entire semester: Do I want to use a template? I sat there for a good week or two simply asking myself this over and over (I might sound crazy, but I really did). I listed all of the pros and cons to each, and ended up with something like this:
Pros to Using a Template:
- My website will look awesome. Some of those templates out there are very professional looking, so my site won’t look “homemade”
- It will function well. I don’t need to be worried about one of my links disappearing or some other crazy thing that I didn’t code correctly.
- If I love how it looks, but don’t like something small (like font or color scheme), it’s a really simple fix.
Cons to Using a Template:
- Not having total control over everything. I like to be in charge of my work, and sometimes it’s easier to just make it yourself and not have to mess with a huge part of the template.
- Feeling like I wouldn’t learn the in’s and outs of it all. Would I really remember how to do something if I just made one of the simple changes that I considered one of the positive aspects of the site?
- Feeling like I wouldn’t get as much out of it if I didn’t do it myself.
After all of that, I decided to try both. I searched through the pages of templates to find something I liked, and of course I did. I loved every aspect about it: the color, the cool widget for a content box, the video in the sidebar, all of it. But then I sat there and really didn’t feel good about it. Sure it looked great, and I sat there clicking on my site almost every five minutes just to see it. It was MY site.
But, when I thought about it more, it really wasn’t mine.
Sure, to an extent it was. Those wonderful creative commons licenses said it was. But I didn’t agree. I tried changing huge aspects of the template to make it feel more like my own creation, but I still didn’t feel comfortable with it. So, I started looking at tutorial after tutorial to finally make MY website.
After compiling a bunch that gave me a very bare bones wordpress theme (I used one tutorial especially because they didn’t let you copy/paste the PHP. The author was very adamant that you wrote in each piece yourself, and that’s what I did. I need to go find it again, but when I do I’ll post it in the bookmark area), I fianlly had something to work with. Once I got through all of that, I was free to take control of everything. That video box that I wanted? I got it. And I could put it wherever I wanted. The size of the content area? The amount of sidebars? How the entire navigation area looked? I could change it all. My site may not look as flashy as the other ones that the templates could have provided, but with a little more work, it can get close!
In no way am I saying that using a template is bad. I think they are great. I bet if I knew more about how html and css worked, I would have used one of those and changed it up entirely. But I personally made it my goal to try to do as much as I could on my own. I wanted to see what I could do without a template. Maybe I’m just masochistic, haha. Who knows. But I do know now that I have a greater appreciation for my work so far, and a greater appreciation for almost any website I go on now. Who would have thought that one question would lead me to look at something that seemed so familair in such a different way.
Probably the most important choice you have to make in the graphic design of your site, after basic layout, it the choice of the color palette. Think back to the 90’s, the age of awful websites, and they all have generically awful graphic design. Tiled backgrounds, contrasting colors (Despite what they tell you in art class, complementary colors are almost always awful when used in large doses. Use a complement only if you’re desperate to draw attention to one part of the site. And please, for the sake of our retinas, don’t use purple and yellow. Ever.), and so on. A good color palette is visually appealing without being obnoxious, and should never distract from the actual content of the site. Subdued colors are usually best, unless the focus of the site is to be striking, in which case high contrast and bright colors are acceptable. Black and white always look good together, especially in artsy sites like photogalleries (With the added benefit that they go well with Lightbox.) but should be avoided for text heavy sites, because too much sustained contrast strains the eyes and impairs reading.
A good way to go about finding a color palette for your site is in reverse; find a picture you love, especially if you plan on using it as our logo or header image, and develop your color palette from that picture. This ensures that your site is not only consistent, but good looking, since a good picture will have a good blend of colors. This can be done manually, or there are sites that can do it for you, my personal preference being the Color Palette Generator.
Good luck with your color choices, and just remember that a poor looking site is almost never likely to be received well, while a good looking one can make up for a lack or brevity of content.