Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Responsive Design High Performance

You're reading from   Responsive Design High Performance

Arrow left icon
Product type Paperback
Published in Apr 2015
Publisher
ISBN-13 9781784390839
Length 162 pages
Edition 1st Edition
Languages
Arrow right icon
Toc

Table of Contents (11) Chapters Close

Preface 1. The Good, the Bad, and the Ugly of Responsive Web Design FREE CHAPTER 2. Tweaking Your Website for Performance 3. Managing Images 4. Learning Content Management 5. The Fastest HTTP Request is No HTTP Request 6. Testing, Testing, and Testing! 7. Speeding Up Development with Design Concepts, Patterns, and Programs 8. Using Tools for Performance A. Taking the Next Steps Index

The good – appearance and management

We will be going through the good aspects of responsive web design in the following sections.

Appearance

In appearance, these are the aspects that really stand out:

  • Conformity: One of the great advantages of responsive web design is the conformity that it brings to our ever-growing, multidevice, browsing experience online. Modern web pages can now easily carry the same design characteristics from desktop to tablet and even to mobile browsers without compromise, thereby greatly enhancing a brand's web presence. Another perk is the ease that this approach brings to code maintenance. In the following screenshot, we can see a good example of adapting a site for multiple devices:
    Appearance
  • User interaction: Simply changing the site to fit inside different devices is, of course, only the tip of the iceberg. With each change of the layout, the website's usability must remain intact or, in some cases, change to suit the device that it's being viewed on. Here is a good example of user experience staying consistent throughout, from desktop to mobile:
    Appearance
  • User interaction (desktop layout): The preceding screenshot shows the desktop version of a website that has a full menu, with functions such as Sign In and Follow us that are easy to access. The content is well spaced and feels clean. The column space on the right is used for calling action links that show some of their products. The column space on the left is reserved for more involving content, with images and headings.

Let's compare this to the mobile layout, which is shown in the following screenshot:

Appearance
  • User interaction (mobile layout): In the mobile view, we can clearly see how the designers have made space for the content to take center stage on the site. The navigation collapses to show easily recognizable icons, and the main content takes up the rest of the page space, which is perfect for mobile phones.
  • Appearance (focusing on content): When it comes to mobiles, content takes center stage. Studies indicate that some users leave a site after merely 3 seconds if the content has not loaded. Responsive web design puts the focus on content. When a mobile site loads, the content needs to be easy to find and should not force the user to scroll endlessly to find what they're looking for.

Management

Here are the benefits of responsive web design from the management perspective:

  • One code source: Responsive websites have the advantage over the old mdot way of developing by virtue of keeping all of your code in one place. Another tremendous advantage of having one code source is that it avoids multiple redirects to an mdot web application. Redirects are very expensive in terms of load time and could add significant time to it.
  • Easier to maintain and update: Besides one source code, the next obvious advantage is code that is easier to maintain. With all of the code centralized, it becomes a much less demanding task to keep all your sites up-to-date. One change on your desktop site will automatically reflect on both the tablet and mobile versions, without any extra development time.
You have been reading a chapter from
Responsive Design High Performance
Published in: Apr 2015
Publisher:
ISBN-13: 9781784390839
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime