Immersive: Styling & Catching Up

Fall, 2015

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

Introduction

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

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

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

Top-Down

Top-Down Approach

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

Bottom Up

Bottom-Up Approach

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

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

Mobile First Dogs

Responsive Design

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

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

Media Queries

Responsive Design

Powerful and Fluid Grid System

Flexible Images

Powerful & Fluid Grid

Grid System

Flexible Images

Flexible Images

Flexible Images

Media Queries

Media Queries

Media Queries

Media Queries

That time that I forgot to design for mobile first...

post.devpost.com

I’m using a responsive framework, so of course this is going to look good on mobile. Let’s ship it!

Done, right?

Apparently it doesn’t mean you can just forget desktop...

Mobile First

Importance ofResponsive Design

SEO Benefits

Importance of Responsive Design

Decreased User Frustration

Impact on Sales

Impact on Sales

Impact on Sales

Impact on Sales

User Frustration

User Frustration

User Frustration

10 seconds - huge delay, thoughts wander

User Frustration

0.1 seconds - instantaneous, no delay

1 second - slight delay, no interruption

SEO Benefits

“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

SEO

● 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

SEO

● Avoids software that is not common on mobile devices, like Flash

SEOMaking a Mobile Friendly Site

Frameworks

Twitter BootstrapBootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

<!-- 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

The most advanced responsive front-end framework in the world.

Foundation

<!-- 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

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Semantic UI

<!-- 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

A dead simple, responsive boilerplate.

Skeleton

<div class="row">

<div class="eight columns"></div>

<div class="four columns"></div>

</div>

Skeleton

Styling Lab

Getting Startedhttps://gorails.com/episodes/styling-with-bootstrap-sass

Image Uploading

Popular Choices:● Paperclip● Carrierwave● Refile

Image Uploading

Tried and True solutions

Easy file attachment management for ActiveRecord

Paperclip

Cheat Sheet:● Easy to set up, well documented● Everything configured in the model class● Been around forever and well maintained by

Thoughtbot

Paperclip

Classier solution for file uploads for Rails, Sinatra and other Ruby web frameworks

Carrierwave

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

Both take the tried and true approach of processing images into different sizes on upload and storing them.

Paperclip & Carrierwave

New Kid on the Block

Ruby file uploads, take 3

Refile

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

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

Image Uploading Lab

Getting Startedhttps://gorails.com/episodes/file-uploading-with-carrierwave

Debrief

Why do you think there are so many different responsive frameworks to choose from?

Styling

StylingDid anyone choose to use a framework besides Twitter Bootstrap?

If so, why?

What were some of the difficulties you ran into using a responsive framework?

Styling

Did you find it easy or hard to customize the framework?

Are some frameworks easier to customize than others?

Styling

How can you use responsive design to improve your product’s appearance?

How can you use it to improve your product’s usability?

Styling

Why do you think there are so many different image uploading gems?

Image Uploading

Did anyone pick a gem besides Carrierwave for processing image uploads?

If so, why?

Image Uploading

Did you find it easy or hard to work with the image uploading gem that you chose?

Image Uploading

How can you use image/file uploading to enhance your work?

Image Uploading

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

https://github.com/carrierwaveuploader/carrierwave

References

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

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