• Home
  • Research Interests
  • Publications
  • Presentations
  • Consulting
  • Bookmarks
  • Resource Wiki
  • Contact
Blue Orange Green Pink Purple

Posts Tagged ‘web development’

You can use the search form below to go through the content and find a specific post or page:

Mar 02

Get more from your multimedia in elearning

Guest Blogger PostWhen designing and developing an elearning course you will always be incorporating some combination of text, images, audio, and video. There are several important things you need to keep in mind when working with various types of media.

Text

When designing a course, the wording of the text is not the only thing you should consider. The font you choose can have a huge impact on your elearning course. In one of his blog posts, Tom Kuhlmann points out how the typeface you choose sets the tone or mood for a course. It is important to choose a typeface that matches the tone you want your course to have. For example, you wouldn’t use Comic Sans in a course for business professionals. You would probably be better off using something more traditional like Times New Roman.

While you are deciding on which typefaces are just right for your course, also keep Jennifer Farley’s advice in mind and don’t use more than two fonts per design. She recommends choosing two contrasting fonts such as using an elaborate or decorative font for your headings and contrast them with a sans-serif font for the main text.

Also consider the size of the font in your design. Depending on the age of your learners, a font size of 10 might be too small for them to read comfortably. On the other hand if the font is too large it could distract the learner and make the visual design less appealing.

Finally, if you are creating elearning that will be displayed directly in a browser you should only use web safe fonts. In an article about web safe fonts, Chet Garrison says that if you use an exotic font, only the limited users who have the font installed on their computer will actually see the design as you intended. The thirteen fonts that are considered to be web safe are: Georgia, Palatino Linotype, Times New Roman, Arial, Arial Black, Impact, Lucida Sans Unicode, Tahoma, Trebuchet MS, Verdana, Comic Sans MS, Courier New, and Lucida Console.

Images

When using images in your elearning course an important thing to remember is that you shouldn’t use images just for decoration. Although, like text, images can be used to set the tone of a course, they should also contribute to the content and learning.

In another blog post, Tom Kuhlman stresses the importance of using images that belong together. You shouldn’t mix photos and clipart or even different styles of photos and clipart within the same course. The images in your course should have a consistent look and feel.

You also need to consider the direction an image flows when you are deciding where to place an image in your course. You can use images to shift a learner’s focus as long as you place the image in the correct place. For example if you have an image of person pointing next to a body of text, make sure that the image is pointing towards the body of text. Chet Garrison has written a great blog post that goes into more details about this concept.

Audio

Just like images, don’t use audio in your course just because you can. You should only use audio if it helps with learning. Tom Kuhlmann talks about how background audio should only be used if it “contributes to an immersive experience” or “creates emotional cues”. Be careful not to use audio that is distracting to the learner.

Another time audio is often used in elearning is for narration. Al Lemieux offers several tips for recording good narration. The tip that I found to be the best, and that most people overlook, is the importance of using a high quality microphone. Using a good external mic instead of the one built into your computer can make your audio sound much more professional.

Video

Video can be a great way to add content to your elearning course, but it can also be really bad if it is not done correctly. One major problem is having a video clip that is too long. Learners can quickly become bored if all they are doing is watching a video. In an article for Learning Solutions Magazine, Jeremy Vest says that the optimal length for a video segment is two to seven minutes long.

In the same article, Vest says another common mistake, especially with screencasts, is not showing the instructor in the video. The learner can quickly become disengaged if they never see anyone on the screen. So, try to add in some shots of the instructor talking when it is appropriate.

I hope these tips will help you as you are designing your own elearning courses. Please feel free to share some of your on tips in the comments.

Guest blogger: Joey Weaver teaches Computer Technology to high school students at Kansas Career & Technology Center in Memphis, TN. He is currently working on a Master’s degree in Instructional Design & Technology at the University of Memphis.

Related articles
  • Revised Font Stack (awayback.com)
  • Arial, Verdana, Trebuched, Lucida. Which is your favorite font for the web? (woorkup.com)
  • Stop Using Lame Fonts (dtelepathy.com)

Images courtesy of Daehyun Park, D’Arcy Norman, & Valeriana Solaris at Flikr Creative Commons.

Feb 09

Bookmarks for January 31st through February 9th

