UTEP AITP Presentation - 10/17/2012

Transcript

1. The 10 Most Important Things You Will Ever Learn About Web Design and Starting a Business (Not Really) UTEP AITP - October 17, 2012
2. Brandon Silverstein •Graduated from UTEP in December 2004 with a B.S. in Computer Science. •Freelance web designer during college. •Started Impulse Development in September 2006.
3. N U M B E R 1 Web design starts with HTML and CSS.
4. html5boilerplate.com
5. <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.1.min.js"></script> </head> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> <![endif]--> <!-- Add your site or application content here --> <p>Hello world! This is HTML5 Boilerplate.</p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</ script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
7. body { background-color: orange; } p { color: blue; font-weight: bold; font-size: 5.0em; text-align: center; }
9. HTML = Content CSS = Style
11. <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.1.min.js"></script> </head> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> <![endif]--> <!-- Add your site or application content here --> <p>Hello world! This is HTML5 Boilerplate.</p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</ script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
12. Semantic HTML <h1>Most Important Heading</h1> <h2>Less Important Heading</h2> <p>Paragraph Text</p> <img src="utep.jpg" />
13. N U M B E R 2 Good websites are driven by content.
14. Content First •Decide which content is most important to the user. •Organize content in an easy-to-use navigation system. •If a user can’t find content, say goodbye.
16. What are the two most important things to users when visiting a restaurant website?
17. What are the two most important things to users when visiting a restaurant website? Menu and Hours
20. Home History Menu Cooking Catering FAQ Links Contact Us Careers
25. N U M B E R 3 Mobile devices have completely changed web design.
26. Mobile FYI •378,000 iPhones sold daily. •1,000,000 Android devices activated daily. •371,000 babies born daily. •Source: lukew.com
27. Flash • Flash was very popular for building websites. • Apple killed Flash. • iOS devices have never had Flash installed (battery life, security risks, etc.) • Adobe won’t support Flash in Android 4.1.
28. Browsers/Devices • Internet Explorer 7, 8, 9, 10 • Safari • Firefox • Chrome • iPhone 3GS, iPhone 4, iPhone 4S, iPhone 5 • iPad 2, iPad 3, iPad Mini • Thousands of Android Devices
29. Deliver a unified browsing experience to all devices.
34. Full Site Home About Menu Events Contact Mobile Site Home About Menu Events Contact
38. Responsive Design
39. Responsive Design •One set of HTML/CSS/JS code. •Use CSS to change the layout of pages based on device width. •Google’s recommend method for serving mobile content.
40. p { font-size: 2.0em; } @media screen and (min-width: 768px) { p { font-size: 1.0em; } }
45. mediaqueri.es responsiveprocess.com
46. N U M B E R 4 El Paso is a great place to start a business.
47. Starting a Business •Work somewhere else first. •Find a good accountant. •Find a good lawyer to prepare contracts.
48. N U M B E R 5 Don’t write a business plan.
49. Business Plans •Business plans are educated guesses. •Business plans set unrealistic expectations. •Create a general mission statement to follow.
50. N U M B E R 6 Learn how to say no.
51. No! •We turn down projects that are not a good fit. Budget, timeline, etc. •We push back on client recommendations if needed. •You will never make everyone happy.
52. N U M B E R 7 Know your price.
53. Know Your Price • Don’t work for free unless it is for an internship. • Discounted work rarely leads to more higher paying work. • Hired a candidate because they told me what they wanted to get paid. • Be confident in your pricing and ability.
54. N U M B E R 8 Taxes are the worst.
55. Taxes •Taxes aren’t the worst, but it sucks to pay them. •Pay tax throughout the year. •Paying a lot of tax is not the worst problem to have.
56. N U M B E R 9 Network
57. Network •You never know who you are going to meet. •Word of mouth is very important. •El Paso is very small. •Join groups.
58. N U M B E R 1 0 Don’t be afraid of change.
59. Change •Change is scary. •Try to make all business decisions temporary. •Change keeps you motivated.
60. Read This Book
61. THANKS! BRANDON@IMPULSEDEVELOPMENT.COM