Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Crafting a visually appealing website with iMIS

587 views

Published on

An introduction to theming and web design practices in iMIS.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Crafting a visually appealing website with iMIS

  1. 1. Crafting a visually appealing website with iMIS By Andrea Robertson and Melissa Burpo
  2. 2. Overview • Creating the design • Working with CSS and browser development tools • Changing the master page layout • Creating custom content layouts • Styling Telerik controls • Adding JavaScript widgets to your site • Working with Sprites
  3. 3. Creating the design
  4. 4. Choosing a color scheme Created by Color Scheme Designer
  5. 5. Creating a mockup
  6. 6. Copy of the MBR site
  7. 7. The new site redfroggroup.advsol.com/imis15/mbr
  8. 8. Working with CSS and browser development tools • Inspecting elements • Changing styles on-the-fly • Saving your changes to iMIS stylesheets
  9. 9. Changing the master page layout • Moving items within the master page • Editing the 01-MasterPage.css file • Content Areas: – Adding the content area and ContentTemplateArea to the master page – Creating the content record
  10. 10. Creating custom content layouts • Creating content layouts that you can use throughout your iMIS site
  11. 11. Styling Telerik controls • Finding available Telerik skins in the demo site • Generating stylesheets and images with the Visual Style Builder • Creating your own styles for Telerik controls
  12. 12. Adding JavaScript widgets to your site • Finding JavaScript widgets • Adding widgets to your website using either a Content HTML iPart or the master page
  13. 13. Working with sprites • Increasing performance by using sprites • Creating a sprite as a single image • Using Sprite Cow to generate the CSS • Using sprites for hover effects
  14. 14. Resources Reference sites • w3schools.com • Telerik Control Guide • CSS3.info • CSS Sprites: What They Are, Why They’re Cool, and How To Use Them Tools • Sprite Cow • CSS3 Generator • Telerik Visual Style Builder • Telerik Demo site • GIMP • Google web fonts Colors • Color Scheme Designer • COLOURlovers Widgets and Plugins • Facebook Plugins • LinkedIn Plugins • Twitter Widgets • Flickr Badge • Meetup Widgets iMIS Community posts • Creating a unique homepage with CSS and Javascript • Styling your website's primary navigation • Developer style guide
  15. 15. Website Screenshots

×