Presentation is loading. Please wait.

Presentation is loading. Please wait.

Responsive Design and Higher Logic Websites

Similar presentations


Presentation on theme: "Responsive Design and Higher Logic Websites"— 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 The iPhone was introduced in 2007; The first phone to use Android was released in October 2008. Internet Trends 2014 – Code Conference; Mary Meeker -

4 Devices & Browsers & Operating Systems

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 Monitor Large pixels and up Desktop Medium 992 pixels and up Tablets Small pixels and up Phones Extra Small Less 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 Content Usability Modular Fluid Crisp and clean
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 We’re going to be talking specifically about how Bootstrap will affect your site styles and how to work with your content now that things can look quite different depending on your

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
<div class="ContentUserControl HomepageDiscussions"> <div id="ajaxContainerb7e210d9-8c14-45bc def2c13" class="HLLandingControl HLDiscussions"> <h2 id="MainCopy_ctl04_TitleText6e6400e"> LATEST DISCUSSIONS</h2> <div class="ajaxifyhyperlinks" style="width: 20px; height: 20px; float: right; opacity: 0.3;"> <div id="dropDownImage49af82c2-6e0d-7262-a3d a227d6" tabindex="0" class="dropDownImage"><img src="https://d2x5ku95bkycr3.cloudfront.net/App_Themes/Common/Images/titleBarTriangleBlack.png" ddrop="49af82c2-6e0d-7262-a3d a227d6" role="button" aria-haspopup="true" alt="More Options" style="padding: 0px; width: 12px; height: 7px;"></div> </div> <div id="ajaxifyspinnerb7e210d9-8c14-45bc def2c13" style="display: none;" class="ajaxifyspinner"> <img align="middle" alt="" src="https://d2x5ku95bkycr3.cloudfront.net/App_Themes/Common/images/loadingbar.gif" style="padding: 3px 0 0 0;"> </div> <div id="MainCopy_ctl04_sortByToggleb7e210d9-8c14-45bc def2c13" class="ajaxifyhyperlinks" style="display: none;"> </div> <div id="MainCopy_ctl04_ContentPanel" class="Content"> <ul> <li> <div id="MainCopy_ctl04_DiscussionList_Picture_0" class="Picture" biobubblekey="6216c147-2a49-42bf-afe cad26" data-hasqtip="0"> <a id="MainCopy_ctl04_DiscussionList_ProfileLink_0" href="http://www.netpromoter.com/community/myprofile/profile/?UserKey=6216c147-2a49-42bf-afe cad26"><img id="MainCopy_ctl04_DiscussionList_ProfilePic_0" class="Image" src="http://www.netpromoter.com/HigherLogic/directory/ImageDisplay.aspx?Key=aaab3454-c383-4f44-87b5-ba7e3901c41e&dt= " alt="Kevin Machell-Cox"></a> </div> <h3> <a id="MainCopy_ctl04_DiscussionList_Subject_0" title="RE: Customer Journey Mapping" class="LinkDocumentTitle" href="http://www.netpromoter.com/community/net-promoter-forum/alldiscussions/viewthread/?GroupId=25&MessageKey=029605f8-7f30-43b9-94e7-aaec1ba01a27">RE: Customer Journey Mappin...</a> </h3> <div class="ByLine"> By: <a id="MainCopy_ctl04_DiscussionList_Name_0" biobubblekey="6216c147-2a49-42bf-afe cad26" href="http://www.netpromoter.com/community/myprofile/profile/?UserKey=6216c147-2a49-42bf-afe cad26">Kevin Machell-Cox</a>, yesterday </div> <h5 id="MainCopy_ctl04_DiscussionList_EgroupNamePanel_0"> Posted in: <a id="MainCopy_ctl04_DiscussionList_EgroupName_0" class="LinkPostedIn" href="http://www.netpromoter.com/community/digestviewer/?ListKey=460ec723-b af15-8c9999d3b674">Net Promoter Foru...</a> </h5> <p id="MainCopy_ctl04_DiscussionList_ContentPanel_0"> Hi Jessica, I am a Certified Net Promoter Associate with a management consulting practice in la Quinta CA. I would be interested... </p> <div id="MainCopy_ctl04_DiscussionList_discussionRatings_0" class="DiscussionRating"> <div id="MainCopy_ctl04_DiscussionList_ratingStats_0_CommentPanel_0" class="CommentPanel"> <div id="MainCopy_ctl04_DiscussionList_ratingStats_0_likeRatingContainer_0" class="likeRatingContainer"> <div style="clear: both;"> </div> <!-- tooltip element --> <div id="MainCopy_ctl04_DiscussionList_ratingStats_0_LikeModal_0" style="display: none;" title="People who like this"> </div> </li> <div id="MainCopy_ctl04_DiscussionList_Picture_1" class="Picture" biobubblekey="ba136b b603-97f3e190fa31" data-hasqtip="1"> <a id="MainCopy_ctl04_DiscussionList_ProfileLink_1" href="http://www.netpromoter.com/community/myprofile/profile/?UserKey=ba136b b603-97f3e190fa31"><img id="MainCopy_ctl04_DiscussionList_ProfilePic_1" class="Image" alt="photo not available" height="50" width="50" src="https://d2x5ku95bkycr3.cloudfront.net/App_Themes/Common/images/directory/noImageSmall.gif"></a> </div> <h3> <a id="MainCopy_ctl04_DiscussionList_Subject_1" title="RE: NPS for News Media" class="LinkDocumentTitle" href="http://www.netpromoter.com/community/net-promoter-forum/alldiscussions/viewthread/?GroupId=25&MessageKey=4e23907b-4fba-4efc-9c19-cb e63">RE: NPS for News Media</a> </h3> <div class="ByLine"> By: <a id="MainCopy_ctl04_DiscussionList_Name_1" biobubblekey="ba136b b603-97f3e190fa31" href="http://www.netpromoter.com/community/myprofile/profile/?UserKey=ba136b b603-97f3e190fa31">Jeff Molyneux</a>, 2 days ago </div> <h5 id="MainCopy_ctl04_DiscussionList_EgroupNamePanel_1"> Posted in: <a id="MainCopy_ctl04_DiscussionList_EgroupName_1" class="LinkPostedIn" href="http://www.netpromoter.com/community/digestviewer/?ListKey=460ec723-b af15-8c9999d3b674">Net Promoter Foru...</a> </h5> <p id="MainCopy_ctl04_DiscussionList_ContentPanel_1"> Hi Kristina Content versus delivery seems to be the crux of your question. Does the content of what your are reporting... </p> <div id="MainCopy_ctl04_DiscussionList_discussionRatings_1" class="DiscussionRating"> <div id="MainCopy_ctl04_DiscussionList_ratingStats_1_CommentPanel_1" class="CommentPanel"> <div id="MainCopy_ctl04_DiscussionList_ratingStats_1_likeRatingContainer_1" class="likeRatingContainer"> <div id="MainCopy_ctl04_DiscussionList_ratingStats_1_LikeModal_1" style="display: none;" title="People who like this"> </div> </ul> <div id="MainCopy_ctl04_BottomLink" class="BottomLink"> <div class="MoreLink"> <a id="MainCopy_ctl04_MoreLink" title="More" href="http://www.netpromoter.com/community/">More</a> </div> <div class="AddButtonBlock"> <a id="MainCopy_ctl04_PostMessage" title="Post a Message" href="http://www.netpromoter.com/community/net-promoter-forum/communities/postamessage/">Post</a> </div> Bootstrap <div class="ContentUserControl"> <div id="ajaxContainer73d8a805-cc81-497a cca3b69047" class="HLLandingControl HLDiscussions"> <div class="row heading"> <div class="col-md-12 no-pad"> <h2 id="MainCopy_ctl07_TitleText"> Latest Discussions </h2> </div> <div class="Content"> <div id="MainCopy_ctl07_ContentPanel" class="row"> <ul> <li> <div class="row title-row"> <div id="MainCopy_ctl07_DiscussionList_Picture_0" class="col-sm-2 col-md-2 no-pad" biobubblekey="c4d8ec00-18da e85b" data-hasqtip="0"> <a id="MainCopy_ctl07_DiscussionList_ProfileLink_0" href="http://hug.higherlogic.com/network/members/profile/?UserKey=c4d8ec00-18da e85b"><img id="MainCopy_ctl07_DiscussionList_ProfilePic_0" class="Image" alt="photo not available" height="50" width="50" src="https://d2x5ku95bkycr3.cloudfront.net/App_Themes/Common/images/directory/DefaultProfile50.png"></a> </div> <div class="col-sm-10 col-md-10"> <h3> <a id="MainCopy_ctl07_DiscussionList_Subject_0" title="RE: Change weight of navigation items" class="LinkDocumentTitle" href="http://hug.higherlogic.com/communities/community-home/viewthread/?GroupId=727&MessageKey=4f1d7b f3d-9e96-c32e9ece7045&tab=digestviewer#bm2">RE: Change weight of navigation items</a> </h3> <div class="ByLine"> By: <a id="MainCopy_ctl07_DiscussionList_Name_0" biobubblekey="c4d8ec00-18da e85b" href="http://hug.higherlogic.com/network/members/profile/?UserKey=c4d8ec00-18da e85b">Bethany Lister</a>, yesterday </div> <div class="row content-row"> <h5 id="MainCopy_ctl07_DiscussionList_EgroupNamePanel_0">Posted in: <a id="MainCopy_ctl07_DiscussionList_EgroupName_0" title="Beginners and Non-Techies" class="LinkPostedIn" href="http://hug.higherlogic.com/communities/community-home/digestviewer/?ListKey=55e93dcb-69b d6c-320cac586337">Beginners and Non-Techies</a> </h5> <div class="row"> <div class="col-md-12 no-pad break-word"> <p id="MainCopy_ctl07_DiscussionList_ContentPanel_0"> Ohhhhhhh. I didn't realized it worked like that. THANK YOU! -- Bethany Lister Community Program... </p> <div class="row"> </div> </li> <div id="MainCopy_ctl07_DiscussionList_Picture_1" class="col-sm-2 col-md-2 no-pad" biobubblekey="cdcdf827-1a45-41fc-bc82-ab98a3f21c86" data-hasqtip="1"> <a id="MainCopy_ctl07_DiscussionList_ProfileLink_1" href="http://hug.higherlogic.com/network/members/profile/?UserKey=cdcdf827-1a45-41fc-bc82-ab98a3f21c86"><img id="MainCopy_ctl07_DiscussionList_ProfilePic_1" class="Image" src="http://hug.higherlogic.com/HigherLogic/directory/ImageDisplay.aspx?Key=33714e e-ab ad2a6945&dt= " alt="Autumn Wolfer"></a> </div> <h3> <a id="MainCopy_ctl07_DiscussionList_Subject_1" title="RE: Digital Ribbons Visible All the Time" class="LinkDocumentTitle" href="http://hug.higherlogic.com/communities/community-home/viewthread/?GroupId=511&MessageKey= c-07e6-43dc-a12c-87332cda301c&tab=digestviewer#bm6">RE: Digital Ribbons Visible All the Time</a> </h3> <div class="ByLine"> By: <a id="MainCopy_ctl07_DiscussionList_Name_1" biobubblekey="cdcdf827-1a45-41fc-bc82-ab98a3f21c86" href="http://hug.higherlogic.com/network/members/profile/?UserKey=cdcdf827-1a45-41fc-bc82-ab98a3f21c86">Autumn Wolfer</a>, yesterday </div> <h5 id="MainCopy_ctl07_DiscussionList_EgroupNamePanel_1">Posted in: <a id="MainCopy_ctl07_DiscussionList_EgroupName_1" title="Feature Requests and Ideas" class="LinkPostedIn" href="http://hug.higherlogic.com/communities/community-home/digestviewer/?ListKey=b96bd737-3ad1-44b d2ccf7e80c3">Feature Requests and Ideas</a> </h5> <p id="MainCopy_ctl07_DiscussionList_ContentPanel_1"> Thanks all, for the support. And Jeanne, you bring up a really good point that I hadn't though of.... </p> This is a look at the underlying HTML for the Latest Discussion control. On the left we have the static site code. On the right we have the Bootstrap code. As you can see there are some significant differences. How do these differences affect us? CSS is based on the reference to HTML elements based on their position in the HTML document. Let’s take a closer look at the HTML and see what we can find…