These are my Jumptags for January 31st through February 9th:

  • Project Cartoon: How Projects Really Work (version 1.5) – How Projects Really Work (version 1.5) How Projects Really Work (version 1.5)
  • Malcontent Blogger | bLaugh – Source: ReviewMe Domain: MalcontentBlogger.com
    <img class="comic" title="Malcontent Blogger" alt="Malcontent Blogger" …
  • The Whole Internet Truth | bLaugh – Source: Wikipedia Domain: WikisGoneWild.com
    <img class="comic" title="Where is the Secret of Life?" alt="Where is…
  • Applying Mathematics To Web Design – Smashing Magazine – “Mathematics is beautiful.” This may sound absurd to people who wince at numbers and equations. But some of the most beautiful things in nature and our universe…
  • Here’s How to Add Personality to Your E-Learning Courses » The Rapid eLearning Blog – Tom Kuhlmann offers up advice on how to integrate script fonts into your elearning courses for personality.
  • Intel Teach Elements: Project-Based Approaches – Free, online teacher professional development on 21st century learning concepts: Project-Based Approaches from Intel Teach.
  • The Principle of Proximity in Web Design – Recently I picked up an old design book that I hadn't touched in a while, and it reminded me of a design principle that many of us put into practice probably
  • 10 Tips for Better Print Style Sheets – Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they
  • 50 Free UI and Web Design Wireframing Kits, Resources and Source Files – Smashing Magazine – Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers:
  • Why E-Learning is So Effective » The Rapid eLearning Blog – Tom Kuhlmann offers up reasons why elearning is popular and effective.
  • Technological Pedagogical Content Knowledge – A lecture on Technological Pedagogical Content Knowledge for students in EDUC6751.
Feb 04

Plug-in to Dreamweaver: Adobe BrowserLab

Adobe BrowserLabToday, from the Adobe Education Technologies blog, Brian Chau mentioned how much he liked trying Adobe BrowserLab:

I like the idea of being able to test how the CSS will render on different browsers/platforms without having to have all these browsers and versions be installed on my machine. One feature I particularly like is the ability to display not just a side-by-side comparison of the page render on 2 different browsers, but to display the 2 renders on top of each other as onion skins. It is amazing that sometimes 2 CSS renderings may seem to look identical on different browsers. Yet when put on top of each other, the pixel shift becomes apparent.

I’ve heard of BrowserLab in the last couple of months or so and gave it a try.  At the site, however, I didn’t catch on that you could download the plug-in to make it work inside of Dreamweaver.  That’s pretty cool.  At the site, Adobe says that free preview is for a limited number of users.  So, I encourage you to give it a try and get in on the freebie version while you can.

It works similar to the way that BrowserShots works (which was having some time-out difficulties when I tried them today). Not to worry, though, designm.ag offers up a little of 10 resources to help you preview browser renderings (including BrowserShots).

Have you tried any of these guys out or downloaded the BrowserLab plug-in?

Jan 12

Bookmarks for January 11th through January 12th

These are my Jumptags for January 11th through January 12th:

  • Browsershots – Check browser compatibility, cross platform browser test
  • Notable | Easiest way for teams to provide feedback on websites. – Notable allows you to quickly and easily give feedback on design, content, and code on any page of a website or application without leaving your browser.
  • fivesecondtest – Have users provide quick feedback on your design.
  • Apollo – easy online image proofing – documents, graphic designs, web designs, maps, photographs, and more… – 27stars – Get feedback and annotations on documents, graphics, and websites.
  • Project Bubble | Simple, Free Project Management and Invoicing Tool – Project Bubble is an easy-to-use project management tool. Easily organise, manage, invoice and share personal or freelance projects.
  • How Fonts Take a Starring Role in Your E-Learning Courses » The Rapid eLearning Blog – Tom Kuhlmann offers some insight and suggestions for selecting typefaces.
  • Usabilla – Transparent Usability: Lean and mean testing – Remote usability testing to collect feedback on a webpage,mockup,sketch or image.
Jan 06

Bookmarks for January 4th through January 6th

These are my Jumptags for January 4th through January 6th:

  • Teaching College Math » Blog Archive » How to Grade a Student Blog – A college math teacher shares her rubric and methods for grading student blogs.
  • Navigation Menus: Trends and Examples – Smashing Magazine – This article presents recent trends, examples and innovative solutions for design of modern navigation menus.
  • Showcase Of Modern Navigation Design Trends – A gallery of contemporary navigation on web sites.
