It all starts with an Idea. Take your idea and learn how to create your own Cloud Based Startup in Armenia. Learn the technology and paths to needed to having a profitable company.

1. How to Create a Successful
Web App & Cloud Based
Startup in Armenia
-Todd Fabacher

2. Multi Platform

3. We live in a Multi Device world

4. What Does that mean for me?

5. Responsive Design

6. Fluid Grids

7. CSS Media Queries
@media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none
}
// and so on...
}
● 480px
● 600px
● 768px
● 900px
● 1200px

8. HTML
<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
</div>

9. CSS
/* SECTIONS */
.section {clear: both;
padding: 0px;
margin: 0px;}
/* COLUMN SETUP */
.col {display: block;
float:left;
margin: 1% 0 1% 1.6%;}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {content:"";
display:table;}
.group:after {clear:both;}
/* GRID OF THREE */
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.1%;}
.span_1_of_3 {width: 32.2%;}
/* GO FULL WIDTH AT LESS THAN
480 PIXELS */
@media only screen and (max-width:
480px) {
.col { margin: 1% 0 1% 0%;}}
@media only screen and (max-width:
480px) {
.span_3_of_3 {width: 100%; }
.span_2_of_3 {width: 100%; }
.span_1_of_3 {width: 100%;}}

10. What it will Look Like

11. How it Works
/* SECTIONS */
.section {clear: both;
padding: 0px;
margin: 0px;}
.section
splits up the page horizontally. You'll
need a few of these to break up the
content, and you can use them in your
main wrapper, or within other divs.

12. How it Works
/* COLUMN SETUP */
.col {display: block;
float:left;
margin: 1% 0 1% 1.6%;}
.col:first-child { margin-left: 0;
}
.col
divides the section into columns. Each
column has a left margin of 1.6%
(around 20 pixels on a normal
monitor), except the first one. Using.
col:first-child { margin-left: 0; }
means you don't need to use class="
last"anywhere. It works in all browsers
since IE6.

13. How it Works
/* GROUPING */
.group:before,
.group:after {content:"";
display:table;}
.group:after {clear:both;}
.group
solves floating problems, by forcing
the section to self clear its children
(aka the clearfix hack). This is good in
Firefox 3.5+, Safari 4+, Chrome, Opera
9+ and IE 6+.

14. How it Works
/* GRID OF THREE */
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.1%;}
.span_1_of_3 {width: 32.2%;}
.span_1_of_3
specifies the width of the column.
Using percentages means it's 100%
fluid.

15. How it Works
/* GO FULL WIDTH AT LESS
THAN 480 PIXELS */
@media only screen and (max-
width: 480px) {
.col { margin: 1% 0 1% 0%;}}
@media only screen and (max-
width: 480px) {
.span_3_of_3 {width: 100%; }
.span_2_of_3 {width: 100%; }
.span_1_of_3 {width: 100%;}}
@media queries
as soon as the screen size
gets less than 480 pixels the
columns stack and the
margins disappear.

16. Responsive Example

17. Object Manipulation

18. Responsive Web Design
Book
teamtreehouse.com
Classes
Tutsplus.com
How-To Articles
This Is Responsive
Resources
Learning More

19. Framework

20. Bootstrap
● From Twitter
● 12-grid responsive layout
● Custom jQuery plugins
for common UIs like
carousels and modal
window
● Bootstrap customizer
● Well documented with
lots of examples
● getbootstrap.com

21. Skeleton
● simple and clean
responsive CSS
boilerplate for HTML5
● Grid responsive layout
● A PSD template for
mocking up your web
designs
● If you want to get started
with responsive design
quickly
● www.getskeleton.com

22. Foundation
● From ZURB
● 12-grid responsive layout
● Rapid-prototyping
capabilities
● Prototyping
● Well documented with
lots of examples
● foundation.zurb.com

23. Responsive Design Framework

24. CMS Systems

25. Why are CMS good?
● Frameworks
● Marketplace
● Themes / Plugins
● Large Community
● Open Source

26. Example: GeoTheme

27. Create a Global Directory!
Expandable Google Map V3
with Ajax markers
Connect with Social Media

28. Recurring events option
Enhanced Listings with
Recurring Payments
Review management for
place owners

29. Web Apps Frameworks

30. Make it Native

31. Starts
with an
Idea

32. 1st 2nd
?

33. 47.37%Odds for Red

34. 0.0047%
Odds to create another Social Site

35. Know your Competition

36. Find the Niche

37. Armenian Cloud
5. SaaS

38. Development

39. YOU

40. YOU
How to get help?
Find other freelancers?
Where to get help?
What areas do you need help?

41. YOUR TEAM
Global
Female
Mixed Abilities

43. How to Make

44. Advertising
& Sponsors

45. Advertising
& Sponsors?

46. $236,000

47. Subscribers

48. Advertisers
200

49. Advertising Income
Business = $99
per year
Enhanced = $199

50. Subscribers
2,000

51. Web App Income
Consumer = $6.99
Business = $29.99
per month

52. Web App Income
Consumer = $13,980
Business = $59,980
per month

53. Income from
Different Areas
ContractBusiness Consumer

54. Save This

55. Heartbeat Income

56. The Death Chair

57. Marketing

58. What about Social Media?

59. Content Marketing

60. Goal: 5,000 Views
Challenge :
1. Interactive Campaign - no blog
2. Graphical
3. Link Armenia with WordPress

61. Our choice
1. Graphical
2. Embeddable
3. Open roads to new viewers
4. Linked to Economic Development

63. 188,000+ ViewsResults :
1. Embeds in 17 websites
2. 382 downloads, 32 likes, 10 comments
3. 400+ social media activities
4. Most talked about on LinkedIn

64. Blogging

65. Blogging
1. Improves Communication
2. Crystalize Thoughts
3. Feedback on Ideas
4. Forces Learning
5. Create More Content
6. Build Credibility

66. Advertising
..Targeted Only..
$5,000 - Page per month

67. Marketing Tips
1. Customers determine your priority
2. Focus on your customers and
the money will follow
3. Word of mouth = $$$
4. It is a numbers game
5. Patience, success takes time

68. 中
國
Don't Just Look West

69. 1990

70. 1996

71. 2010

72. 520Million
200Million
140Million
140Million
China
USA
Growth2015Online Shoppers

73. Շնորհակալություն
Todd Fabacher
toddf@itechnology.am