19 Static vs. Bootstrap: Latest Discussions Control
<div class="ContentUserControl YourCustomClass”> <div> <h2> LATEST DISCUSSIONS</h2> <div><img></div> </div> <div> <img> </div> <div> </div> <div class="Content"> <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle">SUBJECT</a> </h3> <div> BY LINE</div> <h5> Posted in: <a>COMMIUNITY</a> </h5> <p> DESCRIPTION / MESSAGE</p> </li> Bootstrap <div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions </h2> </div> <div class="Content" > <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle“ >SUBJECT</a> </h3> <div> BY LINE</div> <h5>Posted in: <a>COMMUNITY</a> </h5> <p>DESCRIPTION / MESSAGE </p> <div> </div> </li> So here we have the same HTML with the extra HTML attributes (like height, width, inline styles, etc.) removed and I’ve just left in the pieces that matter to us and our CSS.

20 Static vs. Bootstrap: Latest Discussions Control
<div class="ContentUserControl YourCustomClass”> <div> <h2> LATEST DISCUSSIONS</h2> <div><img></div> </div> <div> <img> </div> <div> </div> <div class="Content"> <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle">SUBJECT</a> </h3> <div> BY LINE</div> <h5> Posted in: <a>COMMIUNITY</a> </h5> <p> DESCRIPTION / MESSAGE</p> </li> Bootstrap <div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions </h2> </div> <div class="Content" > <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle“ >SUBJECT</a> </h3> <div> BY LINE</div> <h5>Posted in: <a>COMMUNITY</a> </h5> <p>DESCRIPTION / MESSAGE </p> <div> </div> </li> At the top level for this control, we see that the main class is the same and the placement of custom classes from the CMS is in the same location. Ding +1 for existing CSS.

