Arelia on the Web

I wanted to play around with YouTube captioning just so I know how it works. I haven't posted many videos to YouTube, but I had a few recent vacation videos that include speech. I transcribed one video in a .txt file and uploaded the file to the video. Even without time information, YouTube did a good job of matching text to audio.

Next I did a little research on captioning tools which led me to CaptionTube where I created a .srt file and uploaded that to another video. CaptionTube was quick to get started and easy to use for do-it-yourself captioning.

Even though I arrived to the main page of the website with the intention of donating, neither of the two donation links near the top of the page immediately stood out to me. Reversing the color of the Donate link in the primary navigation would make the link more prominent than the other navigation links in a way that is simple and consistent throughout the site. Wired Impact, a St. Louis design agency for nonprofits, gives this and other advice in their article on donation buttons: wiredimpact.com/blog/better-donate-button. They have several more articles full of best practice advice for nonprofit websites. 

I also noticed in the organization's last month of tweets and Facebook posts there were no direct requests for donations outside of Giving Tuesday on November 27. Followers should be reminded about the importance of giving much more often. However, if for some reason that's not how the organization wants to use their  social networks, they can at least encourage page visitors to share posts with their followers. Carnival Cruise Line's Facebook page does this very well by giving followers an action to take, frequently and explicitly asking them to like and share.

I picked up a few skills and relied on a few new resources for the redesign of my professional site.

I read this article on Responsive Background Images: http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/

I also coded my first PHP script, a simple form mailer for the contact form, with help from http://www.webdevfaqs.com/php.php and http://www.youtube.com/watch?v=rdsz9Ie6h7I.

I recently redesigned my professional site using Twitter Bootstrap:

During the busy period I mentioned in the last post I updated my personal website.

Before:

After:

Mountain Harbor Resort recently launched a redesigned website that better communicates the resort’s luxurious offerings, opportunities for adventure and family-friendly atmosphere:www.mountainharborresort.com. This is my latest project as a producer at Aristotle Web Design. I loved working with the team at Mountain Harbor.

Site features and updates include:

A CMS tool, which the client did not previously have. 

Main page and interior graphic callouts for booking, fishing, Turtle Cove Spa, etc. 

A guest review form

Updated panorama and video technology using TourWrist and YouTube embeds

The client is still in the process of replacing their older rental photography with Flickr galleries, and they're continuing to make other updates with their new CMS.

I also started storing my in-development files in Dropbox which gives me the flexibility to make edits from anywhere.

I developed the reunion site to the point where it was not finished but ready to show off for my family reunion bid. Unfortunately, I didn't win the reunion but it was decided I'd host the one after, and I volunteered to create a website for the winning city.

To wrap up that project, I bought the domain name and pointed it to my hosting at Go Daddy.The site files are still in a subfolder of areliajones.com. I created a subdomain, ttm2014.areliajones.com, at Go Daddy, but I'm not sure that was a necessary step. What got everything working was creating that subdomain in the DNS records for areliajones.com and pointing it to the subfolder URL, then configuring the DNS records for thompsontraylormcclellan.com to point to the ttm2014 URL as a URL Frame. I did all of this before with jonesreunion2012.com, but I didn't remember how, so I hope having it documented here will help. An article about CNAMEs and naked domains was also a big help.

Position the images to the bottom of their container ul#carousel (green)

Keep the overflow:hidden on ul#carousel and make the height 100%

I did this instead of setting the height to make room for the images because as I changed the height in Chrome the box grew from top to bottom instead of growing from bottom to top like I'd expected. I also positioned it to 0px from the bottom of it's container, but that did not seem to do anything. So I moved on to set height on the clip.

Set overflow:hidden on .jCarousel-clip (yellow) and make it tall enough to not scroll or hide anything vertically

Do nothing with .jcarousel-container (orange) which was created by the jCarousel script and serves no purpose

Absolutely position .jcarousel-skin-ttm2014 (red) and move it some pixels from the bottom

I still need to adjust the position of the arrows more and do a lot of cleaning up in my CSS and the stylesheet from jCarousel.

For example, I had positioned the list wrapper 50% to the left and the list itself 50% back to the right to center it. That didn't work with all of the divs added by jCarousel, and it caused the page to scroll: http://screencast.com/t/yXnLgcnPU.

I added a rainbow border so I could see everything that was going on: 

Then I reviewed overflow and floats at CSS Tricks and I commented out what I thought I could in the jCarousel script so I could remove the script's styles and control styles in my own stylesheet. I couldn't find the formula in the script that controlled the width of ul#carousel (the green bordered box), but eventually I realized -- because of a Harry Roberts CSS carousel article that, at the time, was completely unrelated to my work on this site -- that I didn't need to clip the ul as the viewport, I needed to clip the ".clip" div around it (in yellow). And once I gave the .clip div a width I was able to center it using margin: auto. 

Thanks also to a couple of threads at Stack Overflow and Chrome inspector which told me my animation was broken (*I wanted to use 'easeOutBounce' for the easing but I had to change it back to the default 'swing'.

Next, I have to finish my art, pop it in, adjust positioning and probably face overflow issues again -- my art is tall but my list items want to wrap when there's extra height available.

Afterwards I'll work on the interiors and the navigation, which will probably need a second level. I'll wrap up by compressing my files and images and studying load times.

I have another friend for whom I'll be doing a portfolio site in WordPress soon. In the meantime, I've started a new project of my own as part of a bid to host a 2014 family reunion: http://areliajones.com/webfolio/ttm2014/.

For this site I've learned about fluid background images:

A List Apart - http://www.alistapart.com/articles/supersize-that-background-please/

Nicolas Gallagher - http://nicolasgallagher.com/css-background-image-hacks/

CSS Tricks - http://css-tricks.com/perfect-full-page-background-image/

...and I needed some review on positioning:

http://www.alistapart.com/articles/footers