Staff E-Mail Outage

internet_down.png

E-mail for SCC faculty and staff has been down since Friday afternoon. If you need to reach me, leave a comment on this post with your e-mail address, and I’ll get back to you a.s.a.p. Hopefully I.T. will have things fixed shortly. I’ll let you know when I can access my inbox again.

 

Advertisements

Web Design Project 3 Turn In

Deadline: Monday, December 19 at 11:59 pm

itsdone

Please turn in Project 3 for CGA140: Web Design by placing a link to your live portfolio website in a comment on this post. If you’re not sure how to make a comment, check out the step-by-step instructions.

For a reminder of the requirements and grading criteria for Project 3, check out the Project Guideline Sheet. Although the guidelines specify a due time of 5 pm on Monday, December 19, I’m giving you until 11:59 pm per our discussion in class.

Questions?

what_do_they_mean

E-mail me!

 

FTP Client Extravaganza!

FTP or File Transfer Protocol is how we get our designs onto the web. There are many, MANY programs that do this job (don’t believe me… Google that s***). There are even a number that do it free. Here are a few solid options you can download for use at home.

Mac or Windows

Cyperduck
Cyberduck is my FTP of choice. Originally Mac only, it’s apparently now available for Windows as well.

FileZilla
Take care as some folks report you get ad spam if you don’t read the fine print and uncheck the right boxes.

Mac Only

Classic FTP
Bare bones but easy to use.

Windows Only

WinSCP
Haven’t used it since I eschew the evil empire, but it’s got a good reputation.

 

Responsive Web Design: A Review

Responsive Web Design or RWD is the hot buzzphrase in contemporary web design. RWD responds to the needs of the users by changing layout and style based on the capabilities of the device or viewport. For example, on a phone you might see content shown in a single column view while a tablet or desktop displays the same content in two columns.

The point at which the layout changes in response to a shift in the viewport is called a breakpoint (more on that later).

Three Main Keys to RWD:

  1. Use a meta element in the head of your HTML with a name of viewport.
  2. Size your content using relative measurements whenever possible.
  3. Use media queries to apply styles differently in different situations.


RWD Point the First: Meta Viewport Element

Pages optimized for a variety of devices must include a meta viewport element  in the head of each HTML page.

     <meta name=”viewport” content=”width=device-width, initial-scale=1″>

As you can see, this element has two attributes: name, which has value of “viewport”, and content,which has values of “width=device-width, initial-scale=1”.

On the barest bones level, what you’re telling the browser with this meta element is to base the width of the page on the width of the device while simultaneously establishing a 1:1 relationship between CSS pixels and device pixels.

That’s a lot of technical mumbo, but what you really need to know is that this code helps your pages display correctly on any device without the need for horizontal scrolling or pinch-n-zoom (both of which make your users want to kick puppies in frustration… and fluffy puppies at that!)




RWD Point the Second: Relative Measurements

Since screen dimensions vary widely between devices, your content should not rely on a particular minimum screen size to render well. For example, creating a container div with a width of 1000px means that any device whose viewport is smaller than 1000px will have to either shrink your content or rely on the aforementioned puppy-kick-inducing horizontal scrolling/pinch-n-zoom.

Therefore, whenever possible use relative size values, such as the following:

     div
          {
          width: 100%;
        }  

This ensures that the div in question spans the width of the viewport and is never too big or too small whether it’s viewed on a 320px wide smart phone or a 1280px desktop computer.

Beware also of using of using absolute positioning with values that may cause an element to fall outside the viewport. For example, setting a photo position:absolute and 900px from the left edge would cause it to be out of the frame on many devices.



RWD Point the Third: Media Queries

Media queries are simple filters that can be applied to CSS styles. They make it easy to change those styles based on the device rendering the content.

In essence, media queries work like this… you write code that specifies a particular requirement  has to be met in order for a certain group of CSS rules to apply. For example, you might say that a screen has to have a min-width of 640px in order to use group-of-rules #1. If the device someone is using to access your site is less than 640px wide, your media query filter won’t apply group-of-rules #1.

There are two main ways to make media queries work in your code.

