search
HomeTechnology peripheralsIt IndustryImproving Responsive Web Design With RESS

Improving Responsive Web Design With RESS

This post was sponsored by Netbiscuits. Thank you for supporting the sponsors who make SitePoint possible! On average, more than one in three visitors to your website is using a mobile device. In the past year alone, mobile usage has increased by more than 20%. So how do we cater for this market?

Key Takeaways

  • RESS, or Responsive Web Design Server-Side Components, enhances traditional responsive web design by incorporating server-side intelligence. This server-side component detects a device’s capabilities and delivers an optimized version of the website, leading to a more efficient and personalized user experience.
  • RESS can improve website performance by only sending data relevant to the specific device, reducing load times and enhancing overall performance. It can also adjust the delivery of images and other media files based on the device’s capabilities, preventing these files from unnecessarily slowing down the website’s load time.
  • While implementing RESS requires a higher level of technical expertise and can be more resource-intensive due to the need for server-side programming and device detection, it can ultimately lead to higher user engagement and potentially increased revenue. RESS can be used in conjunction with other web design techniques and can be implemented on both existing and new websites.

Separate Mobile Websites

If your time, budget and sanity aren’t important, you can build separate sites for mobile and desktop users. Content can be repackaged and streamlined for the device. Unfortunately…
  1. The days of either desktop or mobile are long gone. There is a huge variety of devices with differing screen sizes, pixel densities, processing speeds, network capabilities and HTML5 features. And few of us have even considered wearables yet! Brands would need to create numerous sites to cater for every eventuality?
  2. Identifying the user’s device is difficult. User-agent strings are notoriously tricky to parse and won’t tell you anything about the screen dimensions, network speed or other features.
  3. You normally require separate URLs for each site, e.g. www.site.com and m.site.com. Users can end up on the wrong site for their device and, if you’re not careful, search engines will penalize you for duplicate content.
  4. Managing one website is tough. You now need to build and deploy several sites and ensure they’re updated concurrently. Perhaps your developers will survive the ordeal but will content editors cope with multiple assets which target different views?
That said, separate sites remains an attractive option for companies such as Amazon and eBay since it offers a targeted experience.

Responsive Web Design

Alternatively, designers and developers can use designs which respond to the browser’s viewport dimensions (typically, the whole screen on smaller devices). Using a mobile-first approach, the site implements a default linear layout perhaps with smaller text and menus accessed from hamburger icons. As the dimensions increase, the design can be re-flowed to show additional columns, larger fonts, more spacing, always-visible menus etc. RWD solves many issues encountered with separate views. We have a single site with one set of content which can respond to an infinite variety of screen sizes. Unfortunately…
  1. Screen size is a crude indication of the device’s capabilities and tells us nothing about the processor speed, network bandwidth or level of HTML5 support. A user with a large monitor could still be using a twenty year-old PC on a dial-up connection.
  2. The same page and assets are (mostly) delivered to all devices. It’s possible to limit image loading using CSS background images within media queries, the element and srcset attribute but support remains patchy and it doesn’t solve every problem. Client-side adaption techniques can slow down page rendering too, and this needs to be addressed. For example, a large image could be delivered to a high-density Retina screen even though the user is on a slow connection.
  3. Some options are not easy to implement on the client alone. It’s difficult to re-factor content, e.g. split a long article over several pages. All devices receive the same page even if it’s impractical to read on a small screen.
  4. The average web page exceeds 2MB. Many use a Responsive Web Design but it doesn’t follow that the site is responsive on a low-powered device. Creating a fast, responsive website has become more imperative now Google rate sites based on performance.
So separate websites is difficult and responsive designs cannot solve all the problems. Is there are third way we could consider?

RESS: Responsive Web Design Server-Side Components

RESS was proposed by Luke Wroblewski in 2011. The concept uses Responsive Web Design but supplements it with feature detection to serve modified content when required. For example, you could:
  • Serve smaller images on smaller screens or when bandwidth is limited.
  • Only serve a video element when the device has HTML5 support on a fast connection.
  • Avoid serving Flash games or adverts on iOS and increasingly Android devices.
  • Switch to grayscale images on eBook readers.
  • Reduce the frequency of Ajax poll requests on slower connections.
  • Remove unnecessary CSS3 effects when the device does not support animations.
  • Fall-back to PNG images when SVG is not available.
  • Provide additional information when the user is in a specific location or country.
RESS never became a widely-used technique because feature detection is difficult — especially on the server. Your detection code must be verified, updated and maintained every time a new browser or feature is released. Fortunately, there are third-party services such as Netbiscuits which do the hard work for you and are constantly updated with the latest device information. The first step: sign-up for a Netbiscuits account — there is a 30-day free trial to assess the service. Paste the Netbiscuits tracking code into your website template, wait a few seconds, and view the attractive device and visitor flow analytics charts: Improving Responsive Web Design With RESS Improving Responsive Web Design With RESS

Client-Side Device Detection API

