Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fragmented Web Design

Fragmented Web Design

Think different - Build for all Devices

Matthias Lau

October 09, 2014
Tweet

More Decks by Matthias Lau

Other Decks in Programming

Transcript

  1. THIS IS Responsive Design yes it is FLUID / Liquid

    ADAPTIVE / Layout States Responsive Media TOUCH & Click
  2. „Most importantly, responsive web design isn’t intended to serve as

    a replacement for mobile web sites" - Ethan Marcotte
  3. <div class="navbar-header">! <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">! <span class="sr-only">Toggle

    navigation</span>! <span class="icon-bar"></span>! <span class="icon-bar"></span>! <span class="icon-bar"></span>! </button>! </div>! <div class="navbar-collapse collapse">! <ul class="nav navbar-nav">! <li class="active"><a href="#">Link</a></li>! <li><a href="#">Link</a></li>! <li><a href="#">Link</a></li>! </ul>! </div><!--/.nav-collapse --> different NAVS in one we use display:none a lot
  4. for different devices some things on our websites need to

    be different embrace the difference
  5. device specific websites let´s write redundant code desktop Mobile tablet

    320px width 768px width 1280px width own code branches for every website type
  6. device specific websites let´s write redundant code desktop Mobile tablet

    320px width 768px width 1280px width own code branches for every website type bad Idea
  7. think in fragments not everything has to be different we

    know this already from our partials
  8. <!-- nav -->! <%= render :partial => @nav %>! !

    <!-- content -->! <%= render :partial => @content %>! ! <!-- footer -->! <%= render :partial => @footer %> application.html.erb
  9. before_action :fragmentSelection! ! private! ! def fragmentSelection! ! # default

    fragments! @head = 'layouts/head'! @nav = 'layouts/nav'! @content = 'layouts/content'! @footer = 'layouts/footer'! ! # mobile fragments! if browser.mobile?! @nav = 'layouts/mobile/nav'! end! ! end application_controller
  10. use one Responsive code base for all devices and overwrite/append

    fragments for device optimization fragmented web design