Project 4 fundamentals of web designs - buendia
- 1. Scott Buendia 10/19/12 Fundamentals of Web Design
- 5. 1. Ignoring the size of mobile browsers
- 6. 1. Ignoring the size of mobile browsers 2. Using web fonts that are too small for mobile screens.
- 7. 1. Ignoring the size of mobile browsers 2. Using web fonts that are too small for mobile screens. 3. Using too much screen real estate for things that do no help sell the service or product.
- 8. 1. Ignoring the size of mobile browsers 2. Using Web fonts that are too small for mobile screens. 3. Using too much screen real estate for things that do no help sell the service or product. 4. Producing a mobile site that has too many links or is not clear on what a visitor to do when visiting the site.
- 16. 1. Layout is formatted so that it attractive on mobile browsers. 2. The slider image can easily be converted to a HTML 5 video that can be viewed on mobile devices without Flash. 3. It is clear that the user should view the content on the “slider image”.
- 18. 1. Layout is specifically designed for mobile browsers. 2. The two actions that the company want the user to take are clearly the only two choices on the page (which are viewing the video or making a card.) 3. Properly uses the real estate and the fonts are large to read.
- 22. Home-ESPN. ESPN, 21 Oct. 2012. Web. 21 Oct. 2012. <proxy.espn.go.com/ESPN/mobile>. Bizbuilt.com. Bizbuilt.com, 17 Oct. 2012. Web. 21 Oct. 2012. <http://www.bizbuilt.com>. "Menu." Dentist, Portland. N.p., 2011. Web. 21 Oct. 2012. <http://www.blodgettdentalcare.com/>. "Downtown Dental Care | Dentist in Portland Oregon." Downtown Dental Care | Dentist in Portland Oregon. N.p., 2012. Web. 21 Oct. 2012. <http://www.downtowndentalcare.net/>. Digital image. Http://images.thevine.com.au/resources/IMGDETAIL/ipad- detail_190210104421.jpg. N.p., n.d. Web. <http://images.thevine.com.au/resources/IMGDETAIL/ipad- detail_190210104421.jpg> Digital image. N.p., n.d. Web. <http://i.techrepublic.com.com/blogs/sony-s1- tablet-held-small.jpg>. Digital image. N.p., n.d. Web. <http://www.anticareer.com/wp- content/uploads/2012/07/no_money.jpg>.
Editor's Notes
- #2: Present name and reason for doing this presentation here.
- #3: Mention that 33% may sound like a lot but at some time these people will order from their tablet and a company that is not mobile friendly will miss out on sales.
- #4: Emphasize that iPad has become a common browsing tool and that most sites are not designed for its screen format.
- #5: Mention that people cannot buy when they are confused. Therefore, a lot of websites will not be able to convert people who visit on mobile browsers because their websites will not look well formatted on those devices.
- #6: Mention how this is a major problem affecting many sites because they do not understand how many people are using mobile browsers.
- #7: Mention how this is a prevalent problem and cannot be fixed until the company pays attention to mobile browsers.
- #8: Many website use screen sliders that are too large for mobile browsers and most browsers do not see the offers that companies want them to see.
- #9: A problem with the old style of mobile sites (.mobi’s around the time period of 2009). Too many links and not enough content. This style made the sites hard to navigate and hard to find what the user wanted in the site.
- #10: Explain what the watchers are going to see then show them.
- #11: Why this is bad: 1. small type. 2. site not made for a mobile device. 3. image is too large and takes up too much real estate.
- #12: Why this is bad: 1. Too much white space for grey background image. 2. Pop up add can be annoying for some users. 3. Type is too small
- #13: Why is this is bad: 1. Looks like an old mobi site. 2. Too many links, too hard to tell what the company wants us to do on this page.
- #14: Talk about how HTML 5 can render videos whereas JavaScript videos do not render well on iPhones and Apple products.
- #15: Again, explain what people are going to see, then show them.
- #16: Why this is good: 1. it is clear what a person should do when they land on the site (click the image) 2. landing page is not busy with links 3. image can easily be rendered into an html 5 video
- #17: Repeat what you said on previous slide plus this (remember: if it is important then it will be repeated twice, that is what you are doing here.)
- #18: Why this site is good: 1. Obvious what a person should do when they land here. 2. Video is playable on Apple products. 3. Layout is clean and does not fill the screen with links.
- #19: Repeat what said before and say the bullet points here.
- #20: Explain how HTML 5 is good and works well now and into the future.
- #21: Remember them that keeping the design simple is good because mobile browsers have less real estate on the screen.
- #22: Tell them to remember that a landing page should always have a purpose and the design has to made around that goal.
- #23: Hooray, you made it. Sit down and relax. You convinced them. Good job.