The tracking code also defines a global JavaScript object named dcs which exposes more than 650 hardware, browser, operating system and network detection parameters. Examples: Assess the bandwidth score — a rank from zero (very slow) to 20 (typically EDGE/HSPA) to 60 (3G) to 120 (4G/wifi):
<span>var bandwidthScore = dcs.get('bandwidth.score'); // integer</span>
Identify whether the device has a touch screen:
<span>var touchScreen = dcs.get('browser.cantouch'); // boolean</span>
with a high-density pixel ratio:
<span>var pixelRatio = dcs.get('internal.browserpixelratio'); // real</span>
Does the device have telephone calling facilities?
<span>var canCall = dcs.get('browser.cantelmakecall'); // boolean</span>
Is SVG supported? Are SMIL animations available?
<span>var svg = dcs.get('browser.css.cansvg'); // boolean
</span><span>var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean</span>
Find out where the user is located:
<span>var county = dcs.get('internal.countrycode'); // 2-character string, e.g. "US"</span>
Suggest a compatible HTML5 video format:
<span>var videoFormat = dcs.get('video.suggestvideoformat'); // object</span>
Detect which browser is being used:
<span>var browser = dcs.get('browser.model'); // string, e.g. "Firefox 38"</span>
and whether it’s the latest release:
<span>var latest = dcs.get('browser.islatestrelease'); // boolean</span>

Server-Side Device Detection API

Device detection is most useful on the server where you can modify the response before it’s sent. Code is provided for PHP, Java and .NET. PHP examples… Does the device support H264 HTML5 video and has a reasonable connection?
<span><span><?php </span></span><span><span>if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
</span></span><span>	<span>echo '<video src="video.mp4" controls></video>';
</span></span><span><span>}
</span></span><span><span>?></span></span></span>
Does the device support Ajax and have JavaScript performance better than the iPhone 5 (a reference device with a score of 100)?
<span><span><?php </span></span><span><span>if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
</span></span><span>	<span>echo '<script src="moderndevice.js"></script>';
</span></span><span><span>}
</span></span><span><span>?></span></span></span>
We may never have a solution which is easy to develop and works perfectly on all devices but RESS offers a good compromise which solves many of the performance problems encountered with Responsive Web Design. A good device detection service is all you need.

Frequently Asked Questions on Improving Responsive Web Design with RESS

What is the main difference between RESS and traditional responsive web design?

Traditional responsive web design (RWD) relies solely on the client-side (browser) to adapt the website’s layout based on the device’s screen size. On the other hand, RESS (Responsive Web Design with Server Side components) combines client-side responsiveness with server-side intelligence. This means the server detects the device’s capabilities and sends an optimized version of the website, resulting in a more efficient and tailored user experience.

How does RESS improve website performance?

RESS improves website performance by reducing the amount of unnecessary data sent to the device. With traditional RWD, all data, including data for elements not visible on the device, is sent. However, with RESS, the server only sends data that is relevant to the specific device, reducing load times and improving overall performance.

Is RESS compatible with all types of devices?

Yes, RESS is designed to be compatible with all types of devices. The server-side component of RESS can detect the capabilities of the device requesting the webpage and deliver an optimized version of the site accordingly. This ensures a seamless user experience across all devices, from desktops to smartphones.

How does RESS affect SEO?

RESS can have a positive impact on SEO. Faster load times and improved user experience can lead to lower bounce rates and higher user engagement, which are factors that search engines consider when ranking websites. Additionally, RESS allows for more efficient crawling and indexing of content by search engine bots.

What are the challenges in implementing RESS?

Implementing RESS requires a higher level of technical expertise compared to traditional RWD. It involves server-side programming and device detection, which can be complex. Additionally, maintaining a RESS website can be more resource-intensive as it requires regular updates to the device detection database to accommodate new devices and browsers.

Can RESS be used with existing websites or is it only for new ones?

RESS can be implemented on both existing and new websites. However, integrating RESS into an existing website may require significant changes to the site’s architecture and code, which can be time-consuming and complex.

How does RESS handle images and other media files?

RESS can optimize the delivery of images and other media files based on the device’s capabilities. The server can resize images, convert them to a more efficient format, or even omit them entirely for devices with limited capabilities. This ensures that media files do not unnecessarily slow down the website’s load time.

Is RESS more expensive to implement than traditional RWD?

The cost of implementing RESS can vary depending on the complexity of the website and the resources available. While the initial implementation may be more expensive due to the need for server-side programming and device detection, the improved performance and user experience can lead to higher user engagement and potentially higher revenue in the long run.

Can RESS be used in conjunction with other web design techniques?

Yes, RESS can be used in conjunction with other web design techniques such as progressive enhancement and adaptive design. These techniques can complement RESS by providing a more robust and flexible web design solution.

How does RESS impact the future of web design?

RESS represents a significant step forward in web design. By combining the flexibility of RWD with the efficiency of server-side components, RESS provides a more tailored and efficient user experience. As more devices with varying capabilities continue to emerge, the need for techniques like RESS that can adapt to these devices will only increase.

