Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying RESS Essentials
  • Table Of Contents Toc
RESS Essentials

RESS Essentials

4 (1)
close
close
RESS Essentials

RESS Essentials

4 (1)

Overview of this book

RESS is a new methodology in the world of web design and development. It attempts to solve the problems that accompany the RWD (responsive web design) approach to web design. RESS is still in its infancy, but it is growing at an exponential rate. RESS Essentials shows you how to make server-side applications smarter and more aware of a visitor's environment limitations (device, screen size, and browser). This allows you to create faster and more reliable websites. Through this book, you will build a solid base of knowledge on RESS-related technologies, while the step-by-step tutorials will help you to create your own RESS system. This book is an introduction to RESS alchemy and gives you an incentive to build your own RESS lab. It will give you a broad overview of the multiple techniques used to code responsive websites in responsible ways. Beginning with an overview of RWD, you will learn the steps involved in setting up RWD for client-side development. You will then learn how to scale images using client- and server-side technology. By the end of this book, you will have learned about the implementation of RESS application patterns, browser feature detection, and various RESS architectures. RESS Essentials will also teach you how to use jQuery with some RWD design patterns and how to employ REST API for RWD pages.
Table of Contents (15 chapters)
close
close
RESS Essentials
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
1
Index

Chapter 5. Responsive Images Client- and Server-Side Approaches

This chapter describes ways to deal with image scaling. With RESS, we can optimize the server-side part of our application in many ways depending on its target. But the issues discussed most often—related to SS optimization of RWD page components—are probably responsive images.

It is easy to add the following lines of code to a CSS file:

img {
  max-width: 100%;
}

This generally works. Most modern phones are able to resize a 3000px image to fit in a 300px wide screen, but it is neither a responsible nor a wise approach. Just think how much money it will cost your users. Mobile service providers love the pay-per-transfer plans. When 10 KB costs 2 cents, then 1Mb is worth $2, and that may be a waste for just a few unoptimized images. So, not optimizing images may bother your users in two ways:

  • It makes them wait longer for your page to load

  • It may cost them more money than it would for resized images

It's no wonder that this issue has...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
RESS Essentials
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon