How to Create a Successful Web App & Cloud Based Startup in Armenia
-Todd Fabacher
Multi Platform
We live in a Multi Device world
What Does that mean for me?
Responsive Design
Fluid Grids
CSS Media Queries@media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none
}
// and so on...
}
● 480px
● 600px
● 768px
● 900px
● 1200px
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>
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%;}}
What it will Look Like
How it Works
/* SECTIONS */.section {clear: both;
padding: 0px;margin: 0px;}
.sectionsplits 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.
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.
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+.
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.
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.
Responsive Example
Object Manipulation
Responsive Web DesignBook
teamtreehouse.com
Classes
Tutsplus.com
How-To Articles
This Is ResponsiveResources
Learning More
Framework
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
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
Foundation● From ZURB● 12-grid responsive layout● Rapid-prototyping
capabilities● Prototyping● Well documented with
lots of examples● foundation.zurb.com
Responsive Design Framework
CMS Systems
Why are CMS good?
● Frameworks● Marketplace● Themes / Plugins● Large Community● Open Source
Example: GeoTheme
Create a Global Directory!
Expandable Google Map V3 with Ajax markers
Connect with Social Media
Recurring events option
Enhanced Listings with Recurring Payments
Review management for place owners
Web Apps Frameworks
Make it Native
Starts with an Idea
1st 2nd
?
47.37%Odds for Red
0.0047%
Odds to create another Social Site
Know your Competition
Find the Niche
Armenian Cloud
5. SaaS
Development
YOU
YOUHow to get help?
Find other freelancers?
Where to get help?
What areas do you need help?
YOUR TEAM
GlobalFemaleMixed Abilities
How to Make
Advertising& Sponsors
Advertising& Sponsors?
$236,000
Subscribers
Advertisers
200
Advertising IncomeBusiness = $99
per year
Enhanced = $199
Subscribers
2,000
Web App IncomeConsumer = $6.99
Business = $29.99
per month
Web App Income
Consumer = $13,980Business = $59,980
per month
Income from Different Areas
ContractBusiness Consumer
Save This
Heartbeat Income
The Death Chair
Marketing
What about Social Media?
Content Marketing
Goal: 5,000 Views
Challenge : 1. Interactive Campaign - no blog
2. Graphical
3. Link Armenia with WordPress
Our choice 1. Graphical
2. Embeddable
3. Open roads to new viewers
4. Linked to Economic Development
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
Blogging
Blogging1. Improves Communication
2. Crystalize Thoughts
3. Feedback on Ideas
4. Forces Learning
5. Create More Content
6. Build Credibility
Advertising..Targeted Only..
$5,000 - Page per month
Marketing Tips1. 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
中國
Don't Just Look West
1990
1996
2010
520 Million
200 Million
140 Million
140 Million
China
USA
Growth2015 Online Shoppers
Recommended