The first way to incorporate media queries is to use a media attribute in the link element(s) of your HTML. Media attribute typically relies on you also creating and linking two or more CSS stylesheets to your HTML. The browser will choose one of the stylesheets to apply depending on the requirements specified.

Establishing a media attribute is easy. Simply add it to <link> (which is probably already in the head of your HTML), and then assign an appropriate value. Here are two examples for a website with two external CSS stylesheets, one titled “mobile.css” and one titled “desktop.css”.

Examples

     <link rel=”stylesheet” href=”mobile.css” media=”handheld”>

   <link rel=”stylesheet” href=”desktop.css” media=”screen”>

The value you choose for a media attribute is what directs the browser how to display your content. There are many possibilities including device type (such as those used in the examples above) or measurements such as the ones we used last week.

Examples

    <link rel=”stylesheet” href=”mobile.css” media=”(max-width:640px)”>

     <link rel=”stylesheet” href=”desktop.css”media=”(min-width:640px)”>

Media values based on measurements are ideal for fine-tuned breakpoints intended keep your site looking good at a variety of screen sizes.

The W3C Schools page on media attributes lists all possible values: http://www.w3schools.com/tags/att_link_media.asp


The second way to incorporate media queries is to embed them in your CSS using @media. This method works well if you only have a few rules to change (as with a minor breakpoint) OR you want to keep all your CSS on one stylesheet. As with the media attribute in <link>, you can specify devices or measurements for @query.

     @media
          handheld
          {
               body
               {
               font-size: large;
               /* or whatever other rules you want to add here */
               }
          }

@media
          (max-width:640px)
          {
               body
               {
               font-size: large;
               /* or whatever other rules you want to add here */
               }
          }

For more info on @media, check out the W3C Schools page: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

P.S. Although you can use both the media attribute in your HTML and @media in your CSS, you certainly don’t have to. Either/or is fine. Which you pick depends on the situation at hand.

Breakpoints in a Super-Nutty Nutshell

As stated above, a breakpoint in terms of RWD is the point at which the layout of your site changes to accommodate a new device or screen size. Although some people set breakpoints based on specific devices, this is not ideal since technology changes rapidly. Instead, use the content of your website to determine breakpoints. Resize the browser screen until the design needs adjustment and you’ve found a breakpoint. You can use a pixel measuring service such as http://whatsmy.browsersize.com/  to measure your viewport size.

How many breakpoints do you need? Again, it varies from site to site, but choose enough  keep your website functional and readable across the board. Usually sites have at least a mobile and a desktop breakpoint.

FYI: many people advise designing responsive sites from small to large. In other words, they suggest laying out for the smallest mobile device first then progressively enhancing the experience as the browser gains more space. However, you should adjust your workflow to a method that works for you.

Examples

The responsive code we worked on last week in class is available on our course Dropbox should you want to take a look at all the above in action.

 

Web Design Project 3 Guidelines

Self Meet World!

Your third and final project in CGA140: Web Design is a portfolio website for the one-and-only YOU. Having your own website is THE it accessory for designers in the digital age. Heck, it’s more than an accessory… it’s a necessity. While it might feel a bit odd to toot your own horn via code, remember that at least we designers know how to make shameless self-promotion look GOOD! 😛

shameless_self_promotion

Want some specifics? Sure you do! Checky check the Guidelines for Web Design Project 3: Personal Portfolio Website.

 

Web Design Project 2 Submission

Happy Just-Barely Thursday, Web Designers!

As you no doubt know, Project 2 is due tonight, December 1, by the start of class. The Project Guidelines ask you to submit your website as a link. However, we have not yet learned to bring our sites live, so, instead, please submit your complete website folder labeled YourLastName Garden State Press to the folder provided on our course Dropbox.

FYI, I will be away from my computer for most of today, so I won’t be available to answer questions. Therefore, do the best you can with any last minute issues in your site, and don’t forget the resources available to you including internet research, your textbook and the HTML and CSS validators. Incidentally, I recommend everyone validate before submitting even if your site seems to be working. Clean, standards compliant code is part of your grade.

Stay strong. You got this!

you_can_do_it

 

Extra Web Design Hours Part Deux

I will once again be in the Mac lab during open hours today, Wednesday, November 30. I will be there by noon and will stay until 2:3o. Web designers, this is your chance to get help putting the (hopefully) finishing touches on Project 2.

