David Werth IDEAS Design & Grayout Aerosports Albuquerque, q NM & Indianapolis, IN

Transcription

1 1

2 David Werth IDEAS Design & Grayout Aerosports Albuquerque, q NM & Indianapolis, IN Dave@IDEASDesigninc.com Dave@GrayOut.com Moderator: (Jacquie Warda) (Jacquie B Airshows) 2

3 Founder and CEO of IDEAS Design, Inc. Have been developing Websites for over 15 years. Internet Marketing for over 12 years Built every possible kind of website you can imagine Worldwide clientele 3

4 4 Performing Sibling Rivalry Show with Brother, Billy Werth - 4 th Year

5 1. Start with an outline or list of everything you want in the site. Random. Don t worry about order yet. Air Shows Performers 5

6 Define Top User Paths Airshows 1. BUY TICKETS 2. AIR SHOW INFO 3. PERFORMERS 4. GRAB Performers 1. SCHEDULE 2NEWS PERFORMER 4. MEDIA CAPTURE THE VISITORS CONTACT!!!! , cell phone, Facebook, Twitter 6

7 Probably the most important step in development!! - Saves Time, Money, Aggravation - Avoids costly changes in the expensive stages - Gives everyone a clear picture of what you mean Understand programmers speak a different language than normal humans. Wireframing avoids misunderstandings!!! 7

8 8 OK, so what IS Wireframing anyway?

9 9 Top User Paths Above The Fold For most users: pixels

10 10 THE GOLDEN WIREFRAME

11 11 THE GOLDEN WIREFRAME

12 12 Top things to remember to DO & AVOID when developing or updating a website.

13 Top things to remember to DO & AVOID when developing or updating a website. 1. Remember to keep the top user paths above the fold whenever possible 13

14 Top things to remember to DO & AVOID when developing or updating a website. 1. Remember to keep the top user paths above the fold whenever possible 2. Use the same navigational elements throughout the website 14

15 Top things to remember to DO & AVOID when developing or updating a website. 1. Remember to keep the top user paths above the fold whenever possible 2. Use the same navigational elements throughout the website Use the same navigation elements in the same or similar position on all pages within the website. Studies show users ignore the navigation and scan for fresh content when landing on a new page. Therefore, consistency s cy is super important for the user experience. e Users s should always be able to quickly learn the navigation and adapt to the interface. Therefore, remember to keep the navigation simple and constant throughout the website to avoid any confusion. Your users will thank you. The navigation is not the part of the site you want to get too clever with. 15

16 Top things to remember to DO & AVOID when developing or updating a website. 1. Remember to keep the top user paths above the fold whenever possible 2. Use the same navigational elements throughout the website 3. Highlight the Current Page 16

17 Top things to remember to DO & AVOID when developing or updating a website. 1. Remember to keep the top user paths above the fold whenever possible 2. Use the same navigational elements throughout the website 3. Highlight the Current Page Usability studies say you must tell your users where they can go, where they are and where they ve been. This particular tip is about where the user is. This sort of feedback is crucial if you want to show your users where they are within your site. 17

18 Highlight the Current Page Does this Navigation Tell you where you are? How about this one? 18

19 Top things to remember to DO & AVOID when developing or updating a website. 1. Remember the to keep the top user paths above the fold whenever possible 2. Use the same navigational elements throughout the website 3. Highlight the Current Page 4. NEVER, EVER, EVER, EVER, EVER..EVER.. use FLASH for navigation 19

20 NEVER, EVER, use FLASH for navigation! It s invisible to Google (and other search engines) It takes too long to load, and has to load on every page. UX Studies (UX = Usability Experience) show over 70% of people find it annoying and bothersome. (NO, not even with the annoying little l click noises.. That actually makes it fair worse in UX studies!!) 20

21 Top things to remember to DO & AVOID when developing or updating a website. 1. Remember to keep the top user paths above the fold whenever possible 2. Use the same navigational elements throughout the website 3. Highlight the Current Page 4. NEVER, EVER, EVER, EVER, EVER..EVER.. use FLASH for navigation 5. DON T use FLASH INTRO 21

22 DON T use FLASH INTRO UX Studies show over 60% immediate bounce rates with flash intros. Load times are awful People will not wait They serve NO USEFUL BENEFIT (Doesn t matter if YOU think its cool, your visitors HATE it) 22

23 Top things to remember to DO & AVOID when developing or updating a website. 1. Remember the to keep the top user paths above the fold whenever possible 2. Use the same navigational elements throughout the website 3. Highlight the Current Page 4. NEVER, EVER, EVER, EVER, EVER..EVER.. use FLASH for navigation 5. DON T use FLASH INTRO 6. FLASH in general = BAD! 23

