startup institute nyc: styling
TRANSCRIPT
![Page 1: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/1.jpg)
Immersive: Styling & Catching Up
Fall, 2015
![Page 2: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/2.jpg)
Styling & Catching Up1. Introduction2. Styling Lecture (15 minutes)3. Styling Lab (15 minutes)4. Image Uploading Lecture (15 minutes)5. Image Uploading / Catch Up Lab (75 minutes)
Agenda
![Page 3: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/3.jpg)
Introduction
![Page 4: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/4.jpg)
Matthew GerriorDevpost, Senior Software Engineer
ABOUT ME● Grew up outside Boston● Went to school upstate● Worked in consulting for ~ 3.5 years● Got tired of building other people’s products● Moved to NYC to join Devpost (known as
ChallengePost a the time)
devpost.com/MGerrior
![Page 5: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/5.jpg)
DevpostLeading platform for running Hackathons
ABOUT US● Formerly known as ChallengePost● Online Hackathons (Uber, Oculus, AT&T)● In-Person Hackathons (PennApps, HackNY)● Developer Portfolios to showcase skills,
technologies, projects● Moving into recruiting space:
devpost.com/teams/devpostdevpost.com
![Page 6: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/6.jpg)
ScriptEdCoding Skills for under-resourced schools
ScriptEd equips students in under-resourced schools with the fundamental coding skills and professional experiences that together create access to careers in technology.● GitHub accounts from Day 1● Two hackathons every year● Field trips to Tech Companies● Summer internship opportunities
![Page 7: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/7.jpg)
Top-Down
![Page 8: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/8.jpg)
Top-Down Approach
![Page 9: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/9.jpg)
Designing for a large screen first and then adding additional code for smaller screens:● Slows performance on mobile devices● Doesn’t take advantage of mobile functionality
Top-Down Approach
![Page 10: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/10.jpg)
Bottom Up
![Page 11: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/11.jpg)
Bottom-Up Approach
![Page 12: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/12.jpg)
We simply start with the most minimal amount of mobile-tech development and build progressively upward until we have nurtured the simple mobile seed to the highest-possible tech display.
Mobile FirstLuke Wroblewski
![Page 13: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/13.jpg)
Bottom-Up ApproachDevelop for the lowest common denominator, progressively add features for each higher level of tech:● Emphasize core values and behaviors● Optimize for ease of use
![Page 14: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/14.jpg)
Mobile First Dogs
![Page 15: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/15.jpg)
![Page 16: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/16.jpg)
![Page 17: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/17.jpg)
![Page 18: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/18.jpg)
Responsive Design
![Page 19: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/19.jpg)
Optimizing a page to be utilized on the web by multiple devices with different screen sizes, all in one design.
It’s all about percentages and ratios!
Responsive DesignEthan Marcotte
![Page 20: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/20.jpg)
You want to build a page once and have it appear correctly, that is with minimal amounts of scrolling, minimizing, maximizing, enhancing, de-hancing.
Responsive Design
![Page 21: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/21.jpg)
Media Queries
Responsive Design
Powerful and Fluid Grid System
Flexible Images
![Page 22: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/22.jpg)
Powerful & Fluid Grid
![Page 23: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/23.jpg)
Grid System
![Page 24: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/24.jpg)
Flexible Images
![Page 25: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/25.jpg)
Flexible Images
![Page 26: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/26.jpg)
Flexible Images
![Page 27: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/27.jpg)
Media Queries
![Page 28: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/28.jpg)
Media Queries
![Page 29: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/29.jpg)
Media Queries
![Page 30: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/30.jpg)
Media Queries
![Page 31: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/31.jpg)
That time that I forgot to design for mobile first...
![Page 32: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/32.jpg)
post.devpost.com
![Page 33: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/33.jpg)
![Page 34: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/34.jpg)
![Page 35: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/35.jpg)
![Page 36: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/36.jpg)
![Page 37: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/37.jpg)
I’m using a responsive framework, so of course this is going to look good on mobile. Let’s ship it!
Done, right?
![Page 38: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/38.jpg)
![Page 39: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/39.jpg)
![Page 40: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/40.jpg)
Apparently it doesn’t mean you can just forget desktop...
Mobile First
![Page 41: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/41.jpg)
![Page 42: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/42.jpg)
![Page 43: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/43.jpg)
Importance ofResponsive Design
![Page 44: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/44.jpg)
SEO Benefits
Importance of Responsive Design
Decreased User Frustration
Impact on Sales
![Page 45: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/45.jpg)
Impact on Sales
![Page 46: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/46.jpg)
Impact on Sales
![Page 47: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/47.jpg)
Impact on Sales
![Page 48: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/48.jpg)
User Frustration
![Page 49: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/49.jpg)
User Frustration
![Page 50: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/50.jpg)
User Frustration
![Page 51: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/51.jpg)
10 seconds - huge delay, thoughts wander
User Frustration
0.1 seconds - instantaneous, no delay
1 second - slight delay, no interruption
![Page 52: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/52.jpg)
SEO Benefits
![Page 53: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/53.jpg)
“Starting April 21 [2015], we will be expanding our use of mobile-friendliness as a ranking signal … Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”
SEO
![Page 54: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/54.jpg)
SEO
![Page 55: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/55.jpg)
● Uses text that is readable without zooming● Sizes content to the screen so users don't have
to scroll horizontally or zoom● Places links far enough apart so that the correct
one can be easily tapped
SEOMaking a Mobile Friendly Site
![Page 56: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/56.jpg)
SEO
![Page 57: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/57.jpg)
● Avoids software that is not common on mobile devices, like Flash
SEOMaking a Mobile Friendly Site
![Page 58: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/58.jpg)
Frameworks
![Page 59: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/59.jpg)
Twitter BootstrapBootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
![Page 60: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/60.jpg)
<!-- Stack the columns on mobile by making one full-width and the
other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>
Twitter Bootstrap
![Page 61: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/61.jpg)
The most advanced responsive front-end framework in the world.
Foundation
![Page 62: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/62.jpg)
<!-- Stack the columns on mobile by making one full-width and the
other half-width -->
<div class="row">
<div class="small-12 medium-8 columns"></div>
<div class="small-6 medium-4 columns"></div>
</div>
Foundation
![Page 63: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/63.jpg)
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Semantic UI
![Page 64: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/64.jpg)
<!-- Stack the columns on mobile by making one full-width and the
other half-width -->
<div class="row">
<div class="sixteen wide mobile twelve wide tablet column"></div>
<div class="eight wide mobile four wide tablet column"></div>
</div>
Semantic UI
![Page 65: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/65.jpg)
A dead simple, responsive boilerplate.
Skeleton
![Page 66: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/66.jpg)
<div class="row">
<div class="eight columns"></div>
<div class="four columns"></div>
</div>
Skeleton
![Page 67: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/67.jpg)
Styling Lab
![Page 68: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/68.jpg)
Getting Startedhttps://gorails.com/episodes/styling-with-bootstrap-sass
![Page 69: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/69.jpg)
Image Uploading
![Page 70: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/70.jpg)
Popular Choices:● Paperclip● Carrierwave● Refile
Image Uploading
![Page 71: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/71.jpg)
Tried and True solutions
![Page 72: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/72.jpg)
Easy file attachment management for ActiveRecord
Paperclip
![Page 73: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/73.jpg)
Cheat Sheet:● Easy to set up, well documented● Everything configured in the model class● Been around forever and well maintained by
Thoughtbot
Paperclip
![Page 74: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/74.jpg)
Classier solution for file uploads for Rails, Sinatra and other Ruby web frameworks
Carrierwave
![Page 75: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/75.jpg)
Cheat Sheet:● More Object-Oriented/Modular approach to
image uploading● Supports multiple file uploads (useful for image
galleries)● Designed to solve the “file disappearing when
form is invalid” problem● Creator eventually decided to build another file
uploader gem
Carrierwave
![Page 76: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/76.jpg)
Both take the tried and true approach of processing images into different sizes on upload and storing them.
Paperclip & Carrierwave
![Page 77: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/77.jpg)
New Kid on the Block
![Page 78: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/78.jpg)
Ruby file uploads, take 3
Refile
![Page 79: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/79.jpg)
Cheat Sheet:● Developed by creator of CarrierWave● Direct to S3 image uploading● Don’t have to think about how/where files are
being stored● Strongly opinionated
Refile
![Page 80: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/80.jpg)
Changes up image uploading with direct to S3 capability as well as storing a single image and processing it on the fly when requested.
Refile
![Page 81: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/81.jpg)
Image Uploading Lab
![Page 82: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/82.jpg)
Getting Startedhttps://gorails.com/episodes/file-uploading-with-carrierwave
![Page 83: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/83.jpg)
Debrief
![Page 84: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/84.jpg)
Why do you think there are so many different responsive frameworks to choose from?
Styling
![Page 85: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/85.jpg)
StylingDid anyone choose to use a framework besides Twitter Bootstrap?
If so, why?
![Page 86: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/86.jpg)
What were some of the difficulties you ran into using a responsive framework?
Styling
![Page 87: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/87.jpg)
Did you find it easy or hard to customize the framework?
Are some frameworks easier to customize than others?
Styling
![Page 88: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/88.jpg)
How can you use responsive design to improve your product’s appearance?
How can you use it to improve your product’s usability?
Styling
![Page 89: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/89.jpg)
Why do you think there are so many different image uploading gems?
Image Uploading
![Page 90: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/90.jpg)
Did anyone pick a gem besides Carrierwave for processing image uploads?
If so, why?
Image Uploading
![Page 91: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/91.jpg)
Did you find it easy or hard to work with the image uploading gem that you chose?
Image Uploading
![Page 92: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/92.jpg)
How can you use image/file uploading to enhance your work?
Image Uploading
![Page 93: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/93.jpg)
http://googlewebmastercentral.blogspot.com/2014/11/helping-users-find-mobile-friendly-pages.html
http://googlewebmastercentral.blogspot.com/2015/02/finding-more-mobile-friendly-search.html
http://zurb.com/word/mobile-first
http://www.lukew.com/ff/entry.asp?933
http://zurb.com/word/responsive-web-design
http://alistapart.com/article/responsive-web-design
https://blog.kissmetrics.com/loading-time/
http://www.nngroup.com/articles/website-response-times/
https://zurb.com/university/lessons/master-media-queries-with-sass
http://alistapart.com/article/fluid-images
References
![Page 94: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/94.jpg)
https://github.com/carrierwaveuploader/carrierwave
References
![Page 95: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/95.jpg)
Imaizumi, Ryoichi, and Doantam Phan. "Helping Users Find Mobile-friendly Pages." Official Google Webmaster Central Blog. Google, 18 Nov. 2014. Web. 20 Nov. 2015.
Makino, Takaki, Chaesang Jung, and Doantam Phan. "Finding More Mobile-friendly Search Results." Official Google Webmaster Central Blog. Google, 26 Feb. 2015. Web. 20 Nov. 2015.
"Mobile First." ZURB U. ZURB, Inc., n.d. Web. 05 Dec. 2015.
Wroblewski, Luke. "LukeW | Mobile First." LukeW | Mobile First. N.p., 3 Nov. 2009. Web. 05 Dec. 2015.
"Responsive Web Design." ZURB U. Zurb Inc., n.d. Web. 05 Dec. 2015.
Marcotte, Ethan. "Responsive Web Design." A List Apart The Full. N.p., 25 May 2010. Web. 05 Dec. 2015.
"How Loading Time Affects Your Bottom Line." How Loading Time Affects Your Bottom Line. Kissmetrics, n.d. Web. 05 Dec. 2015.
Bibliography
![Page 96: Startup Institute NYC: Styling](https://reader034.vdocuments.us/reader034/viewer/2022051710/5a68052f7f8b9a81378b5003/html5/thumbnails/96.jpg)
Nielsen, Jakob. "Website Response Times." Website Response Times. Nielsen Norman Group, 21 June 2010. Web. 5 Dec. 2015.
Gremillion, Ben. "ZURB University." ZURB U. ZURB, Inc., n.d. Web. 05 Dec. 2015.
Marcotte, Ethan. "Fluid Images." A List Apart The Full. N.p., 07 June 2011. Web. 05 Dec. 2015.
Bibliography