MIMA Summit 2014: Front-End Development for Marketers

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?



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.



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.



HTML/CSS



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.”



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.



@FONT-FACE



WEB FONTS



ICON FONTS



CSS FRAMEWORKS



BOOTSTRAP



JAVASCRIPT

Common uses for JS in websites:

Animations

Drop menus

sliders/carousels



Data loading

JSON

XML (sunsetting)



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.



SOCIAL MEDIA & SEO

You probably know more that we do!

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



BEFORE WORK BEGINS…



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?



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



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?



QUESTIONS FROM MARKETERS



“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.



“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).



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

development community?”

Learn to code!WWW.CODECADEMY.COM

Better informs your conversations.

http://www.codecademy.com/



WHAT QUESTIONSDO YOU HAVE?

THANK YOU!

Bertine Buchan@bertine

[email protected]

Amy Dalrymple@pork_chop

[email protected]

Connect with us!

mailto:[email protected]

mailto:[email protected]

MIMA Summit 2014: Front-End Development for Marketers

Marketing

Transcript of MIMA Summit 2014: Front-End Development for Marketers