My Portfolio 2013: Web Design Phase 3, iterations

Assignment: get a job

Phase 3 of Web Design: Iterations

Playing in CSS: Remember The Order of Margin/Padding Shorthand with TROUBLE | CSS-Tricks. It’s clock wise from the top or TROUBLE: “The trick is that thefirst four consonants in the word are the first letters of Top, Right, Bottom and Left.”

I really like adding error pages in the initial iterations because when I click on empty links, I get an affirmation that something I linked up works. In this case, it’s my error lemur.

Adding Google Analytics Official Website – Web Analytics & Reporting – Google Analytics. They tell you to create a php and link to it in your files, but Barry says: put it in the footer.php and it works. I’m now watching my vistors.

update 5-17-13: I talked to Tom. I should have a neutral-colored background. His advice: Keep it simple. Especially with my brand, I agree that should be the road I take.

Update 5-20-13: Pinstripes! and a projects page

Screen Shot 2013-05-20 at 3.53.11 PM — Slide-in captions!

Screen Shot 2013-05-20 at 4.56.44 PM — Layout with thumbnails of process linked to the blog.

Screen Shot 2013-05-21 at 1.33.25 PM — New header. I eliminated the contact page and put that information in the footer.

Screen Shot 2013-05-21 at 1.33.20 PM — Footer has contact info

Screen Shot 2013-05-30 at 11.12.20 AM — Finally nailed the responsive nav.

Update 5-30-13: A checklist from my teacher, Barry Sevig. (Yeah, lifted right from the teaching website.)

Let’s go over a few things you might have forgotten to include in your portfolio site:

1. Google Meta Information
Two things you’ll want to pay attention to for basic search results.

<title>This will appear in Google</title>
-Title tags are important both for SEO purposes and also for wayfinding / bookmarking purposes.
Don’t forget your <title> tag’s.

If you’re using WordPress you can make this dynamic in many different ways. Check the bloginfo function in the WordPress Codex for more on populating dynamic results for meta info http://codex.wordpress.org/Function_Reference/bloginfo

More can be read at Google

To even more specific results: Use Google Webmaster Tools

2. Facebook Meta Information
Open Graph allows people to control things that happen within the Facebook platform. You will need the following:

Want to you if you’ve done it right? Try Facebook’s Debugger – https://developers.facebook.com/tools/debug
A bit more about Facebook Meta Tags: http://swarminglabs.com/facebook-open-graph-meta-tags/

3. Google Analytics

-Sign up for a Google Account
-Login at http://google.com/analyitics
-Setup a new site
-You’ll be pasting <script> code snippet they give you into the footer of your site.

4. Optimizing Images
No one wants to wait for your 4000×3000 images to load.
Images should be saved for web in Photoshop at 72 dpi and 70-80 quality. You best be saving optimized images YO!

5. Retina Logo / Trim

If you portfolio images are not retina… is your logo?
#logo {
background: url(mylogo.png);
background-size: 50px 50px;
}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

#logo {
background: url(myretinalogo.png); /* !!!!! REMEMBER YOUR LOGO MUST BE 100×100 or twice the size as the original */
background-size: 50px 50px;
}

}

6. Favicons
You need to use .ico files unless you don’t care about IE or older browsers. Then you can use PNG’s.

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Listen to Chris Coyier explain Favicons here: http://css-tricks.com/video-screencasts/122-the-state-of-favicons/
or even better John Gruber: http://daringfireball.net/2013/01/retina_favicons
Convert your png’s to .ico files here: http://xiconeditor.com/

7. Apple Icons
It’s safe to say that most people won’t be bookmarking your site on their homescreen, but maybe you will as a reference for when you pull up your responsive portfolio in an interview. Here’s how to include those shortcut icons for you Apple device.

8. Site Testing
Have you tested your site in ie8 and ie9 on a PC? Bones if you test IE10 on a desktop or Surface.

You will probably need to create some new IE specific stylesheets.
This will help you: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

So will Modernizer or the HTML5Shiv if you wrote markup in HTML5 and forget to include these for legacy browsers.
<!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
or
<!–[if IE]><script src=”http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js”></script><![endif]–>

9. HTML Resumes
This is a bonus, but if you have time I would recommend a coded HTML resume and then a link to download / print PDF resume.
Examples: Clay & 10 resume templates for inspiration

9. Window Resizer

Have you checked your site to see how it looks on a 13″ Laptop? How much of your site is visible above the fold?
Window Resizer Plugin for Chrome

Update 6-7-13: I’ve gotten feedback from Barry the instructor and Paul Nissen, the unpaid superhelper of the program and I’m reworking a bit of the linking structure of the site and cleaning up some margins so that it’s all better aligned. More screenshots of the website as it nears perfection. Paul reminded me of other devices this morning and shows me my videos not loading on his mobile phone and the media queries failing me.

Update 7-23-13

I talked to my design chum Paul N. who gave me a break down of what I needed to change. Including the project pages where there’s now a flow of projects you can click through to. Note the previous and next buttons.

I talked to my instructor, Erik who had this to say:

Your website is awkward. It is hard for me to understand what you want to do…Artist? Designer? Filmmaker? It’s all over the map, but lacking excellence….wait, the IT video is excellent, and the haptic work is strong, but many of the other pieces do not convey your strengths. I think of you as one of the smartest people in the class, but this collection of work does not display your sophistication.

So I changed the home page to be this:

(Earlier Post Relating to This Project)