Your SlideShare is downloading. ×
A primer on responsive (mobile-friendly) templates in Salsa
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A primer on responsive (mobile-friendly) templates in Salsa

443
views

Published on

Presentation that accompanied 3/27/13 webinar on responsive design in Salsa (video found here: http://www.youtube.com/watch?v=lTYRtYHgtro)

Presentation that accompanied 3/27/13 webinar on responsive design in Salsa (video found here: http://www.youtube.com/watch?v=lTYRtYHgtro)

Published in: Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
443
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A Primer on Responsive Templates in Salsa Jake Patoski Training & Learning
  • 2. What this webinar will and won’t coverCovered today: For another time:• What is responsive design (RD) • Steps 1 through n on how to create a responsive design• Where to start template• Resources for learning RD • A barebones Salsa template techniques you can copy/paste into your• Salsa peculiarities account (but we’re working on• Examples to review it!)• How to get more help • How to work with Javascript in Salsa templates
  • 3. What is responsiveweb design? • "Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior andResources: environment based on screen size, platformSmashing Magazine’s guide toresponsive design - and orientation. The practice consists of a mixhttp://bit.ly/smashing-responsive 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.
  • 4. What effect does Salsaitself have on designing • Because Salsa users have open access toresponsive templates? configure their templates however they choose, its 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 doesnt 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;}
  • 5. • Start with a framework which is necessary to Where and how do I provide basic CSS behaviors and Javascript start? queries (when applicable)Five popular frameworks to start • Twitter’s Bootstrap is often considered thewith: most used framework for responsivehttp://bit.ly/popular-frameworks design, but many others exist. • When coding CSS, you’ll notice a liberal use ofTwitter Bootstrap examples: !important to override Salsa’s inherent CSShttp://bit.ly/bootstrap-example • Know your CSS selectors!Smashing Magazine’s guide to http://bit.ly/selectors-cssresponsive • Get familiar with @media queries in CSSdesign:http://bit.ly/smashing- • Ex:responsive /* iPads (portrait and landscape) ----------- */ @media only screenVandelay Design’s guide to and (min-device-width : 768px)responsive design: and (max-device-width : 1024px) {http://bit.ly/vandelay-responsive /* Styles */ } • Allows your pages to adapt display rules based on the screen size provided by the supporter’s browser.
  • 6. Where and how do I • Toss out the idea that your responsivestart? 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 didnt catch. • These are the elements which may require some Javascript to properly ‘capture’ and style.
  • 7. • Things are about to get relative. And thenDimensions 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.
  • 8. Don’t let perfect get in • Its impossible to cater to every supporter onthe way of good every browser on every device, so dont worry about catching every little thing. • As devices and mobile browsers advance, their ability to render websites in a way thats friendly to all devices is improving.
  • 9. Salsa user examples• 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
  • 10. PREFER SOMEONE TO JUST DO ALLTHIS 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
  • 11. 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.