31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
Desktop-only websites just aren't good enough anymore. As you enter a future of increasingly diverse browsing methods, you need to know how to build websites that are presentable and will work perfectly with the huge volume of different device sizes and resolutions that are now commercially available. Responsive web design is an answer to the problem of modern web development.
By following the detailed step-by-step instructions, previews, and examples mentioned in this book, you will learn how to build engaging responsive websites and upgrade your skills as a web designer.
With coverage of Responsive Grid System and Bootstrap, you will learn about the most powerful frameworks in responsive web design.
In this book, you will learn how to create a crisp blog page, a beautiful portfolio site, a cool social networking page, and a fun photo gallery. Through each of these projects, you'll learn how to build various elements of a modern responsive website, and also find out which framework works best for your project specifications.
By the end of the book, you will have gained practical skills you need to build real-world websites that are professional, creative and truly responsive.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 165
Veröffentlichungsjahr: 2017
Ähnliche
BIRMINGHAM - MUMBAI
Responsive Web Design by Example
Copyright © 2017 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 author, 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: December 2017
Production reference: 1061217
ISBN 978-1-78728-706-8
www.packtpub.com
Credits
Author
Frahaan Hussain
Copy Editor
Safis Editing
Reviewer
Sasan Seydnejad
Project Coordinator
Devanshi Doshi
Commissioning Editor
Ashwin Nair
Proofreader
Safis Editing
Acquisition Editor
Larissa Pinto
Indexer
Francy Puthiry
ContentDevelopmentEditor
Onkar Wani
Graphics
Jason Monteiro
Technical Editor
Murtaza Tinwala
Production Coordinator
Arvindkumar Gupta
About the Author
Frahaan Hussain is a young programmer who contributes to the community in many ways, this book being the latest. He runs his own company, Sonar Systems, which is a world leader in online educational content. Sonar Systems has created many open source frameworks including Cocos Helper and PHP Web Framework to assist developers worldwide. Plus the company specializes in game development as well as app publishing. He has a degree in computer games programming and has developed many websites for a wide range of clients, making him fully aware of the development lifecycle and the practical needs of the developer. He has worked for Accenture, which is the world's largest consultancy firm.
About the Reviewer
Sasan Seydnejad has more than a decade of experience in web UI and frontend application development using JavaScript, CSS, and HTML in .NET and ASP.NET environments. He specializes in modular SPA design and implementation, responsive mobile-friendly user interfaces, AJAX, client architecture, and UX design using HTML5, CSS3, and their related technologies. He implements framework-less and framework-based applications using Node.js, MongoDB, Express.js, and Angular. He's also the author of the book Modular Programming with JavaScript, Packt.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.com.
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.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/B077T1FW6R.
If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!
Table of Contents
Title Page
Copyright
Responsive Web Design by Example
Credits
About the Author
About the Reviewer
www.PacktPub.com
Why subscribe?
Customer Feedback
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Reader feedback
Customer support
Errata
Piracy
Questions
What is Responsive Web Design?
Responsive design philosophy
Responsive design principles
Responsive versus adaptive
Breakpoints
Relative units
Maximum and minimum values
Nested objects
Mobile or desktop first
Bitmaps versus vectors
Responsive grids and columns
Summary
What is Bootstrap, Why Do We Use It?
Brief history of Bootstrap
Why use Bootstrap?
Why Bootstrap?
Bootstrap's grid system
Basics
Usage and examples
Equal width columns example
Multi-row, equal-width columns example
Multi-row, equal-width columns without multiple rows example
Differently sized columns
Differently sized columns with screen size restrictions
Mixing and matching
Vertical alignment
Horizontal alignment
Column offsetting
Grid wrap up
Bootstrap components
Summary
Reusable Project Template
What is a reusable project template?
Development environment prerequisites
Creating our reusable project template
Simple Bootstrap example
Abstraction
Extending the header
Extending the footer
Extending the main body
Troubleshooting
PHP errors
CSS not applying
Summary
Creating the Introduction Section
What is a single-page website?
Single-page examples
Android KitKat promotional homepage
GoldSquare
Anthony Designer
Richman
Implementing our introduction section
What is a jumbotron?
Implementing a basic jumbotron
Adding an image to the jumbotron
Combining text and images in a jumbotron
Anchoring a section to the navigation bar
Animating our navigation bar anchor
Fixing footer visibility and the location problem
Placing the header on top
Changing the current button selected
Common pitfalls
Navigation bar height variance on mobile devices
Navigation bar button anchoring
Summary
Creating a Generic Reusable Single Page Section
Different sections in single page websites
Single page section examples
Contact form
About us
Projects/work
Opening times
Implementing our generic reusable single page section
What will the Our Team section contain?
Creating the Our Team section container
Anchoring the Team section to the navigation bar
Adding the team's pictures
Team member info text
Team member social links
Summary
Creating a Contact Us Section
Contact Us examples for single page websites
Richman
Bueno
This also
Design museum
Choice screening
Implementing the Contact Us section
What will the Contact Us section contain?
Creating the Contact Us section container
Anchoring the Contact Us section to the navigation bar
Adding the contact form
Summary
Creating the Blog Posts Home Page
Blog examples
TechCrunch
Gawker
Microsoft News
Johnny Cupcakes
TESCO Living
Setting up the base project
Removing all unnecessary files
Refactoring the index.css file
Refactoring the index.php file
Refactoring the HEADER.php snippet file
Refactoring the index.js file
What will our blog home page look like?
Implementing the blog home page section
Implementing the image slider
Simple image slider
Adding back and forward buttons to the slider
Carousel indicators
Captioning our carousel
Implementing the blog posts
Adding cards
Summary
Creating the Blog Posts Page
Blog post page examples
TechCrunch
Gawker
Microsoft News
Johnny Cupcakes
Tesco Living
What will our blog post page consist of?
What does the post content consist of?
What does the popular and recommended sidebar consists of?
Implementing the blog post page
Implementing the post's main content
Adding the blog post title and banner image
Adding the snapshot paragraph
Adding the body
More useful links
Implementing the sidebar
Further extending the blog
Summary
Adding a Sidebar to the Social Network
Social network sidebar examples
Google+
YouTube
Minds
Myspace
What will our social network sidebar consist of?
Implementing the sidebar
Implementing the burger button
Implementing the sidebar HTML side
Implementing the sidebar CSS side
Summary
Creating the Home page in Our Social Network
Social network timeline examples
Google+
YouTube
Medium
What will our social network timeline consist of?
Implementing the timeline
Implementing the input section
Implementing the timeline feed section
Adding the user's thumbnail image
Adding the user's name/username
Adding the post's timestamp
Adding the post's main body
Going forward and extending the timeline
Summary
Creating the User's Profile Page
Social network profile examples
What will our social network user page consist of?
Implementing the jumbotron
Creating a basic jumbotron with a banner image
Adding the overlay text
Implementing the small cards
Implementing the large cards
Summary
Displaying Thumbnails of Our Photos
Photo gallery home page examples
9GAG
Google Photos
GIPHY
Vent
What will our photo gallery home page consist of?
Implementing the thumbnails
Adding the home page title
Adding the picture thumbnails
Adding pagination
Summary
Opening Images Using a Light Box
Light box examples
Google Photos
Dan Kennedy
Salter
Arild Danielsen Photographer
What will our light box consist of?
Implementing the light box
Adding a simple modal
Adding an image to the modal
Making the modal content appear dynamically
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
Responsive Web Design by Example is your quick and easy guide to learning how to incorporate responsiveness into your website's design and creation. This book uses the concept of creating a varied array of websites to teach you the essentials and fundamentals of responsive web design. While also teaching about good practices for web design and development in general. This book will teach you this using the common web technologies HTML, CSS, and JavaScript, while also leveraging the immensely popular responsive framework Bootstrap.
This book aims to be your one stop for all things responsive and Bootstrap in web design and development. I have also created a popular YouTube channel which provides free educational videos, including on web development, to further assist you on your development journey:
https://www.youtube.com/user/sonarsystemslimited
Who this book is for
If you are a web developer interested in incorporating responsive web design into your websites, then this book is for you. Familiarity with HTML5, CSS3, and command lines, though not essential, will be a great help in getting the most out of this book.
What this book covers
Chapter 1, What Is Responsive Web Design?, explains the basics of responsiveness in web design and its importance to the internet.
Chapter 2, What Is Bootstrap, Why We Use It?, explains what the Bootstrap framework is and how it ties into the world of responsive web design and development.
Chapter 3, Reusable Project Template, explains the importance of having a reusable project template and how to create one for all your future projects.
Chapter 4, Creating the Introduction Section, shows the creation of the introduction section for the first project.
Chapter 5, Creating a Generic Reusable Single Page Section, shows how to create a section that can be reused for different topics.
Chapter 6, Creating a Contact Us Section, shows how to create a section that will enable the user to communicate with the website's creators.
Chapter 7, Creating the Blog Posts Homepage, begins the second project in this book.
Chapter 8, Creating the Blog Posts Page, covers creating a page to display the blog post in its full glory.
Chapter 9, Adding a Sidebar to the Social Network, shows how a sidebar can be implemented and used to enhance your website.
Chapter 10, Creating the Homepage in Our Social Network, implements the home page of our social network to display social posts.
Chapter 11, Creating the User's Profile Page, adds a page to display users, profile data.
Chapter 12, Displaying Thumbnails of Our Photos, starts our final project, creating a photo gallery.
Chapter 13, Opening Images Using a Light Box, shows how to open the images using a light box to focus on a particular image.
To get the most out of this book
You will need a computer with access to the internet, a web browser and local web server for testing, and your favorite IDE/text editor for coding the projects in.
Download the example code files
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
http://www.packtpub.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the on-screen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub athttps://github.com/PacktPublishing/Responsive-Web-Design-by-Example-Third-Edition. We also have other code bundles from our rich catalog of books and videos available athttps://github.com/PacktPublishing/. Check them out!
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Common bitmap formats include .png and .jpg."
Bold: Indicates a new term, an important word, or words that you see on the screen, for example, in menus or dialog boxes, also appear in the text like this. Here is an example: "I would recommend copying the code from our GitHub page, as the CSS and JavaScript files are stored on a Content Delivery Network (CDN)."
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected] with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.
What is Responsive Web Design?
This chapter will explain what Responsive Web Design is, how it benefits our websites, and the core concepts that it consists of.
The topics covered in this chapter are as follows:
Responsive design philosophy
Responsive design principles
Responsive grid and columns
Smooth user experience
Understanding responsive grid systems
Design methodologies
User-friendly websites
Elegant mobile experience
Adaptive design and development
Responsive design philosophy
There was a time when most web surfing occurred on a computer with a standard-sized/ratio monitor. It was more than adequate to create websites with a non responsive layout in mind. But over the last 10 years there has been an exponential boom of new devices in a plethora of form factors, from mobile phones, tablets, watches and a wide range of screen sizes. This growth has created a huge fragmentation problem, so creating websites with a single layout is no longer acceptable. A website with a lot of content that works great on desktops doesn't work very well on a mobile device that has a significantly smaller screen. Such content is unreadable, forcing the user to zoom in and out constantly. One might try making everything bigger so it looks good on mobiles, but then on a desktop, the content doesn't take advantage of the immense real estate offered by bigger screens.
Responsive Web Design is a method that allows the design to respond based on the user's input and environment, and thus based on the size of the screen, the device, and its orientation. This philosophy blends elements of flexible grids and layouts, images, and media queries in CSS.
Enter Responsive Web Design. This alleviates this problem by allowing developers and designers to create websites that adapt to all screen sizes/ratios. There are various approaches that different websites take, but the core concept is illustrated in the following figure:
