ONLINE TEACHING PORTFOLIOS FOR TEACHING, LEARNING & PROFESSIONAL DEVELOPMENT: A Mott Community College Center for Teaching and Learning Workshop, presented by Dustin M. Price

ONLINE TEACHING PORTFOLIOS DESIGN BASICS

Keep it clean and clutter-free Try to keep everything simplistic or even

minimal with only your most important content spotlighted. Sometimes less really is more.

Do some web design recon Make some mental or actual notes on what

you would like to emulate on your own site.

Put visual hierarchy to use It’s a term that basically means our eyes

pay attention to web space in a certain pattern – a pattern that can help you optimize important content on your site.

Make your text easy to read Make sure your colors work together. Don’t

use uber-tiny font size. Stand by your fonts. Make sure your fonts all the same across your design.

Consider your sites look on Mobile Devices• Does your provider have CSS? How will

your website look on a smart phone?

Images and text from: http://www.wix.com/blog/2014/03/5-web-design-tips-for-a-professional-site/

ONLINE TEACHING PORTFOLIOS DESIGN BASICS

Mobile Devices With nearly two-thirds of American cell

phone owners browsing from smart devices, creating an optimized mobile presence is not a nice extra but an absolute necessity.

The numbers don’t lie: mobile browsing has doubled itself since 2009, and the numbers just keep going up.

A large number of website providing companies now have an automatic mobile viewing feature (which is awesome) Many of these companies even offer tools

to manipulate the way your cite appears on smart phones, tablets, etc.

Images and text from: http://www.wix.com/blog/2014/03/5-web-design-tips-for-a-professional-site/

ONLINE TEACHING PORTFOLIOS DESIGN BASICS

Only use sharp images in focus, not pixelated This is one of the most common mistakes

of beginning web design. If possible use photo editing software to crop and downsize images, save for web, with resolution of 76 PPI (pixels per inch).

Use open source imagery if you cannot create your own.

Easy, clean navigation is a must This is why using the a template is the best

choice for beginning designers. The navigation stays the same on each page only the content changes.

Most online website developers work from the template format. You choose a template then edit the images and content.

Make sure your buttons (navigation) work.

Make your buttons count, consider 4 to 5 buttons: Home, About, CV, Research, Teaching

ONLINE TEACHING PORTFOLIOS DESIGN BASICS

Minimal is often elegant. Choose your colors (text, buttons, backgrounds) wisely Tiling backgrounds, poor color schemes or

added textures can kill the professional quality of a site immediately.

Flashing Gifs are better left in the mid 90’s. Any blinking or flashing elements can become a distraction. Flash is dead.

No Ads

No music

Watch for typos

Familiarize yourself with the “how to videos” provided by your website company These companies are used to dealing with

people with little to no web design backgrounds and are rather user friendly!

ONLINE TEACHING PORTFOLIOS DESIGN BASICS

Minimal is often elegant. Choose your colors (text, buttons, backgrounds) wisely Consider companies that have domain

names included in their basic package.

Website costs anywhere from $5.00 to $25.00 dollars a month are great deals but many of these companies also have “free versions”. Often, in these cases you are allowed a window of time, or you must have their company logo on the site.

I write my website costs off on my taxes. It’s a teaching expense.

Analytics, Reports, Data Very often your website company will have

an area to monitor traffic (consider SEO search engine optimization).

This data could be used in a number of ways.

First and foremost you can see what areas people are viewing, how often, from what type of device, where they live, how long they were on your site etc.

Example from my website, www.dustinmprice.com

ONLINE TEACHING PORTFOLIOS DESIGN BASICS

Let us explore some actual websites demonstrating professional design and some that do not

http://www.angelfire.com/super/badwebs/

http://www.dustinmprice.com/

http://www.miriamposner.com/index.html

http://www.kenrogoff.com/

http://www.jenniferlundstrem.com/

http://www.prosintraining.com/

http://blogs.darden.virginia.edu/deansblog/

http://www.gautammukunda.com/

http://www.cwanderson.org/

ONLINE TEACHING PORTFOLIOS DESIGN BASICS

Let us explore some actual websites demonstrating professional design and some that do not (I apologize, but truly these sites have issues)

http://iws.collin.edu/jbeck/http://iws.collin.edu/ebock/http://iws.collin.edu/dgarrison/http://iws.collin.edu/kennedy/http://www.tammyengert.com/http://brightwoman.com/http://blog.benmcmurry.com/p/online-teaching-portfolios.html

https://sites.google.com/site/meganmonahanportfolio/

http://www.laurengalster.com/http://amyburghardt.wordpress.com/http://www.cgreenhow.org/http://www.kerrygorgone.com/http://lawprofessors.typepad.com/trusts_estates_prof/technology/http://www.ericgoldman.org/ Nearly every faculty site at http://iws.collin.edu/

ONLINE TEACHING PORTFOLIOS DESIGN BASICS

Now let us take a look at some of the companies mentioned in your handouts.

Wix –free

Weebly –free

Squarespace –free

Portfoliobox

Homestead

WordPress –free

Google Sites –free

Edublogs –free

Portfoliogen -free