Elon University Home

COM 350B – Web Publishing

Useful Links

Some concepts  / code that might come in handy when working on your resume:

Full-page backgrounds:

Perfect Full Page Background Image | CSS-Tricks

Understanding Favicons:

Jonathan T. Neal | Understand the Favicon

A favicon generator:

faviconit :: free favicon & apple touch icon creator to all devices and browsers

CSS Transitions:

transition | CSS-Tricks

Posted in Uncategorized | Comments Off

Resume Rubric

OK, here’s what I’m looking for in your online resume:

First of all, it should be a resume! Not a portfolio, not a biography, but a resume.  Some specifics that I’ll be checking for:

  • Use the boilerplate. Don’t work from ‘scratch,’ and don’t use Dreamweaver (the ‘design’ view will lie to you, I promise).
  • A page title.  Always necessary.  ’Your Name – Resume’ is a good one.
  • A consistent, clear layout and design scheme for your resume.   It’s fine if it looks ‘traditional;’ what’s most important is that it makes sense.
  • Embedded font(s), to make things more interesting.
  • Hyperlinks (opening in a new window) to your previous employers, schools, etc.
  • A favicon.  (We’ll cover this soon)

So those would be the assignment requirements.  Here are a few good ideas of things to add:

  • A picture: of you, or of what you do, or of something.  Makes it a bit more personable.
  • Icons instead of text, whenever possible.  Consider replacing or amending your text for the ‘Awards’ part of your resume with, say, a little trophy?
  • Some CSS3 bling, like rounded corners, drop-shadows, transitions, etc.
  • Some CSS layout strategies, like a float or positioning.
  • If you’d like to add any features we haven’t talked about in class, please ask me!

Some things to make sure you do NOT do:

  • Use deprecated HTML, such as <i>, <u>, <b>, <center>, or use a <table> for layout.
  • Make a super-wide page that adds a horizontal scrollbar in most desktop resolutions (max out any width declaration at about 960px)
  • Have your resume look exactly like one of the ones we looked at in class! Your content should be original.

This project will be due on Friday, March 21.  You should put it on your U drive and email me a link to it. You can also hand it in early, if you have plans for Spring Break that start early.

As with all of our assignments, I encourage you to send me a ‘draft’ version ahead of the due date, and I can point out what to fix / change.

 

 

Posted in Uncategorized | Comments Off

A few final project links

Hey Class,

First of all, good Semester!

Secondly, I mentioned to those of you at our exam that I’d post links to everyone’s final projects.  Well, since not everyone was given the opportunity to approve that request, I thought I’d just post the sites by those of you who were there that day.  So here, in no particular order, and with some omissions, are som of your final project sites:

Stephanie:

http://student.elon.edu/sbutzer/StephanieButzer/index.html

Anna Lee:

http://student.elon.edu/acrenshaw/lizzybassen

Kristen:

http://student.elon.edu/kmartin21/finalProject

Julie:

http://student.elon.edu/jmazman/Portfolio

Gloria:

http://student.elon.edu/gso/portfolio

Laura:

http://student.elon.edu/lvandrie/finalproject/
Posted in Uncategorized | Comments Off

Media Queries

Are you finding yourself re-sizing your browser window all the time to test your media queries?

Check this out, it may provide some needed comic relief:

http://artpolikarpov.github.io/garmoshka/

Posted in Uncategorized | Comments Off

Final Project ‘Rubric’

As you know, I won’t be posting a full rubric, as I encourage you to get creative and stray from standard website design. That said, there are definitely a few things I’m looking for.  To start, the vague (but most important) ones:

Clean code.  I want this site to work, on varying browsers, on varying devices.  At the most basic level, if links don’t work, images don’t show up, that’s a pretty big fail.  Pages should have unique titles, and all should have favicons.
Secondarily, did you grab a bunch of code from the server and just throw it onto your CSS page?  Cause that’d be bad, too.  Obviously, you can copy and paste code from tutorials, existing websites, and helpful sites like css-tricks.com, but make sure you know how to use it.

Aesthetic Quality.  This site should look nice.  No text crammed into spaces, but instead text with room to breathe.  No default web fonts when custom fonts can do the job better.  A consistent color scheme.

Interface Design.  When I arrive at your site, is it easy to tell where I am? Where to go and how to navigate? Does the nav make sense? Is it easy to click on and navigate?

Mobile-friendly.  Just like our last assignments, I’ll be looking at your site on a phone and tablet.  You should plan on doing the same.  Remember, we don’t want any hover effects, pixel-based widths, or columns on mobile sites.

Posted in Uncategorized | Comments Off

Links from Class

Here’s the list of links from today’s class:

Journalism / Photography:

Stephen M. Katz Photography

www.josephinemoulds.co.uk

Ciara Leeming – I tell stories using words, photos and multimedia

Jodidotcom

pohsi | video journalist

Meranda Writes

Rachel Youens: Multimedia

Lam Thuy Vo

Welcome to NickTrost.com: Online Resume for Broadcast Journalism

Horizontal Sites:

How To Create a Horizontally Scrolling Site | CSS-Tricks

http://www.normacordova.com/

The Horizontal Way – SXSW Winner – an horizontal showcase for horizontal scrolling websites, by Marco Rosella

Smooth Vertical or Horizontal Page Scrolling with jQuery | Codrops

