Responsive Design and Higher Logic Websites

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

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

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

Devices & Browsers & Operating Systems

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

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

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

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

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

Examples of Responsive • Higher Logic - HUG • Others

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

Bootstrap device sizes • Large Monitor Large 1200 pixels and up • Desktop Medium 992 pixels and up • Tablets Small 768 pixels and up • Phones Extra Small Less than 768 pixels • Default Bootstrap functionality is Extra Small

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

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

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

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

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

Static vs. Bootstrap: Latest Discussions Control • Static • <div class="ContentUserControlHomepageDiscussions"> • <div id="ajaxContainerb7e210d9-8c14-45bc-9050-99886def2c13" class="HLLandingControlHLDiscussions"> • <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-a3d1-291591a227d6" tabindex="0" class="dropDownImage"><imgsrc="https://d2x5ku95bkycr3.cloudfront.net/App_Themes/Common/Images/titleBarTriangleBlack.png" ddrop="49af82c2-6e0d-7262-a3d1-291591a227d6" role="button" aria-haspopup="true" alt="More Options" style="padding: 0px; width: 12px; height: 7px;"></div> • </div> • <div id="ajaxifyspinnerb7e210d9-8c14-45bc-9050-99886def2c13" 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-9050-99886def2c13" 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-afe0-4777353cad26" data-hasqtip="0"> <a id="MainCopy_ctl04_DiscussionList_ProfileLink_0" href="http://www.netpromoter.com/community/myprofile/profile/?UserKey=6216c147-2a49-42bf-afe0-4777353cad26"><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=456248827672" 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-afe0-4777353cad26" href="http://www.netpromoter.com/community/myprofile/profile/?UserKey=6216c147-2a49-42bf-afe0-4777353cad26">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-b797-4932-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> • </div> •  • <div id="MainCopy_ctl04_DiscussionList_ratingStats_0_LikeModal_0" style="display: none;" title="People who like this"> </div> • </div> • </div> • </li> • <li> • <div id="MainCopy_ctl04_DiscussionList_Picture_1" class="Picture" biobubblekey="ba136b85-0134-4940-b603-97f3e190fa31" data-hasqtip="1"> <a id="MainCopy_ctl04_DiscussionList_ProfileLink_1" href="http://www.netpromoter.com/community/myprofile/profile/?UserKey=ba136b85-0134-4940-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-cb7277389e63">RE: NPS for News Media</a> </h3> • <div class="ByLine"> By: <a id="MainCopy_ctl04_DiscussionList_Name_1" biobubblekey="ba136b85-0134-4940-b603-97f3e190fa31" href="http://www.netpromoter.com/community/myprofile/profile/?UserKey=ba136b85-0134-4940-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-b797-4932-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 style="clear: both;"> </div> • </div> •  • <div id="MainCopy_ctl04_DiscussionList_ratingStats_1_LikeModal_1" style="display: none;" title="People who like this"> </div> • </div> • </div> • </li> • </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> • </div> • </div> • </div> • </div> Bootstrap <div class="ContentUserControl"> <div id="ajaxContainer73d8a805-cc81-497a-8563-20cca3b69047" class="HLLandingControlHLDiscussions"> <div class="row heading"> <div class="col-md-12 no-pad"> <h2 id="MainCopy_ctl07_TitleText"> Latest Discussions </h2> </div> </div> <div class="Content"> <div id="MainCopy_ctl07_ContentPanel" class="row"> <div class="col-md-12 no-pad"> <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-4289-8299-82946125e85b" data-hasqtip="0"> <a id="MainCopy_ctl07_DiscussionList_ProfileLink_0" href="http://hug.higherlogic.com/network/members/profile/?UserKey=c4d8ec00-18da-4289-8299-82946125e85b"><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=4f1d7b14-9524-4f3d-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-4289-8299-82946125e85b" href="http://hug.higherlogic.com/network/members/profile/?UserKey=c4d8ec00-18da-4289-8299-82946125e85b">Bethany Lister</a>, yesterday </div> </div> </div> <div class="row content-row"> <div class="col-md-12 no-pad"> <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-69b2-4972-8d6c-320cac586337">Beginners and Non-Techies</a> </h5> </div> </div> <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> </div> <div class="row"> </div> </li> <li> <div class="row title-row"> <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=33714e27-9395-455e-ab23-7255ad2a6945&dt=443102575526" alt="Autumn Wolfer"></a> </div> <div class="col-sm-10 col-md-10"> <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=1917843c-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> </div> </div> <div class="row content-row"> <div class="col-md-12 no-pad"> <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-44b3-8725-4d2ccf7e80c3">Feature Requests and Ideas</a> </h5> </div> </div> <div class="row"> <div class="col-md-12 no-pad break-word"> <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> </div> </div> <div class="row"> </div> </li>

Static vs. Bootstrap: Latest Discussions Control • Static • <div class="ContentUserControlYourCustomClass”> • <div> • <h2> LATEST DISCUSSIONS</h2> • <div> • <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> • <div> • <div> • <div> • <div> </div> • </div> • <div> </div> • </div> • </div> • </li> Bootstrap <div class="ContentUserControlYourCustomClass”> <div> <div> <div> <h2> Latest Discussions </h2> </div> </div> <div class="Content" > <div> <div> <ul> <li> <div> <div> <a><img>PICTURE</a> </div> <div> <h3> <a class="LinkDocumentTitle“ >SUBJECT</a> </h3> <div> BY LINE</div> </div> </div> <div> <div> <h5>Posted in: <a>COMMUNITY</a> </h5> </div> </div> <div> <div> <p>DESCRIPTION / MESSAGE </p> </div> </div> <div> </div> </li>

Static vs. Bootstrap: Latest Discussions Control • Static • <div class="ContentUserControlYourCustomClass”> • <div> • <h2> Latest Discussions</h2> • <div> • <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> • <div> • <div> • <div> • <div> </div> • </div> • <div> </div> • </div> • </div> • </li> Bootstrap <div class="ContentUserControlYourCustomClass”> <div> <div> <div> <h2> Latest Discussions </h2> </div> </div> <div class="Content" > <div> <div> <ul> <li> <div> <div> <a><img>PICTURE</a> </div> <div> <h3> <a class="LinkDocumentTitle“ >SUBJECT</a> </h3> <div> BY LINE</div> </div> </div> <div> <div> <h5>Posted in: <a>COMMUNITY</a> </h5> </div> </div> <div> <div> <p>DESCRIPTION / MESSAGE </p> </div> </div> <div> </div> </li>

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

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

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

Sites Referenced • www.awt.org and http://awt.podi.com to show the transition from current to new site • www.acec.org • www.nacd.com • www.slas.org • http://www.theme-logic.com/home

Responsive Design and Higher Logic Websites

Responsive Design and Higher Logic Websites

Presentation Transcript

Responsive and mobile design

RESPONSIVE DESIGN

Responsive Design

Responsive Design

Responsive Design

Responsive Design

Responsive Design

Responsive Design

Responsive Design

Responsive Websites

Google Announces to Rank Mobile Responsive Websites Higher

5 Reasons why Responsive Web design important for websites

Significance of Responsive Websites Designed by RedSpot Design

Responsive Mobile Websites

Responsive websites For Business

Responsive Design

Responsive Websites Technology

Responsive Websites 2017

We Build Responsive Websites

We build Responsive Websites!

Responsive Design and Mobile Optimization Essential Solutions for Today’s Websites

Responsive Design and Mobile Optimization Essential Solutions for Today’s Websites