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

25

https://css-tricks.com/responsive-data-tables/

• 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

Pingdom Site Speed Testhttp://tools.pingdom.com/fpt

35

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.