Month: April 2015

  • Slide Out Buttons

    Here is an example of 2 buttons that when pressed, slide out the main content revealing new content. This could be used for mobile navigation/search/quick links etc. The HTML is like so: <body>     <div class=”container”>         <a href=”#” class=”leftBtn”><i class=”fa fa-bars”></i></a>         <a href=”#” class=”rightBtn”><i class=”fa fa-user”></i></a>         /* rest of main content    …

  • Responsive Tabs

    Here is an example of tabs that change into an accordion on mobile. The HTML structure for the desktop tabs is like so: <ul class=”classA”>     <li class=”current”><a>tab 1</a></li>     <li><a>tab 2</a></li>     <li><a>tab 3</a></li> </ul> ..and the HTML for the tab contents including the mobile tabs: <ul class=”classB”>         <li><a href=”#”>mob tab 1</a>        …

  • Responsive Rotating Banner

    I like to use the responsive rotating banner from mobify.js. It’s swipable on iOS, Andriod and Windows phones. It even swipes on desktop so you can tell when it’s not working easier. I’ve added auto rotating in myself and swapping in another images for mobile (because it’s unreadable when just scaled down). You can change…

  • Making long links wrap

    This is particularly important for mobile sites so the links don’t break the layout. Here’s the CSS: a.longLink{ /* required for windows 8 phone and ie10,11 */ -ms-word-break: break-all; word-break: break-all; display:inline-block; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } Tested on an iPod Touch 3rd…