Jan 04

Bookmarks for December 17th through January 4th

These are my Jumptags for December 17th through January 4th:

  • The Ultimate Guide to Creating a Design and Converting it to HTML and CSS – A full-featured how to for creating a design and then converting it to HTML and CSS.
  • Kineo – Custom E-Learning Training & LMS Solutions – Tip 33: A Shot of Theory – Keller’s ARCS Model – An overview and application of Keller's ARCS model.
  • Download of the Day: iRed Lite (Mac) – Downloads – Lifehacker – Mac OS X only: Freeware app iRed Lite lets you control almost any application using your Apple Remote, such as with Powerpoint (built in).
Dec 12

Bookmarks for December 9th through December 10th

These are my Jumptags for December 9th through December 10th:

  • How To Explain To Clients That They Are Wrong – Smashing Magazine – GIFs of spinning s on the Contact us page. Common usability mistakes for the sake of visual appeal. Splash pages. Fancy search box. No whitespace. Music on page load….
  • How to Deal with Feature Creep | Webdesigner Depot – If any assumption is safe, it’s that six months after launching a website (or sooner?), its owners will have a list of things they want to change, from minor
  • Project Timeline (Marine Theme) – Google Docs Templates – This is a template for Google Docs for project schedule tracking.
  • Cover it Live – TBR08 – Michael Grant – Barry Dahl covered my keynote live and I didn't even know it.
  • 6 Hilarious Social Media Motivational Posters – These posters are not the usual motivational posters you see hanging around offices. In fact, the little quotes we see on them aren’t exactly motivating and might even be insulting to social media users. Any offense is obviously intentional, but it’s…
  • Sketchy Web Icons: 30 Hand Drawn Icon Pack | Tutorial9 – This Icon Pack includes 30 Hand-Drawn Web Design Icons. This is the perfect set for adding that handmade feel to your own creations online.
  • Secrets to a Faster and Attractive Web Site Design Revealed | Web Design | instantShift – A web designer has many challenges to tackle. The creation of an attractive web site is as important as sending the message across effectively. After all, a web , Daily Resource for Web Designers and Developers.
  • Evaluation Wiki – Mlawiki – This wiki is an ongoing project initiated by the MLA Committee on Information Technology (CIT) as a way for the academic community to develop, gather, and share materials about the evaluation of work in digital media for purposes of tenure and promot…
  • How Getting An F On Your School Paper Makes You A Better Blogger – This guest post was written by Rob Sutton from Ramped Reviews. Image by kharied. This comes to be a surprise …
  • HOW TO: Manage Successful Social Media Promotions – Retailers are getting more traffic and sales from social media sites. Here are some great tips for turning social media buzz into social shopping buy.
  • Easy front-end framework – Easy front-end framework is all in one front-end solution. It includes CSS, HTML and JavaScript predefined code that you can easily use and reuse on your projects.
  • 50 High-Quality Free Fonts for Professional Design – Designers love to have a lot of quality fonts available to them, and fortunately there are some very good free fonts out there. In this post we'll feature some of the best free fonts that can be used in your commercial designs. If you're looking for …
  • 22 Latest Exceptional WordPress Hacks | Tutorials | instantShift – WordPress needs no introduction among designers and writers. It’s usually known as a synonym for blogging. Now days every other WordPress blogs look more or , Daily Resource for Web Designers and Developers.
  • From Blank Screen To Web Design In 5 Easy Steps – Learn a simple, five-step web design process to make sure you include the basic elements every website needs while freeing your mind to be more creative.
  • New Branding Revealed For Winter Olympics 2014 – The official logo for the Sochi 2014 Winter Olympics was revealed last week. This is the first winter games to be held in Russia and it is the first Olympic logo to include an internet URL.
Nov 24

Bookmarks for November 23rd

These are my Jumptags for November 23rd

  • 10-Second Website Usability Testing – Learn a simple method of website usability testing that takes just a few seconds to complete and offers a good measure of a website's user-friendliness.
  • 5 Useful Habits To Avoid The Most Common Mistakes In Web Design – Learn how to avoid the most common web design mistakes with five simple habits and ensure your design mockups are easy to transform into finished websites.
  • The Ultimate Toolbox for iPhone Development – iPhone development can be intimidating, especially to someone who's unfamiliar with Macs, or the way iPhone apps work. But with currently more than 100,000
