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:

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:

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,

ONLINE TEACHING PORTFOLIOS DESIGN BASICS Let us explore some actual websites demonstrating professional design and some that do not

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) portfolios.html o/ f/technology/ Nearly every faculty site at

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