FRONT-END DEVELOPMENT FOR

MARKETERS

BERTINE BUCHANGAGE MARKETING

@bertine

AMY DALRYMPLEMINNESOTA PUBLIC RADIO

@pork_chop

Thank You, Summit Sponsors

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

WHAT IS A FRONT-END DEVELOPER?

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

We specialize in HTML, CSS and JavaScript.

We’re often the last person to modify and refine a site before it goes live.

We don’t often deal with databases or networking.

We implement cross-browser/device compatibility.

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

HOW DO FRONT-END DEVS VIEW THE WORLD

DIFFERENTLY?

Like programmers, though some of us started as designers.

We think in systems, opposed to each individual component.

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

HTML/CSS

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

BROWSER SUPPORT

An important factor from project start.

Do you know what your users are using? Design to that. Don’t design for the edge cases.

Will you be able to test what your users will see?

Don’t expect older browsers to look “(pixel) perfect.”

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

RESPONSIVE DESIGN

Media Queries allow a site’s layout to be modified based on screen resolution breakpoints.

Flexible or Fluid Design sets a site’s width as a percentage of any given screen resolution.

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

@FONT-FACE

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

WEB FONTS

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

ICON FONTS

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

CSS FRAMEWORKS

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

BOOTSTRAP

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

JAVASCRIPT

Common uses for JS in websites:

Animations

Drop menus

sliders/carousels

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

Data loading

JSON

XML (sunsetting)

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

JS POLYFILLS

Provide fallback for functionality on your website, so that users with older browsers will (mostly) see the same thing as users

with the latest browsers.

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

SOCIAL MEDIA & SEO

You probably know more that we do!

However, Front-End Devs can help by writing clean, semantic code.

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

BEFORE WORK BEGINS…

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

REQUIREMENTSIs the site responsive? Do we have mock-ups for different breakpoints?

Is the site multi-language?

Accessibility concerns?

Do we need a no-JS fallback?

Which browsers are we supporting?

How “pixel perfect” will the client expect the site to be?

All assets collected? (Images, fonts, web fonts)

Is there a style guide?

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

STYLE GUIDE• Are design mock-ups built with a

specific framework in mind?

• Colors (hexadecimal or RGBA)

• Font Ramp (family, sizing, and weights for H1, H2, H3, p, etc.)

• Spacing (margins, gutters)

• Icons

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

PROJECT TIMELINEOverall project phases

When can we expect assets, mock-ups, or content?

Are there development/staging/production environments set up?

When do we need to deliver development links or previews?

How should we expect bug reports and fix requests?

What is “drop-dead” date for final development?

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

QUESTIONS FROM MARKETERS

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

“How often do you need to ‘relearn’ new technologies in the

course of what you do?” About once a month we like to try something new.

Sometimes it takes bravery to just jump in and try new things - agency work helps you learn that!

Sometimes trying new things adds unexpected risk - so it’s important for the FEDev to communicate.

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

“What’s the most frustrating thing about being a Front-End Developer?”

Nothing is ever perfect. Like writing, you can always edit it differently.

If someone else estimates our time, they’re usually wrong.

As one of the last people to touch a site, we don’t always get as much time as we would like (due to overflow from

other project phases).

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

“How would one start learning to become involved in the front-end

development community?”

Learn to code!WWW.CODECADEMY.COM

Better informs your conversations.

BERTINE BUCHAN@bertine

AMY DALRYMPLE@pork_chop#MIMASUMMIT #FEDEV

WHAT QUESTIONSDO YOU HAVE?

THANK YOU!

Bertine Buchan@bertine

bertine@gmail.com

Amy Dalrymple@pork_chop

amy@pork-chop.org

Connect with us!