I’m behind on sharing this wee bit of CogDog webcrapcraft — Mariana Funes asked me to redesign her online presence page. This is the kind fo stuff I do know to make a few kibbles and bits.

Her previous one (which sadly I did not save a screen shot for the “before” photo) was a basic HTML table-based one. To jump to the after:

mf1

She had liked what I did for myself at http://cogdog.info — this was done by customizing a Bootstrap theme. I suggested about 6 or 7 different templates; after consideration she really wanted the theme I had used (something about the “spinny gizmo” for the top scroll down indicator).

No problem since I knew the Treble One Page Responsive theme well (I know have a multi-site license and am using it on at least 2 new projects). These are not the kind of templates where you push a few buttons, select some menu items, and type in a box; to use them you have to know some HTML, and CSS.

And now I know a bit more about less (get it?) (ouch)

So for a breakdown of the mods to Mariana’s site from the template; I ended up morphing a few pieces, and moving parts from here to there. For each, the original Treble screens are shown in the bottom right.

The Welcome

mf-main

Mariana likes the photo I took of her companion, Colin the Magnificent. We talked some about if its appropriate to have a dog on your professional portfolio page (no argument here), but in the end we want to suggest a sense of playful ness. I re-crafted an icon she had to be the “spinning thing” (when you hover over the top icon, it spins and changes to a “scroll down” image). And like my site, I did some edits to the CSS and icon set to create a different set of social media icons, she wanted Google+, Scoopit, and Storify.

About

mf-about-nu

The Treble theme’s About page is more for a company, where there are icons to represent staff, and rollovers for their social media links. That got yanked out for a simpler layout, using the underlying Bootstrap spans to put her picture besides her statement. You can see at the top the nav bar features her logo again (left) and the modified set of social media links (that’s all in one div of the template)

What I Do

mf-what-nu

Mariana had outlined three main categories for her work, Cognitive Coaching, Teaching, and Learning. IN trying to figure out how to organize this, I saw that the Treble “Features” page, had a 3 part structure, meant to describe features of a product. I experimented with image backgrounds, but the built in CSS class for a dark background worked to separate it from the previous page.

To put the three areas in as teaser ex, I borrowed from the Treble blog listing (also in rows of 3 items). And its not in the screen shot, but the bottom of the features has a little slide show type display of quotes, which we used to put some testimonials in.

Each one of those leads to a stand along page, which I used from the Treble Blog Post template, and modified the right side to be simpler.

Publications

mf-publications-nu

Mariana had three published books on her old site (I’m glad she does stuff in 3s! though with Bootstrap I could do 2s 4s 5s etc). For this one, I did use those profile designs from the Treble About page (meant to be about staff) to point to each of the books. It took a little play with the images to make them fit in the circle, and some more to get the rollover to have a link to Amazon instead of social media sites.

Below the fold is a text list of published papers, with a link to her Mendeley where she maintains her bibliography.

Online Presence

mf-online-nu

I decided to use the Treble portfolio page to make a gallery of all the sites Mariana uses (a direct product of her activity in ds106?). I really like the way this works, as adding classes to each item, allows the category sorting that happens right in the page. We settle on groupings on Cognitive Coaching, Learning, Teaching, Writing, and For Fun.

Each icon link ajax loads a stub HTML page as an overlay

mf-online-item-new

For a few like this one, I took the liberty of embedding an animated GIF and a YouTube video.

Contact Form

mf-contact-nu

This page took a fair bit of modification; the Treble theme basically provides the layout but no functionality for the form. A “mailto:” link is lame. I was able to deploy a php contact form processing script from another template I am using (which sadly lacks decent form input error checking). We added a field to include a subject line, and I also added her Paypal button.

That’s It

I think so! It was a fun project to sort out how to restructure. I’ve not had a project where someone hands me a spec and I go off an process it out like a sausage grinder. It’s always organic, back and forth, and discovery along the way. It might be why these things seem to take me longer to do.

Anyhow, my shingle is out; if you have a need for a site like this… Well, there is a contact form on my own landing page. And I do more than this Treble theme (look soon for writeup on a new site I made for a local restaurant)

The post "Making of Mariana’s New Landing Page" was originally dropped like a smoking hot potato at CogDogBlog (http://cogdogblog.com/2014/03/marianas-new-landing-page/) on March 15, 2014.

4 Comments

Leave a Comment

All fields are required. Your email address will not be published.