Nov 21

Bookmarks for November 19th through November 20th

These are my Jumptags for November 19th through November 20th:

  • The Wired Campus – ‘The Last.fm for Research Papers’ Tops 100,000 Users – The Chronicle of Higher Education – Mendeley, a Web service that lets users organize and share research papers, recently announced that it has surpassed 100,000 users, and that its database now includes some 8 million works.
  • Principles Of Good Design: Balance – In a typical web layout, a designer needs to place a logo, text, photographs or illustration. By making a conscious effort to work on the relationship between these elements to produce an eye catching design.
  • 16 Intelligent Sites For Application Review | Showcases | instantShift – Web based applications have many advantages over software that you have to download and install it on your computer. First, You don't need to install or update , Daily Resource for Web Designers and Developers.
  • Designing CSS Buttons: Techniques and Resources – Smashing Magazine – Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style…
  • GoAnimate – Create your own cartoons and animations easily. Our tools are free and you don’t need to learn Flash. – GoAnimate is a way to easily create animations and share with friends.
Nov 17

Bookmarks for November 16th

These are my Jumptags for November 16th

  • LEGO Digital Designer : Virtual Building Software – Lego Digital Designer allows you to build legos with the software and do cool stuff, too. A revolutionary platform for virtual building. The software is free to download for Mac and PC. PowerPC Macs must download a special version.
  • Branching surveys and self-grading quizzes in Google Forms / Google Docs » Moving at the Speed of Creativity – Branching surveys and self-grading quizzes in Google Forms / Google Docs
  • Learning Visions: eLearning Guild Authoring & Development Tools Research Report (2008) – did dig up the eLearning Guild Authoring Tools Research Report (January 2008). It’s a bit out of date (almost 2 years old) and I suspect the numbers have changed a bit. My guess is that Articulate represents a larger market share than two years ago…
  • Coding a Web Design for Speed and Quality | Webdesigner Depot – The beauty of being a web designer is creating a detailed, creative, and original web design in Photoshop, without having to (for the most part) think about how
  • Design Basics: Repetition To Create Visual Themes | Van SEO Design – Last week we talked about alignment as one of the four design basics. We looked at a web page who's elements were randomly strewn across the page and by
  • Design Basics: Contrast To Stand Apart And Call Attention | Van SEO Design – Last week our discussion revolved around repetition as a basic design principle. We saw how adding repetitive elements highlights similarity and how repetition
  • Cropping Images For Maximum Impact | Van SEO Design – When adding images to your site or blog posts do you take the time to crop them to create a more dynamic and visually interesting image? Here's a simple trick
  • Whitespace: Less Is More In Web Design | Van SEO Design – Less is more— Ludwig Mies van der Rohe A good friend of mine is moving into a new apartment after being away from the area for a few years. Needing
  • Is Your Web Design Balanced? | Van SEO Design – Happiness is not a matter of intensity but of balance, order, rhythm and harmony. — Thomas Merton Balance is important in life. Work and play;
  • Tagul – Gorgeous tag clouds – Tagul is a web service that enables you to create beautiful looking tag clouds and embed it on your web page
Older Posts »

Viral-Notebook

  • Jots. Jabs. Jokes. Gems.
    This is the homepage for Michael M. Grant, an Associate Professor at the University of Memphis. Inside you can locate a collection of infectious conversations and musings about design, development and learning technologies. In addition, you can find resources and directories of my teaching and research.
  • Subscribe . . . Connect
    Subscribe with your email address:

    Delivered by FeedBurner



    Technorati Profile | LinkedIn Profile
    View Michael M. Grant's profile on slideshare
    • Popular Posts
    • What I learned from teaching children and how it changed my instruction
    • 5 things Facebook can teach us about elearning
    • A letter to my students ...
    • ADDIE—Love it or leave it?
    • The landscape of Powerpoint for elearning
    • Clipart objects. Cool and free. Just the way I like it.
    • The Perfect SCORM: Is there an impact to elearning or not?
  • Search






  • Home
  • Research Interests
  • Publications
  • Presentations
  • Consulting
  • Bookmarks
  • Resource Wiki
  • Contact

Creative Commons License
This work by Michael M. Grant is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
Designed by FTL Wordpress Themes brought to you by Smashing Magazine