21 Static vs. Bootstrap: Latest Discussions Control
<div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions</h2> <div><img></div> </div> <div> <img> </div> <div> </div> <div class="Content"> <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle">SUBJECT</a> </h3> <div> BY LINE</div> <h5> Posted in: <a>COMMIUNITY</a> </h5> <p> DESCRIPTION / MESSAGE</p> </li> Bootstrap <div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions </h2> </div> <div class="Content" > <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle“ >SUBJECT</a> </h3> <div> BY LINE</div> <h5>Posted in: <a>COMMUNITY</a> </h5> <p>DESCRIPTION / MESSAGE </p> <div> </div> </li> The heading for the Control can be accessed the same on both. Another one for existing CSS.

22 Static vs. Bootstrap: Latest Discussions Control
<div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions</h2> <div><img></div> </div> <div> <img> </div> <div> </div> <div class="Content"> <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle">SUBJECT</a> </h3> <div> BY LINE</div> <h5> Posted in: <a>COMMIUNITY</a> </h5> <p> DESCRIPTION / MESSAGE</p> </li> Bootstrap <div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions </h2> </div> <div class="Content" > <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle“ >SUBJECT</a> </h3> <div> BY LINE</div> <h5>Posted in: <a>COMMUNITY</a> </h5> <p>DESCRIPTION / MESSAGE </p> <div> </div> </li> The main content area is also using the same class of “Content”.

