Presentation is loading. Please wait.

Presentation is loading. Please wait.

Responsive Design and Higher Logic Websites Paul Finkel Owner & CEO Potomac Digitek Justin Prevatte Web Manager American Association for Marriage and Family.

Similar presentations


Presentation on theme: "Responsive Design and Higher Logic Websites Paul Finkel Owner & CEO Potomac Digitek Justin Prevatte Web Manager American Association for Marriage and Family."— Presentation transcript:

1 Responsive Design and Higher Logic Websites Paul Finkel Owner & CEO Potomac Digitek Justin Prevatte Web Manager American Association for Marriage and Family Therapists Ben Goodkind COO Higher Logic

2 Agenda Business Drivers Responsive Design Bootstrap Basics Bootstrap on Higher Logic

3 The Mobile Explosion Mobile Usage as % of Web Usage May 2013 vs May 2014 Global smartphone audience will total 1.75 billion in 2014 Still room for massive smartphone growth. The majority of global mobile phone owners do not own a smartphone 55% of American adults have a smartphone 8% of US internet traffic came from mobile browsers in January 2014

4 Devices & Browsers & Operating Systems 4

5 Criteria for Choosing a CSS Framework Consistency Uniform results across devices and browsers Gracefully degrade across older browser versions Emphasis on mobile design Customizable UI patterns Typography Color schemes … Widely adopted Open source with an active community Generate theme CSS using third party tools

6 Responsive Design One Website – Any Device Responsive vs. Adaptive Responsive vs. Apps

7 Why Responsive? More than half the Internet traffic is coming from phones and tablets Multitude of devices Continued multitude of browsers on devices

8 Think Responsive What is the purpose of the site? Who are the users? What data do users need?

9 Basics of Responsive Grid Layout CSS3 Media Queries Frameworks – Bootstrap and others (Skeleton,Foundation,960)

10 Examples of Responsive Higher Logic - HUG Others

11 Bootstrap 3 Front-end toolkit Collection of CSS and HTML conventions Built mobile-first (by Twitter) Built to use jquery for functionality Open source

12 Bootstrap device sizes Large MonitorLarge1200 pixels and up DesktopMedium992 pixels and up TabletsSmall768 pixels and up PhonesExtra SmallLess than 768 pixels Default Bootstrap functionality is Extra Small

13 Bootstrap basics Everything is vertical – top/bottom scrolling Fluid grid approach – 12 columns wide All content is controlled by css classes Images resize or replace based on device size Content can be eliminated based on device size

14 Bootstrap keys Design Modular Fluid Content Crisp and clean Usability Mobile first – no double-click, right vs. left click, or menu “hover” Forms – think from a user perspective – maybe optimize for tablets

15 Calling BS on HL… What does Bootstrap mean for my site? A look under the hood Be selective & prioritize Getting flexible

16 Bootstrap on Higher Logic What does Bootstrap mean for my site? A look under the hood Be selective & prioritize Getting flexible

17 Bootstrap on Higher Logic What does Bootstrap mean for my site? A look under the hood Be selective & prioritize Getting flexible

18 Static vs. Bootstrap: Latest Discussions Control Bootstrap Latest Discussions RE: Change weight of navigation items By: Bethany Lister, yesterday Posted in: Beginners and Non- Techies Ohhhhhhh. I didn't realized it worked like that. THANK YOU! -- Bethany Lister Community Program... RE: Digital Ribbons Visible All the Time By: Autumn Wolfer, yesterday Posted in: Feature Requests and Ideas Thanks all, for the support. And Jeanne, you bring up a really good point that I hadn't though of.... Static LATEST DISCUSSIONS RE: Customer Journey Mappin... By: Kevin Machell-Cox, yesterday Posted in: Net Promoter Foru... Hi Jessica, I am a Certified Net Promoter Associate with a management consulting practice in la Quinta CA. I would be interested... RE: NPS for News Media By: Jeff Molyneux, 2 days ago Posted in: Net Promoter Foru... Hi Kristina Content versus delivery seems to be the crux of your question. Does the content of what your are reporting... More Post

19 Static vs. Bootstrap: Latest Discussions Control Bootstrap Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMUNITY DESCRIPTION / MESSAGE Static LATEST DISCUSSIONS PICTURE SUBJECT BY LINE Posted in: COMMIUNITY DESCRIPTION / MESSAGE

20 Static vs. Bootstrap: Latest Discussions Control Bootstrap Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMUNITY DESCRIPTION / MESSAGE Static LATEST DISCUSSIONS PICTURE SUBJECT BY LINE Posted in: COMMIUNITY DESCRIPTION / MESSAGE

21 Static vs. Bootstrap: Latest Discussions Control Bootstrap Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMUNITY DESCRIPTION / MESSAGE Static Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMIUNITY DESCRIPTION / MESSAGE

22 Static vs. Bootstrap: Latest Discussions Control Bootstrap Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMUNITY DESCRIPTION / MESSAGE Static Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMIUNITY DESCRIPTION / MESSAGE

23 Static vs. Bootstrap: Latest Discussions Control Bootstrap Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMUNITY DESCRIPTION / MESSAGE Static Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMIUNITY DESCRIPTION / MESSAGE

24 Static vs. Bootstrap: Latest Discussions Control Bootstrap Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMUNITY DESCRIPTION / MESSAGE Static Latest Discussions PICTURE SUBJECT BY LINE Posted in: COMMIUNITY DESCRIPTION / MESSAGE

25 Bootstrap on Higher Logic What does Bootstrap mean for my site? A look under the hood Be selective & prioritize Getting flexible

26 Bootstrap on Higher Logic What does Bootstrap mean for my site? A look under the hood Be selective & prioritize Getting flexible

27 Getting Flexible: Time for your CSS to put on it’s yoga pants… Get comfortable with reflow %s are your friend Steering clear of danger

28 Getting Flexible: Time for your CSS to put on it’s yoga pants… Get comfortable with reflow %s are your friend Steering clear of danger

29 Getting Flexible: Time for your CSS to put on it’s yoga pants… Get comfortable with reflow %s are your friend Steering clear of danger

30 Getting Flexible: Time for your CSS to put on it’s yoga pants… Get comfortable with reflow %s are your friend Steering clear of danger

31 Bootstrap Bootcamp Review a copy of your site running bootstrap See the new best practices on your site Tweak the CSS Plan next steps

32 Sites Referenced and to show the transition from current to new sitewww.awt.org logic.com/homehttp://www.theme- logic.com/home 32


Download ppt "Responsive Design and Higher Logic Websites Paul Finkel Owner & CEO Potomac Digitek Justin Prevatte Web Manager American Association for Marriage and Family."

Similar presentations


Ads by Google