RESS Essentials

134 Pages·2013·2.346 MB·English

by  Joanna Krenz-Kurowska, Jerzy Kurowski

RESS Essentials
A practical introduction to programming responsive
websites using an innovative methodology in web
design and development
Joanna Krenz- Kurowska
Jerzy Kurowski
BIRMINGHAM - MUMBAI
RESS Essentials
Copyright © 2013 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the authors, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: October 2013
Production Reference: 1181013
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-694-4
www.packtpub.com
Cover Image by Joanna Krenz-Kurowska (23dragons.com)
Credits
Authors Copy Editors
Joanna Krenz-Kurowska Brandt D'Mello
Jerzy Kurowski Gladson Monteiro
Lavina Pereira
Reviewers Adithi Shetty
Arley McBlain
Marc Pàmpols
Project Coordinator
Amigya Khurana
Acquisition Editors
Martin Bell
Proofreader
Gregory Wild Sandra Hopper
Commissioning Editor Indexers
Sruthi Kutty Mariammal Chettiyar
Priya Subramani
Technical Editors
Gauri Dasgupta
Production Coordinator
Failsal Siddiqui Pooja Chiplunkar
Cover Work
Pooja Chiplunkar
About the Authors
Joanna Krenz-Kurowska has been working as a freelance graphic designer and
web designer for 12 years. She lives in the mountains on the south-west of Poland.
She spent the last few years working for clients on five continents, blogging about
web design and technology for the 99designs community blog, winning dozens
of web design contests and following her passions: art photography, running
marathons, and graphic arts. She is a member of the art union New Mill Artists'
Colony. Teaming up with Jerzy Kurowski, she creates complete digital products
like websites or multimedia programs. She loves challenges like swimming in ice air
holes, long-distance mountain running, or exploring new areas in web design. You
can learn more about her on www.23dragons.com.
Jerzy Kurowski, after graduating from the Academy of Fine Arts in Krakow
in 1993, became interested in computer graphics. At that time he primarily
designed for print but simultaneously he learned authoring and programing
multimedia. In 1998, he started to create products for the Internet, and overtime
freelance web development gradually became his main source of income. Having
worked with a plethora of technologies in his life, today he tries to focus on
developing the engaging user web interfaces with the use of PHP, AS3, JS, CSS, and
HTML. When he is not coding or designing, he lives a highlander's life in the Giant
Mountains on the Polish-Czech border in Central Europe. Follow him on https://
twitter.com/JerzyKurowski.
About the Reviewers
Arley McBlain is a Lead Front End Developer at the Canadian web agency,
Thrillworks Inc., and works with many notable clients including BlackBerry,
Tim Hortons, and Suncor. Arley has been making websites for over 18 years with
experience in many roles; but he is now focusing on responsive and mobile-friendly
frontend development.
Arley's passion for this industry has him active on social media outlets, forums, and
occasionally writing for web blogs like CSS Tricks, Six Revisions, and Web Design
Depot. He blogs at arleym.com and tweets as @ArleyM.
Marc Pàmpols is a tech entrepreneur, developer, analyst, and project leader from
Spain. He started working at a couple of small development companies for three
years. Later he founded YoteConozco.com, a Spanish dating social network that
reached more than 50,000 users.
From 2007 until today, he is working at an IT company (Semic S.A.), leading the
development of Python and Plone websites for privately held companies and public
administration. Marc has worked for clients, such as the Spanish Ministry of Culture,
Government of Andorra, and Tarragona, Vic, and Cambrils City Councils. He always
had a strong interest in both frontend and backend development.
I would like to thank my mum, dad, dog, co-workers, and my
friends at bixo demoscene group for protecting me during the
review of this book.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related
to your book.
Did you know that Packt offers eBook versions of every book published, with PDF
and ePub files available? You can upgrade to the eBook version at www.PacktPub.
com and as a print book customer, you are entitled to a discount on the eBook copy.
Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign
up for a range of free newsletters and receive exclusive discounts and offers on Packt
books and eBooks.
TM
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online
digital book library. Here, you can access, read and search across Packt's entire
library of books.
Why Subscribe?
• Fully searchable across every book published by Packt
• Copy and paste, print and bookmark content
• On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access
PacktLib today and view nine entirely free books. Simply use your login credentials
for immediate access.
Table of Contents
Preface 1
Chapter 1: Why Does RWD Change the Internet? 5
The RESS idea 6
Controversies 7
"Separate mobile websites are a good thing" 7
"RWD is too difficult" 9
"RWD means degrading design" 9
RWD benefits 10
Freedom for designers 10
Invest less, reach out to a larger audience 11
Users 11
Developers 12
RWD evolution and experiments 15
Summary 16
Chapter 2: Sample RWD Setup for Client-Side Development 17
Bootstrap custom compilation setup 18
Testing the Bootstrap grid system 19
Integrating Gridpak 22
Implementing responsive design 25
Summary 30
Chapter 3: Server Side Setup – Device Detection Libraries 31
The AGPL licensed "OnSite" version of the WURFL library 33
The WURFL Cloud version 39
YABFDL – Detector 41
Summary 43
Table of Contents
Chapter 4: Sample RESS Page 45
WURFL plus screen size detection 46
Dave Olsen's Detector 48
Pure JavaScript screen size test 52
Utility functions 58
Dave Olsen's Detector plus WURFL 59
Summary 62
Chapter 5: Responsive Images Client- and
Server-Side Approaches 63
Scaling responsive images is not linear 64
Plain CSS and Media queries – a solution with limited
browser support 66
The <picture> tag proposition 67
Picturefill that mimics the <picture> tag behavior with
HTML5 and JS 68
Automated creation of responsive images 70
Server Side – using one of our example RESS systems 72
Summary 80
Chapter 6: Performance 81
Optimizing website towards screen size or bandwidth? 81
Optimizing images 82
Optimizing image dimensions 82
Optimizing image compression 83
Optimizing the file format 83
Avoiding the use of images 84
Reducing the number of images 84
Media queries optimization 84
Testing 85
Summary 88
Chapter 7: Extending with jQuery 89
Twitter Bootstrap components and plugins 89
Responsive tables 92
Converting a table to an accordion element with jQuery 92
Masonry 101
Summary 102
[ ii ]
Table of Contents
Chapter 8: Employing a REST API for RWD 103
REST API 105
Slim PHP framework and integrating the RESS module 105
Defining API with the Slim framework 107
Gateway file and path setup 107
Implementing routes 108
Adding photos 111
What is it good for? 115
Summary 116
Index 117
[ iii ]