The above is the detailed content of Improving Responsive Web Design With RESS. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Behind the first Android access to DeepSeek: Seeing the power of womenBehind the first Android access to DeepSeek: Seeing the power of womenMar 12, 2025 pm 12:27 PM

The rise of Chinese women's tech power in the field of AI: The story behind Honor's collaboration with DeepSeek women's contribution to the field of technology is becoming increasingly significant. Data from the Ministry of Science and Technology of China shows that the number of female science and technology workers is huge and shows unique social value sensitivity in the development of AI algorithms. This article will focus on Honor mobile phones and explore the strength of the female team behind it being the first to connect to the DeepSeek big model, showing how they can promote technological progress and reshape the value coordinate system of technological development. On February 8, 2024, Honor officially launched the DeepSeek-R1 full-blood version big model, becoming the first manufacturer in the Android camp to connect to DeepSeek, arousing enthusiastic response from users. Behind this success, female team members are making product decisions, technical breakthroughs and users

DeepSeek's 'amazing' profit: the theoretical profit margin is as high as 545%!DeepSeek's 'amazing' profit: the theoretical profit margin is as high as 545%!Mar 12, 2025 pm 12:21 PM

DeepSeek released a technical article on Zhihu, introducing its DeepSeek-V3/R1 inference system in detail, and disclosed key financial data for the first time, which attracted industry attention. The article shows that the system's daily cost profit margin is as high as 545%, setting a new high in global AI big model profit. DeepSeek's low-cost strategy gives it an advantage in market competition. The cost of its model training is only 1%-5% of similar products, and the cost of V3 model training is only US$5.576 million, far lower than that of its competitors. Meanwhile, R1's API pricing is only 1/7 to 1/2 of OpenAIo3-mini. These data prove the commercial feasibility of the DeepSeek technology route and also establish the efficient profitability of AI models.

Top 10 Best Free Backlink Checker Tools in 2025Top 10 Best Free Backlink Checker Tools in 2025Mar 21, 2025 am 08:28 AM

Website construction is just the first step: the importance of SEO and backlinks Building a website is just the first step to converting it into a valuable marketing asset. You need to do SEO optimization to improve the visibility of your website in search engines and attract potential customers. Backlinks are the key to improving your website rankings, and it shows Google and other search engines the authority and credibility of your website. Not all backlinks are beneficial: Identify and avoid harmful links Not all backlinks are beneficial. Harmful links can harm your ranking. Excellent free backlink checking tool monitors the source of links to your website and reminds you of harmful links. In addition, you can also analyze your competitors’ link strategies and learn from them. Free backlink checking tool: Your SEO intelligence officer

Midea launches its first DeepSeek air conditioner: AI voice interaction can achieve 400,000 commands!Midea launches its first DeepSeek air conditioner: AI voice interaction can achieve 400,000 commands!Mar 12, 2025 pm 12:18 PM

Midea will soon release its first air conditioner equipped with a DeepSeek big model - Midea fresh and clean air machine T6. The press conference is scheduled to be held at 1:30 pm on March 1. This air conditioner is equipped with an advanced air intelligent driving system, which can intelligently adjust parameters such as temperature, humidity and wind speed according to the environment. More importantly, it integrates the DeepSeek big model and supports more than 400,000 AI voice commands. Midea's move has caused heated discussions in the industry, and is particularly concerned about the significance of combining white goods and large models. Unlike the simple temperature settings of traditional air conditioners, Midea fresh and clean air machine T6 can understand more complex and vague instructions and intelligently adjust humidity according to the home environment, significantly improving the user experience.

Another national product from Baidu is connected to DeepSeek. Is it open or follow the trend?Another national product from Baidu is connected to DeepSeek. Is it open or follow the trend?Mar 12, 2025 pm 01:48 PM

DeepSeek-R1 empowers Baidu Library and Netdisk: The perfect integration of deep thinking and action has quickly integrated into many platforms in just one month. With its bold strategic layout, Baidu integrates DeepSeek as a third-party model partner and integrates it into its ecosystem, which marks a major progress in its "big model search" ecological strategy. Baidu Search and Wenxin Intelligent Intelligent Platform are the first to connect to the deep search functions of DeepSeek and Wenxin big models, providing users with a free AI search experience. At the same time, the classic slogan of "You will know when you go to Baidu", and the new version of Baidu APP also integrates the capabilities of Wenxin's big model and DeepSeek, launching "AI search" and "wide network information refinement"

Prompt Engineering for Web DevelopmentPrompt Engineering for Web DevelopmentMar 09, 2025 am 08:27 AM

AI Prompt Engineering for Code Generation: A Developer's Guide The landscape of code development is poised for a significant shift. Mastering Large Language Models (LLMs) and prompt engineering will be crucial for developers in the coming years. Th

Building a Network Vulnerability Scanner with GoBuilding a Network Vulnerability Scanner with GoApr 01, 2025 am 08:27 AM

This Go-based network vulnerability scanner efficiently identifies potential security weaknesses. It leverages Go's concurrency features for speed and includes service detection and vulnerability matching. Let's explore its capabilities and ethical

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools