A Primer on Responsive Templates in Salsa

Jake PatoskiTraining & Learning

Covered today:• What is responsive design (RD)• Where to start• Resources for learning RD

techniques• Salsa peculiarities• Examples to review• How to get more help

For another time:• Steps 1 through n on how to

create a responsive design template

• A barebones Salsa template you can copy/paste into your account (but we’re working on it!)

• How to work with Javascript in Salsa templates

What this webinar will and won’t cover

What is responsive web design? • "Responsive Web design is the approach that

suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries." - Smashing Magazine

• This is opposed to creating a mobile-only version of a template, which would not need to scale up to full-size devices.

• Responsive web design often relies on features only available in HTML5 (the most current version of the HTML language).

• Javascript also figures prominently into responsive design templates.

Resources:Smashing Magazine’s guide to responsive design - http://bit.ly/smashing-responsive

What effect does Salsa itself have on designing responsive templates?

• Because Salsa users have open access to configure their templates however they choose, it's also up to them to create a mobile-responsive template.• In other words… Salsa doesn’t do anything

inherently to make a template mobile-friendly. • Salsa admittedly doesn't do a thorough job

labeling HTML elements with classes/IDs which you can then call and alter with CSS. • For any of these fields, you’ll want to look at using

various Javascript calls to properly label.

• Salsa divs, formrows, labels, and fields can be made fluid by overriding the standard Salsa CSS in your template. Make sure to add !important to your rules:• .salsa #aSalsaDiv {width: 30% !important;}

Where and how do I start?

• Start with a framework which is necessary to provide basic CSS behaviors and Javascript queries (when applicable)

• Twitter’s Bootstrap is often considered the most used framework for responsive design, but many others exist.

• When coding CSS, you’ll notice a liberal use of !important to override Salsa’s inherent CSS

• Know your CSS selectors! http://bit.ly/selectors-css

• Get familiar with @media queries in CSS• Ex:

/* iPads (portrait and landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {/* Styles */}

• Allows your pages to adapt display rules based on the screen size provided by the supporter’s browser.

Five popular frameworks to start with:http://bit.ly/popular-frameworks

Twitter Bootstrap examples:http://bit.ly/bootstrap-example

Smashing Magazine’s guide to responsive design: http://bit.ly/smashing-responsive

Vandelay Design’s guide to responsive design: http://bit.ly/vandelay-responsive

Where and how do I start?

• Toss out the idea that your responsive template is going to look exactly like your existing template.

• Start your RD template in Salsa out very basic – like, blank basic.

• Work on size configuration first (see next slide).

• Then look at styling the most common / biggest elements.

• Once you have made general rules, look at your Salsa pages and find the "stragglers." That is, the HTML elements that your rules didn't catch.• These are the elements which may require

some Javascript to properly ‘capture’ and style.

Dimensions• Things are about to get relative. And then

fluid.• Set dimensions (width, height, etc.) to

Percentages• Usage: {width: 30% !important}• This is a number relative to the entire width of the

screen your supporters are using – could be a smartphone, a tablet, a small laptop monitor, or a large screen.

• Set font sizes to EM• {font-size: 2em}• EM is a unit with a long storied past, so it doesn’t

really mean anything anymore. Just remember: relative unit of length.

• If your supporter’s browser is set to display regular fonts natively at 12px, then a <h2> element that is modified by {font-size: 2em} will display on the supporter’s browser at 24px.

Don’t let perfect get in the way of good

• It's impossible to cater to every supporter on every browser on every device, so don't worry about catching every little thing.

• As devices and mobile browsers advance, their ability to render websites in a way that's friendly to all devices is improving.

• Here are some active Salsa examples you can use to analyze the code:• American Rights at Work (action) –

http://bit.ly/araw-rd• Right to Heal (action) –

http://bit.ly/rth-rd• US Human Rights Network (donation) –

http://bit.ly/hrn-rd

Salsa user examples

PREFER SOMEONE TO JUST DO ALL THIS CODING JUNK FOR YOU?

(And really, who can blame you?)

Contact our VP of Partner Programs, JB Rauch, to get information about available partners with experience in designing templates.

jbrauch@salsalabs.com

OR HAVE SPECIFIC QUESTIONS?

We have designed some responsive templates internally at Salsa. If you’re stuck on something, shoot us an email - training@salsalabs.com - and we’ll see if we can help you get over the hump.