Band sites:

http://ween.com/

http://www.whitestripes.com/

http://radiohead.com/

http://www.spoontheband.com/

http://unknownmortalorchestra.com/

Posted in Uncategorized | Comments Off

Favicons

If you missed class on Friday, we covered how to add a ‘favicon’ to your site.  Look in the address bar of your browser – there should be a small icon before the URL.  If you’re viewing this post in a tab in a browser, you’ll see that same icon in the tab, before the page’s title.  It’ll even save into your list of bookmarks, if you bookmark the page.

So that image is a favicon.  It’s usually 32×32 pixels, but can be shown both larger or smaller.  You’ll have to make one for your final project, and put it on ALL of your pages.  Here’s how.

Make a new Photoshop document that’s square-shaped, and make it large.  My usual size is 600×600.

Create the ‘art’ that goes in your favicon, keeping in mind that when people see it, it’ll be TINY.  Be inspired by the existing favicons of other sites, like Amazon, Netflix, Apple: they are extremely simple.  No anti-aliasing, no shadows, no gradients, very few colors, no really thin lines (like 1 or 2 pixels wide).  The trick is to zoom out of your PS document and see if your content will be legible at such a small size.

OK, after you’re done designing it, save it as a PSD, full-size.  You’ll almost certainly decide you need to go back and adjust things because your favicon won’t look good in the small size.

Then go to ‘Image > Image Size,’ and shrink the file to 32×32 (just change one dimension, the other will change automatically).  Then choose ‘File > Save for Web,’ save the file as a PNG.  Afterwards, when PS asks if you want to save your document, say NO – you already saved it full-size, if you saved now, you’d overwrite the large image with the small one.

In the finder, find your PNG file.  Re-name the file ‘favicon.ico’ – when you try to change the file’s extension, you’ll get a warning not to, but go ahead anyways.

Lastly, copy the file into your folder for your final project, and add this line to EACH one of your HTML pages, in the <head> :

 

<link rel=”shortcut icon” type=”image/x-icon” src=”favicon.ico” />

…and then it should show up.

Posted in Uncategorized | Comments Off

The CSS-Tricks select menu option

….that we saw in class today can be further explored here:

http://css-tricks.com/convert-menu-to-dropdown/

 

Please note that a) you’re certainly not required to use this technique for our assignment, it’s just one way of solving a common problem, and b) he goes way further with the code in his examples, dynamically generating the <select> menu (via jQuery) and dealing with Internet Explorer quirks.

Posted in Uncategorized | Comments Off

Mobile Re-design Project

Our next class assignment, due on Monday, the 29th, is to make the ‘Big Things’ site fully mobile-friendly.  This will take multiple steps, and your final product will be different than anyone else’s in the class, because there’s more than one way to solve the problems.

There is ONE RULE that I don’t want anyone to break: you can ADD to the code on the site with media queries and the like, but I DON’T want you to change the already existing code of the site to make your task easier. That is, I expect the site to look *exactly* as it does now on a desktop browser: you’re only changing its appearance for tablets and phones.

That said, there are a few things all of you should do to start with.  Here’s a list, in no particular order:

  • Add a viewport meta tag.  We have one in our HTML5 boilerplate; that’d work fine.
  • Deal with the nav: we explored this in our last class; there are many options.  One we didn’t look at is to simply change the nav to display each list item vertically – in other words, <li> elements set to ‘width: 100%;’ and ‘display: block.’  It should result in a list of links on the phone that fill the screen horizontally.  Remember to adjust the nav for both tablet and phone versions, and to remove hover pseudo-classes, as rollovers don’t work on mobile.
  • The site has two  columns; at some point, you’ll want to make it all one column (i.e. remove the float) to fit the screen.  The desktop setup is with a <div> that’s set to be 760 pixels wide and floated to the left; the right-hand column subsequently has a ‘margin-left’ of 780px to push its content over.  You’ll have to adjust these widths and margins for mobile.
  • Images need to fit on mobile! Luckily, the ‘img {max-width: 100%;}’  works like a charm.
  • We don’t want a horizontal scrollbar on mobile.  If you have one showing up, some element in your design is too wide.
  • Try to avoid using exact pixel widths; instead, consider em’s and percentages.
  • Test what you make, as what you see on your phone / tablet is what I’ll see.
  • This assignment isn’t designed to be easy, so feel free to dedicate some time to it.
Posted in Uncategorized | Comments Off

Responsive Design

Class,

I laid out the basic-basic-basics of responsive design, or, really, the basic technologies used in it, in class today. i’d now like to have you read the following articles on the subject, which we’ll use as a jumping-off point starting Monday:

http://alistapart.com/article/fluidgrids

http://alistapart.com/article/responsive-web-design

 

http://alistapart.com/article/fluid-images

(read them in this order, or it’ll get confusing)

Our next assignment, tentatively due Monday, will be to use these skills to adapt one website to look different (read: be optimized) for three different forms of screen media: tablet, phone, and desktop monitor.

(FYI, after that we’ll cover contact forms, embedding Google Maps/Vimeo/YouTube, and adding Twitter feeds / Facebook ‘like’ buttons to your sites, then the final project!)

If you’re confused by our last topic, media queries, I encourage you to follow along with this site:

http://css-tricks.com/css-media-queries/

Posted in Uncategorized | Comments Off