Post on 12-Feb-2017
transcript
Modern Web BootcampPRESENTED BY CALEB COPPER
‹#›
FROM: Roanoke, VA
WHAT I DO: Web Design/Development
BACKGROUND: Web development and musical theatre
INTERESTING FACTS:
Marched in the Macy’s Thanksgiving Day Parade Performs with Charleston theaters Volunteers at an English camp in Germany
Caleb Copper
3
Local clients in Charleston
4
Oh my…
5
Where we were
6
The Mobile Web
• Websites were largely static • Pinch and zoom • Some mobile sites
A few screen sizes ago…
7
Source: https://www.shiftedup.com
Where we are now…hopefully
8
Responsive/Adaptive
• Fully responsive site • Dedicated mobile site • Content for all
Responsive and “mobile friendly”
9
http://www.redcross.org/m/
http://www.lakecatholic.org
Where are you in this timeline?
10
What makes responsive…responsive?
11
Flexible Grid
12
http://www.thejuniordev.com/wp-content/uploads/2014/12/flexbox-image1.png
75% 25%750px 250px
1200px100%
img { max-width: 100%; height: auto;
}
Flexible Images
13
Please NEVER set a fixed width on the primary image selector with CSS.
img { width: 440px; height: 293px;
}
img { width: 440px; height: 293px;
}
@media
Media Queries
14
(max-width: 768px)
15
(min-width: 1200px)
• Flexible grid • Flexible images • Media Queries
What makes responsive…responsive?
16
Responsive Video
17
18
Embeded videos (youtube, vimeo)
19
20
21
Srsly…?
Fluid Width Video
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
22
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
https://css-tricks.com/
<div class=“videoWrapper”>
<iframe scr”…. />
Responsive Data Tables
23
24
• CSS only • Breakpoint at 768px • Hide the header • Vertical alignment • Substitute headers with
the CSS “content” property
Chris Coyer from CSS Tricks
26
https://css-tricks.com/
• CSS only • Breakpoint at 768px • Horizontal scroll-bar
Bootstrap
27
• JavaScript and CSS • Breakpoint at 768px • First column becomes “sticky”
ZURB Foundation
28
http://zurb.com/
Scalable imagery
29
Your bitmap icons have no friends
30
Enter Font-Awesome
31
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
The return of the <i> tag
32
<i<i class<i class=“fa<i class=“fa fa-<i class=“fa fa-facebook<i class=“fa fa-facebook”<i class=“fa fa-facebook”><i class=“fa fa-facebook”></i>
Responsive
33
Web DesignPerformant
Average web page size
2MB
34
Image compression
“Way too often people throw a 6000px X 12,000,000 px image up” - Kevin Duckworth Interactive Designer II
36
Other quick tips
• Minify CSS and JavaScript • YUI Compressor - http://yui.github.io/yuicompressor/
• Resize images • Reduce the number of plugins • Reduce redirects
37
38
http://justbuildwebsites.com/
“There is no one way. Enjoy the journey”
#awesomesauce Recipes for Success
Technology and Innovation Hub Main Expo Hall
39
ü Effective Website Designü Donor Centric Communicationsü Fundraising Campaign Infused with FB Adsü Partcipating in #GivingTuesdayü Cultivating New P2P Donorsü Search Engine Optimization (SEO)ü Sustained Givingü RE/FE Integration ü Financial Managementü Analyzing and Improving My Results
40
@calebcopper
Thank you.