23 Static vs. Bootstrap: Latest Discussions Control
<div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions</h2> <div><img></div> </div> <div> <img> </div> <div> </div> <div class="Content"> <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle">SUBJECT</a> </h3> <div> BY LINE</div> <h5> Posted in: <a>COMMIUNITY</a> </h5> <p> DESCRIPTION / MESSAGE</p> </li> Bootstrap <div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions </h2> </div> <div class="Content" > <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle“ >SUBJECT</a> </h3> <div> BY LINE</div> <h5>Posted in: <a>COMMUNITY</a> </h5> <p>DESCRIPTION / MESSAGE </p> <div> </div> </li> Each message in the latest discussion control is contained within it’s own unordered list item.

24 Static vs. Bootstrap: Latest Discussions Control
<div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions</h2> <div><img></div> </div> <div> <img> </div> <div> </div> <div class="Content"> <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle">SUBJECT</a> </h3> <div> BY LINE</div> <h5> Posted in: <a>COMMIUNITY</a> </h5> <p> DESCRIPTION / MESSAGE</p> </li> Bootstrap <div class="ContentUserControl YourCustomClass”> <div> <h2> Latest Discussions </h2> </div> <div class="Content" > <ul> <li> <div> <a><img>PICTURE</a> </div> <h3> <a class="LinkDocumentTitle“ >SUBJECT</a> </h3> <div> BY LINE</div> <h5>Posted in: <a>COMMUNITY</a> </h5> <p>DESCRIPTION / MESSAGE </p> <div> </div> </li> Both have the post message subject within the H3 and with the same class attached to the link. We could go on, but I think you get the idea. Does this mean that we can just copy our CSS over and it will work hunky-dorey? Unfortunately not. BUT it does mean that we have a good chance at bring over our major CSS styles without completely reinventing the wheel.

25 Bootstrap on Higher Logic What does Bootstrap mean for my site?
A look under the hood Be selective & prioritize Getting flexible Be selective Bootstrap doesn’t only mean that content displays differently based on what device it’s being viewed on, it also means that you can decide what content shows on which sized devices. Example: HUG slidedeck How? With media queries. Refer back to example. Prioritize What is the number one thing that you want your members to do when they get to your site what would it be? What is the number one thing that your members want to do when the come to your site? These should be the first two things that they see when they get to your site. The answers to these questions may be different for different screen sizes.

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 Because your content is going to be viewed on many different screen sizes, lines are going to wrap and content is going to shift. So rewriting your headlines so they fit perfectly on one line isn’t going to always work out. Example:

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 Making images, margins, and padding %% based means that you won’t run into horizontal scroll bars on middle sized devices. Middle sized devices are those with screen resolutions somewhere between the main breaking points. Show how the setting max-width:100% for images can work for you. Show how margins decrease between the main three content areas:

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 Images with fixed widths. Tables > generally not going to fare well on smaller screens. Good alternative > Hide the table on smaller screens and display the content differently (maybe as a set of lists) or provide a link to an excel or pdf version. Set up an example of this on theme-logic.

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 site logic.com/home


Download ppt "Responsive Design and Higher Logic Websites"

Similar presentations


Ads by Google