All posts by rosemarybpeters

About rosemarybpeters

I am a senior electrical engineering major at The University of Portland. I spend a lot of my time outside of the classroom in The Beacon office. The Beacon is the campus newspaper, and I am the Editor in Chief. When I am not busy with work or school, you can find me out and about with my friends, with my nose in a newspaper, or playing around on Photoshop or InDesign.

Redesigned website

In a classic Rosemary-esque fashion, I have redesigned my website before it was due. Hahaha.

The major changes I made included a redesign of the home page and changing the color scheme. I have gotten a lot of negative feedback about the color scheme. This time I went with blue, black and white. I used kuler.adobe.com to choose my color scheme. Definitely check it out.

I think the new colors help with readability and are visually pleasing. Here’s a link to my site so you can see what it looks like now: rosemarybpeters.co.uk

image

I am glad I did this redesign, because I think I learned more about how to better design websites by having a failed version. This time I avoided putting things in percentages, opting instead for defining div tags by pixels. This seemed to present a more uniform viewing experience in the different web browsers I viewed the site it because items were defined on where they were supposed to be on the page. The site also works on safari (the last one didn’t) and on the iPhone (can someone with an android give the site a look and tell me what’s up?). There are minimal kinks I am noticing by testing the site in more browsers, but nothing that has prevented me from turning in my site and feeling confident in its ability to work in my professor’s browser the way it is meant to.

As I have said before, this site is never going to be “finished.” I like this design for the homepage because it gives me more flexibility to expand the number of pages I have based on new activities I get involved in. The last site didn’t offer this potential.

Advertisements

It’s done!!

So the website is complete. I am just waiting for class on Tuesday to upload the website online.

Things I have learned from this process:

1) Save incessantly. There are two types of people in this world: The ones that lose data and the ones that are about to.

2) Try, try again (and try your website in multiple browsers). It is going to take a lot of attempts to get the page “just right.”

3) Make sure you give everything a unique name. It is really annoying to find the right photo when you have banner01.jpg through banner12.jpg in the same folder.

4) Keep your files and folders organized. Otherwise, it’s like looking for a needle in a haystack.

5) It’s always going to take three times longer to build the website than you think it will.

6) W3 Schools is your friend.

7) Google is also your friend. It knows everything. If you don’t know how to do something, Google it.

8) If there is a website whose design you like, right click on the page and pick “View Page Source.” You can see how the person/organization designed their site.

9) Use tables sparingly.

10) Get creative! You are capable of making a thing of beauty if you use your creativity and spend the time to work on it.

Can’t wait to share the finished website with everyone. Keep your eyes peeled for the post.

Trudging through

The good news? I have gotten to a point with the website where it is a lot of the same. All of the pages are set up, and I have the skeleton for each one. Now I just need to make the photos in Photoshop that are going to go along with each piece I am posting.

Beacon portfolio preview
Beacon portfolio preview

For each piece, I have two photos. One that the visitor sees and one that is a more opaque version of the picture that appears when the visitor hovers over a link.

Button hovered over "Raining on UP's parade."
Button hovered over “Raining on UP’s parade.”

This has been the most tedious part of the development, but I am liking the results so far.

My advice for people who are looking to do something similar: Make the photos all the same size for every single button. The consistency made it very easy to just plug and chug the work.

Right now my website works just the way I want it to in Firefox and Chrome. For some reason I can’t get my computer to open Internet Explorer. I am going to work on that issue and then preview the site on IE. More to come.

xxx

About me, Contact me

Hey all,

Sorry for the long break. I ran the Tough Mudder this weekend, and the few days leading up to it plus the few days after it were dedicated to making sure I didn’t die in the race hahaha.

Tough Mudder finisher!
Tough Mudder finisher!

Anyways, I am back to work on my website. My homepage is complete and working really well. I had to slightly adjust my color scheme, but that’s OK because I think the website looks more professional.

New homepage
New homepage

I am now working on my About Me and Contact Me pages. I want to have both of them done by the end of the day. On my Contact Me page, I am looking to embed a widget that has my Twitter feed on it. Twitter has a widget configuration that might be helpful if you are looking to do the same.

Photoshop comes to the rescue

Rollover buttons and auto sizing are the bane of my existence. I know how to make a function rollover button in Dreamweaver, but I can’t seem to get the buttons to appear in the same spot in every web browser without putting them in some sort of table (Sorry Internet, I know that is a Mickey Mouse solution to my problem). After exclusively trying to build the rollover buttons in a table in Dreamweaver, I started to search the web for other ways to complete my task.

Behold Photoshop’s slice solution.

In the end, my homepageĀ  works and the table stays in the middle of the width of the page depending on which web browser is used to open it. It also stays at a relatively fixed height.

xxx

Completed homepage

After much blood, sweat and tears, I have my webpage’s home page completed! Here’s an image of it.

You can see the rollover button working with my name. It's orange!
You can see the rollover button working with my name. It’s orange!

It works in Firefox and Chrome very well, but could be better in IE. That will become a secondary goal.

The only other thing I would change about this page is that the buttons are as clear as they were when they were in Photoshop, so I want to clean them up a little bit before I move on to the next pages.

I may also lighten the color scheme because it is VERY strong and might turn some people off. Thoughts?

Making strides

Forty-eight hours. I have officially been working on coding my website so far for 2 days, and in the last hour and a half, it has finally started to come along.

I was struggling quite a bit to understand the navigation bar as well as how html/css actually works. I can’t say I’m an expert in either by any stretch of the imagination, but I finally have a skeleton homepage with a working top navigation bar.

Website screenshot -- look the title button changed colors when I moused over it!
Website screenshot — look the title button changed colors when I moused over it!

My website timeline:

1) Get my top navigation bar working first — the links aren’t pointing at anything yet, but I know they are active. CHECK

2) Get the top navigation bar working — it should be similar to the top navigation bar, so I imagine it will be a closely-related process. TO DO – Week 5

3) Place the rollover button links in the main body of the homepage. TO DO – Week 5

4) Rebuild my buttons for the middle of the homepage in Illustrator as vector images and replace the previous images. TO DO – Week 6

5) Create .html pages for the 18 pages linked from the homepage. TO DO – Week 6

6) Create a background image for these pages. TO DO -Week 6

7) Fill in the content for these pages. TO DO -Week 7

8) Try to break the website and remove kinks in the design. TO DO -Week 7/8

9) Turn in website (& blog)! TO DO -June 28.

This timeline is daunting as I have to complete it in the next month, plus I really need to start working on my dissertation and my radio module. And keep training for Tough Mudder. YIKES!

All right, well freaking out won’t change a thing, so hiddy ho, here I go!