Design woes and a battle against hover

I’m nearly three pages into my website design, and my computer fan hasn’t stopped running for hours. I guess if my computer has to work hard to do this code thing, I do too. My biggest overarching problem with this assignment is my design concept. When I first drafted a layout for the site, I decided to exclude the first jobs text and make my site only focus on the story of the Missouri Photo Workshop. The jobs text felt really out of place to me within the rest of the content. However, I soon realized the jobs text is a solid 1/4 of the site’s content, so I need to include it. I have tried to brainstorm new entry points for my website that ties the whole story together with this inclusion, but I’m feeling kind of stuck. The conceptual portion of this assignment has brought me a lot more stress than I expected.

Design woes aside, the biggest code-related challenge I’m having right now is related to the hover command. I was able to set up a column grid to organize a page of photos in two columns. I would like to have the photo caption show up over the photos on a transparent background using hover. I’ve tried to Google sample code for this function, and every site suggests a different means to make the caption appear. The code is also a bit more challenging to make work because I have already manipulated the positioning of the photos, and I’m not sure how to make each caption box fit the size of each individual box.

Screen Shot 2015-03-18 at 9.08.47 PM
Plz send help
Screen Shot 2015-03-18 at 9.24.21 PM
Plz send help

Here’s a list of some additional questions I have on my mind right now:

-How do I make this content tell a cohesive story?

-How do I put a stroke around text?

-How do I pick fonts?

-If I use html5 do I need to include a charset? Add code for browser compatibility?

I am really glad that tomorrow’s class time will be work day. Hopefully many of my questions will be answered tomorrow!

 

Advertisements

2 thoughts on “Design woes and a battle against hover

  1. Sarah,

    I think your draft looks great compared to the woes you say you have been having! I think getting those questions answered will be a lot of help, and you’ll finally be able to move on to tackling different problems. I think it’s been easier for me to learn from someone teaching me rather than Googling it, because that always puts my code down a rabbit hole of problems. I like that you used the grid format for your site – it’s definitely coming along, especially from that first to second screenshot you posted! Good luck!

    Like

  2. Super delayed comment (it’s only been a couple weeks…), but better late than never! Your frustrations and questions definitely resonated with me. Looking back, I probably could have spent more time carefully choosing the right fonts for my site, but by the time I got so immersed in the coding aspect of the project, fonts got put on the backburner.

    Compared to your final draft from class presentations though, it looks like you eventually figured all these issues out! I particularly like your hover idea with the captions. There are a lot of ways we can present captions alongside (or on top of) their photos, and this kind of steers from the expected placement of the caption underneath the photo. Good work!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s