Responsive Web Design with jQuery


Responsive Web Design with jQuery
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Learn to swiftly design responsive websites by harnessing the power of jQuery
  • Get your responsive site ready to meet the device-agnostic world
  • Display highlighted content in a carousel and implement touch gestures to control them
  • Understand the mobile-first philosophy and put its concept into practice

Book Details

Language : English
Paperback : 256 pages [ 235mm x 191mm ]
Release Date : November 2013
ISBN : 1782163603
ISBN 13 : 9781782163602
Author(s) : Gilberto Crespo
Topics and Technologies : All Books, Web Development, Open Source

Table of Contents

Preface
Chapter 1: Exploring Responsive Web Design
Chapter 2: Designing Responsive Layouts/Grids
Chapter 3: Building Responsive Navigation Menu
Chapter 4: Designing Responsive Text
Chapter 5: Preparing Images and Videos
Chapter 6: Building Responsive Image Sliders
Chapter 7: Designing Responsive Tables
Chapter 8: Implementing Responsive Forms
Chapter 9: Testing the Responsiveness
Chapter 10: Ensuring Browser Support
Chapter 11: Useful Responsive Plugins
Chapter 12: Improving Website Performance
Index
  • Chapter 1: Exploring Responsive Web Design
    • Understanding the concept of responsive web design
    • Comparing responsive, fluid, and adaptive web
    • Adapting the screen with media queries
    • Mobile-first
    • Using wireframe tools
    • Exercise 1 – practicing mobile-first development in wireframes
    • Summary
    • Chapter 2: Designing Responsive Layouts/Grids
      • Adapting the site using JavaScript
        • Adapt.js
          • How to do it
        • Respond.js
          • How to do it
      • How percentage gives flexibility to the structure
        • Converting pixel to percentage
      • What is a responsive grid system?
        • Responsive grid systems
          • Fluid Baseline Grid system
          • 1140 Grid
          • Foundation4
      • Photoshop grid templates
      • Setting up the meta tag of viewport before starting
      • Exercise 2a – creating the layout design for wireframes
      • Exercise 2b – using Foundation4 Grid to structure our website
      • Summary
      • Chapter 3: Building Responsive Navigation Menu
        • Designing a menu by improving its usability
        • Most-used responsive navigation patterns
          • Top nav
            • How to do it
          • Footer anchor
            • How to do it
          • The toggle menu
            • The Responsive Nav plugin
            • How to do it
          • The select menu
            • The TinyNav.js jQuery plugin
            • How to do it
          • Footer-only
            • How to do it
          • Multi toggle
            • How to do it
          • Toggle and slide
            • How to do it
          • The off-canvas menu
            • The jPanelMenu jQuery plugin
            • How to do it
        • Exercise 3 – customizing menu using the toggle menu solution
        • Summary
        • Chapter 4: Designing Responsive Text
          • Understanding and converting the text to relative units
            • Relative unit – percentage
            • Relative unit – em
            • Relative unit – rem
          • Improving your element dimensioning using the box-sizing property
          • Customizing the font family for beautiful responsive titles
            • Using Font Squirrel tool generating
              • How to do it
            • The FitText plugin
              • How to do it
            • The SlabText plugin
              • How to do it
            • Lettering
              • How to do it
              • The Kern.js tool
              • How to use it
            • Responsive Measure
              • How to do it
          • Exercise 4 – customizing the homepage title
          • Summary
          • Chapter 5: Preparing Images and Videos
            • Basic image resizing only using CSS
            • Using image breakpoints
            • How the picture tag works
            • Control of art direction for responsive images
              • Focal Point CSS framework
                • How to do it
            • Alternative solutions for the <picture> tag
              • Foresight – selecting the right image to display depending on the screen size
                • How to do it
              • Picturefill – the solution that most closely resembles the picture tag
                • How to do it
            • Responsive background images by using jQuery plugins
              • Anystretch – stretching your background easily
                • How to do it
              • Backstretch – creating a responsive background slideshow
                • How to do it
            • Dealing with high-density displays
              • How to do it
              • How to do it using Foresight
            • Making responsive video elements
              • FitVids – a quick win solution for responsive videos
                • How to do it
            • Exercise – creating different image versions for featured homepage images
            • Summary
            • Chapter 6: Building Responsive Image Sliders
              • Responsive image sliders
                • Elastislide plugin
                  • How to do it
                • FlexSlider2 – a fully responsive slider
                  • How to do it
                • ResponsiveSlides – the best of basic slides
                  • How do to it
                • Swiper – performatic touch image slider
                  • How to do it
                  • Using the 3D flow style on Swiper
                • Slicebox – a slice animation when using slide images
                  • How to do it
              • Introducing touch gestures to user experience
              • Implementing touch events with JavaScript plugins
                • QuoJS – simple touch interaction library
                  • How to do it
                • Hammer – a nice multitouch library
                  • How to do it
              • Exercise 6 – creating an image slider using the Swiper plugin
              • Summary
              • Chapter 7: Designing Responsive Tables
                • Responsive tables
                • Expandable responsive tables
                  • How to do it
                  • Extending the plugin
                • Stackedtables
                  • How to do it using the table from the previous example
                • Horizontal overflow
                  • How to do it
                  • Header orientation flip
                • Link to full-table
                  • How to do it
                • Exercise 6 – creating a responsive table of prices using the FooTable jQuery plugin
                • Summary
                • The date and time pickers feature
                  • Pickadate – responsive date/time picker
                    • How to do it
                • The tooltip feature
                  • Tooltipster – modern tooltip feature
                    • How to do it
                • Responsive form using IdealForms
                  • How to implement it
                • Exercise 8 – creating a contact form using the IdealForms framework
                • Summary
                  • Chapter 9: Testing the Responsiveness
                    • Simulating a device using browser tools
                      • Using the Viewport Resizer website tool
                      • Using the Surveyor website tool
                      • Using the ScreenFly website tool
                    • Opera mobile emulator
                    • Tips for design testing of responsive websites
                    • Exercise 9 – let's test our website in different screen sizes
                    • Summary
                    • Chapter 10: Ensuring Browser Support
                      • Checking the features the browser supports
                        • CanIUse.com
                        • MobileHTML5.org
                        • QuirksMode.org
                      • Defining fallback
                      • Feature detection tools
                        • CSS Browser Selector +
                          • How to do it
                        • Modernizr
                          • YepNope.js
                          • html5shiv
                      • Polyfill implementations
                        • MediaElements.js
                          • How to do it
                        • SVG
                          • How to do it
                        • Respond.js
                          • How to do it
                      • Summary
                      • Chapter 11: Useful Responsive Plugins
                        • Plugins for website structure
                          • Creating simple responsive structures using Columns
                          • Using Equalize for element dimension adjustment
                          • Implementing a card website layout with Packery
                        • Plugins for menu navigation
                          • Creating a side menu with Sidr
                          • Knowing about EasyResponsiveTabstoAccordion
                          • Adding flexibility to your menu with FlexNav
                        • Miscellaneous
                          • SVGeezy
                          • Prefix free
                          • Magnific Popup
                          • Riloadr
                          • Calendario
                        • Summary
                        • Chapter 12: Improving Website Performance
                          • Using a content delivery network
                          • Making fewer HTTP requests
                            • Using conditional loaders
                            • Consolidating and minifying resources (JavaScript and CSS)
                            • CSS Sprites
                          • Reducing the size of payloads
                            • Progressive JPEG
                            • Image optimization
                            • Simplifying pages with HTML5 and CSS3
                          • Testing website performance
                            • PageSpeed Insights
                            • YSlow
                            • WebPagetest
                            • Mobitest
                          • Summary

                          Gilberto Crespo

                          Gilberto Crespo is a skilled frontend developer who started frontend developing using CSS2, HTML4, and tableless HTML in 2005. He has always focused on increasing his knowledge by following strong trends, such as HTML5, CSS3, and jQuery. In the past five years, he has helped improve the web development process by creating and spreading best development practices for CI&T where he currently works. For the past two years, he has been working exclusively on responsive websites on the job and supporting other web developers by answering questions on responsive websites. He has been connected with new technologies and design trends. He is passionate about creating themes for Drupal CMS and websites' look and feel in general since 2011. Currently, he is writing technical articles and giving presentations in Brazil, sharing his knowledge with students and with the Drupal community and friends. Outside of work, he enjoys a normal life, trying to learn something new every day. Feel free to contact him at www.gilcrespo.com.
                          Sorry, we don't have any reviews for this title yet.

                          Code Downloads

                          Download the code and support files for this book.


                          Submit Errata

                          Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

                          Sample chapters

                          You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                          Frequently bought together

                          Responsive Web Design with jQuery +    MCTS: Microsoft Silverlight 4 Development (70-506) Certification Guide =
                          50% Off
                          the second eBook
                          Price for both: €35.15

                          Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                          What you will learn from this book

                          • Design responsive layouts for Grid systems
                          • Analyze and choose the correct responsive menu navigation
                          • Implement a mechanism to display the right image depending on the device requesting it
                          • Use working designs and their code after tailoring them to your needs
                          • Optimize your tables to display their information better
                          • Implement responsive form elements
                          • Build a responsive carousel slider including a touch function
                          • Test your site thoroughly

                          In Detail

                          Owing to the different types of devices that offer Internet browsing today, responsive web designing has become a booming area. The heightened use of CSS3 and JavaScript libraries such as jQuery has led to shorter responsive web design times. You can now create a responsive website swiftly that works richly in any device a user might possess.

                          "Responsive Web Design with jQuery" is a practical book focused on saving your development time using the useful jQuery plugins made by the frontend community. Follow the chapters, and learn to design and augment a responsive web design with HTML5 and CSS3. The book presents a practical know how of these new technologies and techniques that are set to be the future of frontend web development.

                          This book helps you implement the concept of responsive web design in clear, gradual, and consistent steps, demonstrating each solution, and driving you to practice it and avoid common mistakes.

                          You will learn how to build a responsive website; right from its structure, conception, and adapting it to screen device width. We will also take a look at different types of menu navigation and how to convert text, images, and tables so as as to display them graciously on different devices. Features such as the carousel slider and form elements will also be covered, including the testing phase and the measures to create correct fallbacks for old browsers.

                          With "Responsive Web Design with jQuery", you will learn to create responsive websites quickly by using CSS3 and the incredible jQuery plugins. You will also learn to save your time by tailoring solutions created and tested by the community.

                          Approach

                          "Responsive Web Design with jQuery" follows a standard tutorial-based approach, covering various aspects of responsive web design by building a comprehensive website.

                          Who this book is for

                          "Responsive Web Design with jQuery" is aimed at web designers who are interested in building device-agnostic websites. You should have a grasp of standard HTML, CSS, and JavaScript development, and have a familiarity with graphic design. Some exposure to jQuery and HTML5 will be beneficial but isn't essential.

                          Code Download and Errata
                          Packt Anytime, Anywhere
                          Register Books
                          Print Upgrades
                          eBook Downloads
                          Video Support
                          Contact Us
                          Awards Voting Nominations Previous Winners
                          Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                          Resources
                          Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software