Edit:  I’m running a little late, but I should be there by 12:15 PM. If you can’t see me during lab hours today, and you have questions about your project, email me. Make sure to describe specifically what’s going on, and include the folder of your code.

 

Last Minute Announcement of Awesomeness

Looking for something fun to do tonight, Friday, November 18? Of course you are! So why not check out the anniversary party at Studio Luloo in Oaklyn, NJ! The bash starts at 7 pm, and Salem Community College CGA major extraodinaire Billy Bollinger will be playing with Podacter, his  self-described “dum dum punk band” (way to sell yourself Billy).

billys_band

If that’s not reason enough to bestir yourself (and why the heck wouldn’t it be?!?), all the money earned goes to wicked good causes.

In Billy’s words:

All proceeds from the door will be donated to Studio Luloo, keeping the space alive and able to continue being a cool spot for local bands and to benefit their awesome community outreach programs like COMMUNITY ROCKS!

On top of that, if you pick up a cd, cassette, or vinyl from my band, all money made at our table will be donated to the American Civil Liberties Union (ACLU.ORG) to help defend basic human rights. We will also have a donation jar conveniently placed out in case you really hate physical records.

YAY thanks for listening ya’ll and let’s smash fascists, racists, sexists, and homophobes together!

The Need to Know

The Location

Studio Luloo
215 W. Clinton Ave
Oaklyn, NJ 08107

The Amenities

Studio Luloo is BYOB for those who are of age and located directly next to “a pretty dank brewery, a pizza place, and a water ice place lovingly named Yum Yum’s.” (Billy’s words).

The Music Lineup

In addition to Podacter, the lineup (described oh-so-succinctly by our Mr. Bollinger) is as follows:

  • No Regrets (Ska Punks playing their first show in 5 years)
  • Sleep In. (twinkly, mathy smarty pants emo stuff!)
  • Brian Mietz (Weezer-esque funny songs from a good boy and fellow graphic designer)

For more information about Podacter visit podacter.bandcamp.com.

In Conclusion…

This is such a great idea. It’s exciting to see people fighting the good fight. I so very very much want to go, but I have to work :(. You all need to attend and tell me about it so I can live vicariously! Go… change the world (and maybe enjoy a beverage and some music while you’re at it).

 

Copyright/Copyleft/Copy Center?

copyright.jpg

Hello web designers (and anyone else interested in the fun, FUN world of copyright)

For your clicking pleasure, I’ve assembled this handy dandy post o’ information and resources related to copyright for artists and designers. This is a dense topic and what is listed here by no means covers everything. But, hey, ya gotta start somewhere!

Copyright Basics for Designers

Basics from the American Institute of Graphic Arts (AIGA)

A primer from the Graphic Artists Guild


Alternative Licensing

Creative Commons Licensing

Copyleft movement website and handbook.

Everything is a Remix: the excellent short film series we watched in class.

RIP: A Remix Manifesto: a fascinating look at the way remix culture is evolving how we think of copyright and creativity.


Sources for Public Domain and Alternative Licensed Media

Be sure to always check individual licenses to make sure they match your particular use. Also, attribute when required.

General Media

Images

  • Flickr: millions of photos but somewhat unruly in organization.
  • PhotoPin: sometimes has more relevant search results than Flickr
  • Google filtered search: just be careful since following an image outside your search (as in clicking on “related images”) can lead you to copyrighted material.

Fonts/Web Fonts

  • Font Squirrel: all fonts are free and licensed for commercial use. Font Squirrel is also home of a web font generator that can be used to convert any font for use with the @font-face property.
  • DaFont: lots of interesting specialty fonts. Check the license.
  • Google Fonts: the evil empire has its fingers in everything, but, as with Font Squirrel, the fonts are all free and licensed for commercial use.

Fair Use

The Code of Best Practices in Fair Use the Visual Arts published by the College Art Association.


Appropriation and Fan Art

This is a video of a panel at Comicon at 2012 with copyright expert Josh Wattles. It’s long-ish but worthwhile if you are interested in fan art or the appropriation of pop culture imagery in general. This one’s for you, Doug!