1 / 49

Designing for Ecommerce: SmartSite Graphics In Depth

Designing for Ecommerce: SmartSite Graphics In Depth Jason Zook Basepage changes Changing your site’s look and feel to match the season Adding new banners/promotions to your header Adding flash banners to your site Utilizing the HTML Editor to add flash to your homepage

jacob
Télécharger la présentation

Designing for Ecommerce: SmartSite Graphics In Depth

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing for Ecommerce:SmartSite Graphics In Depth Jason Zook • Basepage changes • Changing your site’s look and feel to match the season • Adding new banners/promotions to your header • Adding flash banners to your site • Utilizing the HTML Editor to add flash to your homepage • Using an outside source, Dreamweaver, to add flash to your site • Working with various product images • Getting the most out of your images • Creating “Smart Graphics” • Creating multi-tasking banners and graphics • Putting mobile controls in your hands • Creating CSS that will allow your site to display properly on a mobile device

  2. Basepage_xxx.htm controls 3 different areas of your site TOP: LEFT: Underneath the left navigation Basepage Changes Seasonal Change BOTTOM:

  3. Basepage Changes Seasonal Change Working with the Top without Editing the Basepage Changing the graphic but keeping the same file name

  4. Right click on image Save two versions Update the image Now have new and original Basepage Changes Seasonal Change

  5. Basepage Changes Seasonal Change Before After

  6. Basepage Changes Seasonal Change Changing the BasePage_xxx.htm Root > HtmlTemplates > BasePage_xxx.htm • Always a good idea to backup your files • Open BasePage

  7. Basepage Changes Seasonal Change • Find image you want to update

  8. Basepage Changes Seasonal Change • Save new logo with new name • Replace old file/graphic name with new file • Save BasePage_xxx.htm, upload to site and view changes

  9. Basepage Changes Adding a New Banner to your BasePage • Adding a new banner to your BasePage_xxx.htm • Before • After

  10. Basepage Changes Adding a New Banner to your BasePage • Open BasePage_xxx.htm • Find location that your new banner would fit and create your banner to fit those dimensions

  11. Basepage Changes Adding a New Banner to your BasePage • Create image and static page if needed • Add image to BasePage_xxx.htm and link to static page • Save BasePage_xxx.htm

  12. Basepage Changes Adding a New Banner to your BasePage • View your changes and test your link

  13. Adding a Flash Banner Using HTML Editor • Adding a Flash Banner to your Home Page using the HTML Editor • Open Content Management 1.) Content 2.) Website 3.) Text 4.) New Site Text

  14. Adding a Flash Banner Using HTML Editor • Select “HomePageRotatingBanner” • Select “Flash Manager” • Select “Upload Flash” • Select “Browse”

  15. Adding a Flash Banner Using HTML Editor • Find your .swf file • Select Open • Select Upload

  16. Adding a Flash Banner Using HTML Editor • Input your Width and Height • Select Insert • Save your changes • Upload your swf to your image directory located at: Root/Images

  17. Adding a Flash Banner Using HTML Editor

  18. Adding a Flash Banner Using Dreamweaver / Web Development Application • Open Dreamweaver • Open a new document • Clear all extra code, <!DOCTYPE, <head>, <body>… • Save • Insert > Media > Flash • Enter Title, OK

  19. Adding a Flash Banner Using Dreamweaver / Web Development Application • Two Important Files • AC_RunActiveContent.js • YourFlashFile.swf • Copy Both • Place in images directory Root / images

  20. Adding a Flash Banner Using Dreamweaver / Web Development Application • Update your Dreamweaver File • AC_RunActiveContent.js, needs to be in images folder and your file needs to reference that. • <script src="/images/AC_RunActiveContent.js" type="text/javascript"></script> • Code needs to be entered that tells the file where the AC.js is located, if not, Flash will not show up.

  21. Adding a Flash Banner Using Dreamweaver / Web Development Application • Update your Dreamweaver File • 4 places to edit • Anytime you see your swf file referenced, you need to update that code with the location of that file • Before: ,'src','YourFlashFile', • After: ,'src','/images/YourFlashFile',

  22. Adding a Flash Banner Using Dreamweaver / Web Development Application • Copy your code from Dreamweaver • Content Management • Content > Website > Text > New Site Text • Select HomePageRotatingBanner • Select “<>” HTML • Paste • Save

  23. Adding a Flash Banner Using Dreamweaver / Web Development Application

  24. Product Images Getting the most out of your images • Main Product Images • Large, Thumbnail and Tiny • Additional Image(s) • Extra Large, Glamour shots or any additional photos Main Product Images Additional Images

  25. Product Pictures Getting the most out of your images • Main Product Images • Large - Maximum size of 520px wide by 400px high

  26. Product Pictures Getting the most out of your images • Main Product Images • Thumbnail and Tiny Thumbnail - Maximum size of 150px wide by 100px tall Tiny - Maximum size of 70px wide by 70px tall

  27. Product Pictures Getting the most out of your images • Additional Images • These images are categorized into a group called “XLarge”. • View More Images

  28. Product Pictures Getting the most out of your images • Improper Image Size Manipulation

  29. Product Pictures Getting the most out of your images • Correct Image Size Manipulation

  30. Product Pictures Getting the most out of your images • Looking at them side-by-side makes the difference obvious

  31. Product Pictures Saving your images Finally, we are ready to save our images. Your graphics person will want to create a folder for them. This folder should contain the following folders: 1_TIFFs Large Thumbnail Tiny Xlarge

  32. Product Pictures Saving your images • Starting with a good image that is 700px by 580px Large XLarge Thumbnail Tiny

  33. Product Pictures Saving your images This process may seem complicated, but if your graphics people use Photoshop, all of these resizing and saving tasks can be accomplished with a single click in Photoshop’s Actions Pallet. Your graphics people can create their own Action, or we can make several of these actions available to you.

  34. Product Pictures Saving your images In this Last scenario, we have a good image that is 420px high. Since the height limit is 400px, it will need to be made smaller for the Large image, yet it is not really large enough for an XLarge image. You may want to consider ignoring the XLarge image to avoid frustrating your client by showing him/her an almost identical picture in the pop-up window. In this case, you could resize the image to 400px high and save a Large, Thumbnail and Tiny version only. 400px high 420px High

  35. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Creating Multi-Tasking Banners and graphics • Old Method • Nothing for Spiders to Crawl

  36. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Smarter Graphics • Create using both graphic and html • Add keywords to improve keyword rankings • Create multiple banners that rotate for fresh content • Utilize Title Tags

  37. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Creating a banner in Dreamweaver / Web Dev. Application • Background graphic • Leave space for html / text to appear overtop • Save image, to local and to website images folder • Open Dreamweaver • Using CSS to set up the banner, control layout, text, color • Adding Product links but also adding Keywords to improve ranking based off Keyword Research Analysis

  38. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Working in Dreamweaver Set width, height, and background image with no repeat Add Product Links Add Keyword Links

  39. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Keys to remember • Add absolute or full urls for links • Add title tags to links • Make image sources relative urls • Save and create 2 more banners • Add new keyword phrases and links to each banner • Optional; 3 different graphics with different product on each

  40. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Adding Banners to Category Pages • Content Management > Content > Website > Menus > XXX Menu • Category > Edit Node

  41. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Adding Banners to Category Pages • Text > New Menu Node Text • Under Menu Node Text Type • Desc • Select Html “<>” • Paste code

  42. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Set up multiple banners to start and stop on certain dates • Check “Use Start Date” • Enter Date to start • Check “Use End Date” • Enter Date to end • Save • Repeat for each banner

  43. Creating Smart Graphics Creating Multi-Tasking Banners and graphics • Taking it a step further • Fresh Content • Create 3 Banners • Rotate every 2 days • SQL script to ensure Banners rotate continuously • When one ends, SQL script will add 6 days so that banner will start up again in 6 days. This continues for each banner until you choose to stop the rotation.

  44. Putting mobile controls in your hands • IIS (Internet Information Services) • ISS can now identify type of browser and device and redirects can be created. • Current CSS • Created for screens 800px wide but best viewed by screenresolution set at 1000px • This mobile browser isset at 240px wide

  45. Putting mobile controls in your hands • Many different ways to access the web • Most cell phones • Smartphones; iPhone, Android, Palm, BlackBerry… • iTouch, iPad, PSP… • List grows everyday • Resolution can vary • Starting at 240px wide

  46. Putting mobile controls in your hands • IIS redirects • Create mobile/smartphone CSS • Tell which browsers/devices should redirect to new CSS • ISS can identify user agents: • iPhone = iPhone • Android = *.mobile.*Safari or Mozilla/5.0 • Palm = palm • When a browser/device you have selected enters your site, ISS can detect the user agent and it will be automatically redirected to your new CSS.

  47. Putting mobile controls in your hands • Mobile CSS • Create different widths based off % or pixels • % will be based of current screen resolution re. 100% = full resolution • Reposition items and products on your site • Option of not displaying sections of your site • Large Banners • Flash • Extra navigation

  48. Putting mobile controls in your hands • Mobile CSS • Pages will be lighter and will load faster • No more broken images or broken up site • No more horizontal scrolling • You control the userexperience instead ofbrowser or device controlling the experience

  49. Putting mobile controls in your hands • Mobile CSS • Research other sites • Research your siteBefore After

More Related