24 FLASH in general = BAD! Doesn t index in search engines. Mac products flat out REFUSE to see FLASH (ipads, iphones, itouch, Macbooks, etc) Awful load times Horrible updating ability Browser Navigation tools, like the BACK button, are useless There are plenty of wonderful alternatives 24

25 Top things to remember to DO & AVOID when developing or updating a website. 7. AVOID MUSIC!! 8. UPDATE OFTEN with relevant information. 9. NEVER use FRAMES 25

26 NEVER use FRAMES Very difficult for google to crawl and index Hard for user to navigate Mobile devices can t handle them properly That s very old outdated technology 26

27 Top things to remember to DO & AVOID when developing or updating a website. 7. AVOID MUSIC!! 8. UPDATE OFTEN with relevant information. 9. NEVER use FRAMES 10. Remember SOCIAL MEDIA Connections 11. CMS s make your life EEEEASY!!!! (CMS = Content Management System) 12. SEO Friendly Page Titles 27

28 CMS s Content Management Systems 1. WordPress Joomla - org/ 3. Drupal Umbraco

29 CMS s Content Management Systems Pretty much all have a WYSIWYG editor. 29

30 CMS s Content Management Systems Pretty much all have a WYSIWYG editor. What s a Whizzy-Wig? 30

31 CMS s Content Management Systems Pretty much all have a WYSIWYG editor. What s a Whizzy-Wig? WYSIWYG is an acronym for What You See Is What You Get. The term is used in computing to describe a system in which content (text and graphics) displayed onscreen during editing appears in a form exactly corresponding to its appearance when printed or displayed as a finished product. Like Microsoft WORD. But NEVER COPY and paste form WORD or into these CMS s 31

32 WordPress for your CMS Benefits of using WordPress: Cost effective Easy to use SEO benefits- plug-ins that make life easy! Easy to add content frequently Much lighter than bigger open source systems like Drupal and Joomla Ability for multiple content authors Social benefits social media plug ins 32

33 QR CODES (Quick Response Codes) appspot com/ Quickly call up text, including URLS, Phone numbers, contact info, s On tickets, Posters, Programs, Signs, etc. 33

34 MOBILE, MOBILE, MOBILE!!! Projected total smartphone sales in 2011 to reach 472 million across the globe, rising to 982 million in They say 118 million smartphones sold worldwide in Q Nielsen report that 43% of US mobile phone owners have a smartphone as of October 2011, and expect smartphones to become the majority by the end of Billion Mobiles Apps downloaded so far in Is an App in your budget? THESE NUMBERS ARE TOO BIG TO IGNORE THE OPPORTUNITY!! 34

35 MOBILE, MOBILE, MOBILE!!! Build a stripped-down version of your website as a mobile friendly website. Very simple Important information Like Schedule (updates) Useful information Parking Info Weather You can have QR Codes link to the mobile version or pages WordPress Mobile Plug ins Moably.com Quick helpful tool to get started Hire a Professional to help with this!! 35

36 Google has tons of tools, FREE tools, that make life wonderful. 1. Google Analytics & Conversion Code (connects with AdWords) 2. Google+ 3. Google A/B Testing 4. Google Places (add pics, video, reviews, etc.) 36

37 37

38 Facebook Link site updates to Facebook Status updates Post pictures Use Events Incentives for Most Likes Facebook Contests Surveys LIKE local NEWS Station s facebook pages and get them to LIKE yours great traffic!!! Create backlinks to help google organic rank Encourage comments and feedback ENGAGE! 38

39 YouTube Create YouTube Channel Post Youtube videos on Facebook and in your website Customize the Youtube Theme Post interviews, performer videos, news features Cross link with performers Youtube, local News, etc. Encourage subscribers and participation on your channel page Create backlinks to help google organic rank Optimized Titles, Description, & Tags 39

40 Twitter Great for Breaking News leading up to event Great to use during events for: Updates Weather Parking Updates and info Schedule updates (Thunderbirds are going on next!) 40

41 The Power of G+ Google+ reached 10m users in 16 days Twitter (780 days) and Facebook (852 days) took over 2 years to hit that milestone 41

42 Google+ The +1 button is shorthand for this is pretty cool or you should check this out. Clicking +1 on a site gives something your stamp of approval. It can help friends, contacts and others on the web find the best stuff when they search. Get the +1 box on your pages IMMEDIATELY google.com/webmasters/+1/button/ Tell people to +1 you! Run a +1 campaign. 42

43 If you have any questions on the things I covered in the presentation, or any internet t related questions at all, really, I would be happy to answer your questions. You can Call me: You can me: dave@ideasdesigninc.com I post information like this presentation on my blog, which you can find at You can also subscribe to the blog which will send a tiny notice each time I update it. Subscribe here: 43

44 44

45 45