- Responsive Design Image Scaling Internet Explorer 10
- Responsive Design Image Scaling Internet Explorer Download
- Responsive Design Image Scaling Internet Explorer Free
It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Websites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.
Core Concepts
Three key technical features are at the heart of responsive web design:
- Media queries and media query listeners
- A flexible grid-based layout that uses relative sizing
- Flexible images and media, through dynamic resizing or CSS
Truly responsive web design requires all three features to be implemented.
The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive web design.
While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.
Media Queries
Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:
That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.
Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.
There are three ways to implement media queries:
- Use the @import rule to import style rules from other style sheets:
- @import url(style600min.css) screen and (min-width: 600px);
- Put media queries directly in the style sheet, as shown below.
Include a query in a linked style sheet’s
media
attribute:<link type='text/css' media='screen and (max-device-width: 800px)' href='style800.css' />
Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.
The following images present an example of a responsive web design approach that uses media queries.
Figure 1 and Figure 2 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 3 shows the same responsive site on a Windows Phone, also with Internet Explorer 9.
Figure 1 Navigation Appears on the Left
Figure 2 In an 800×600 Resized Window, Navigation Switches to the Top
Figure 3 The Same Site on a Windows Phone
If you’re looking for some great examples of responsive web design that take full advantage of media queries, the http://mediaqueri.es/ enthusiast site can be addictive, as Figure 4 shows.
Figure 4 A Collection of Sites That Use Media Queries
Media Query Listeners
Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered.
Today, Firefox and the Internet Explorer 10 Platform Preview implement media query listeners; you can see the demo “CSS3 Media Queries & Media Query Listeners” on the IE Test Drive.
A Word about the Viewport
When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen.
So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:
<meta name='viewport'>
Other viewport settings include
maximum-zoom
and initial-scale
.Flexible Grids
A flexible grid-based layout is one of the cornerstones of responsive design. The term “grid” is used rather freely and doesn’t imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the
em
for sizing.By basing text sizes, widths and margins on percentages or on the
em
, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em
is very simple:target ÷ context = result
Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:
24 ÷ 16 = 1.5
This results in the following CSS style:
Always take the context into account. Continuing with the previous example, if you have an element inside the
H1
that needs to be 12 pixels, you use the current H1
as the context. The context is now 24 pixels, so the context calculation for “H1 a” is:12 ÷ 24 = 0.5
And the CSS style is:
You can also use percentages. The calculation algorithm is the same; you just end up with percentages.
Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System or Fluid 960 Grid System (a fluid version of 960 Grid System). Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.
CSS3 Grid Layout
The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an “Editor’s Draft.” It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content.
Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications.
How does the Grid work? You start by setting the display block to ‘grid’. (You need to use CSS vendor prefixes because this is not yet a CSS3 recommendation. Right now, only Internet Explorer 10 Platform Preview supports the spec, so you’ll see the CSS vendor prefix -ms- used here.) Let’s look at three examples of how you can set up different views depending on screen size. Media queries are used to apply different grid styles depending on the screen width.
In the first example, the HTML for defining the content consists of one header and three different blocks of text.
You start by laying out the blocks of content under each other so that the content fits smartphones.
You can add background colors as shown in Figure 5 to make it clearer that you’re working with grid items.
Figure 5 Blocks of Content with Background Colors
In the second example, a media query applies styles defined for screen sizes greater than 481 pixels—anything wider than a typical smartphone. You can use the Grid to define two columns and move the blocks into desired positions, as below. The results are shown in Figure 6.
Figure 6 A New Layout with Two Adjacent Columns
The third grid sample displays on screen widths greater than 1220 pixels. You define a grid with a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10-pixel columns in between. The results are shown in Figure 7.
Figure 7 Three Side-by-Side Columns with a Spanning Header
The Grid specification is a welcome addition for implementing responsive web designs.
Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Websites.
Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change.
The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.
Flexible Images and Media
The final aspect of responsive web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.
Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.
An alternative to scaling images is cropping them with CSS. For example, applying overflow:hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.
Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor’s mobile bandwidth because you don’t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image—or even no image at all. Folks in the web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive web design evolves and becomes the basis for many quality Websites.
Legacy Browsers
What about older browsers that don’t support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.
- css3-mediaqueries.js by Wouter van der Graaf: code.google.com/p/css3-mediaqueries-js/
- Response.js: github.com/scottjehl/Respond
- Fluid images: unstoppablerobotninja.com/entry/fluid-images/
In Closing
Jumping on the responsive web design wagon isn’t something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.
Responsive web design is in its early stages. Web designers will continue to offer different opinions and recommend directions related to whether to build for mobile first, how to fit these decisions into the design process, whether to slice up the comps into all the different screen sizes, and so forth. And as more and more screen sizes and form factors arrive, the conversation will continue.
HTML and CSS standards are evolving to help web designers deal with these issues. It’s clear that some form of responsive web design will be used to meet the challenges, and it’s equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.
Here are some additional resources:
Responsive websites are websites that adapt to all screen sizes and resolutions, not only on desktop but also on mobile, tablet, and sometimes even TV.
According to Statista, mobile traffic was responsible for 52.64% of all global traffic in 2017, meaning that a website not well optimized for mobile devices is losing out on approximately half of its traffic. By the end of 2018, it’s expected that the global traffic share for mobile devices will grow to 79%, which is an exceptional increase.
Businesses without a mobile website are falling behind at an alarming rate, because 8 in 10 visitors will stop engaging with a website that doesn’t display well on their device. It’s way too easy for users to hit the back button and try a rival business instead, and Google even ranks websites that are not responsive lower in their search.
You can take Google’s mobile-friendly test here.
Does any of this mean that mobile is more important than desktop? No. 83% of mobile users say that they should be able to continue the experience on desktop if they wish.
Take a look at this mobile-optimized version of eBay vs. what it would look like if it weren’t mobile-optimized. Would you even consider the non-optimized version?
eBay: not mobile-optimized vs. a mobile-optimized responsive website
In order to design websites that can compete on today’s internet, web designersmust be experts at responsive web design (RWD). Where should they start?
A Mobile-first Approach to Responsive Web Design
Mobile-first web design means designing the mobile website first and working up to the desktop version. There are a number of reasons why this approach works well.
- Mobile websites have more usability concerns (this is mostly due to the lack of screen real estate), so it’s practical and more efficient for the primary focus to be on mobile design.
- It’s easier to scale up the mobile version than it is to scale down the desktop version (again, because of the lack of space on mobile websites).
- Mobile-first web design helps to reevaluate what’s visually and functionally necessary.
Designers ought to consider taking a mobile-first approach to responsive web design. (source: Usabilla)
Designing a website as a mobile-first responsive site forces designers to ask a number of important questions because there is less screen real estate to work with. Here are the questions that need to be asked:
- Is this feature/function really necessary?
- How can we design something minimalist for mobile first that will later scale up well for desktops?
- Is this visual effect worth the time that it takes to load on mobile?
- What’s the primary objective, and what visual elements help users achieve it?
We’ll take a look at some responsive web design examples in a moment. For now, let’s talk about which devices, screen sizes, and web browsers are relevant today.
What Screen Resolutions Are Relevant for Responsive Web Design?
Here are the most common screen resolutions across mobile, tablet, and desktop users worldwide. As you can see, there is a wide range of resolutions, so neither mobile, tablet nor desktop is dominating the market share right now—what this tells us is that designers should consider all of them when thinking about responsive web design.
- 360x640 (small mobile): 22.64%
- 1366x768 (average laptop): 11.98%
- 1920x1080 (large desktop): 7.35%
- 375x667 (average mobile): 5%
- 1440x900 (average desktop): 3.17%
- 720x1280 (large mobile): 2.74%
Just as with device breakdown, we should segment the data by location to match the user demographics (or anticipated user demographics) of our target audience. It’s also worth catering to resolutions that are gaining popularity, because while some screen sizes are currently not that common, they may be in the future. This will help responsive designers craft futureproof UX that will work even when the market share changes.
For example, 360x640 resolutions (which correspond mostly with Samsung devices using Android) have risen by 5.43% in the last year. Designers can use valuable insights like these to decide on key responsive breakpoints before starting a website design.
What Web Browsers Are Popular Today?
Responsive web design is about offering a seamless experience on any device, and since different web browsers render web pages in different ways, websites must be tested to ensure that they’re compatible with a variety of mobile and desktop web browsers.
Even though making a website scale to the correct responsive breakpoints is primarily the responsibility of a web developer, it’s the web designer that decides exactly how a responsive website will adapt to various screen sizes in order to create an optimal user experience.
Here’s a worldwide breakdown of web browser market share for mobile and desktop.
- Chrome: 55.04%
- Safari: 14.86%
- UC Browser: 8.69%
- Firefox: 5.72%
- Opera: 4.03%
- Internet Explorer: 3.35%
Responsive design isn’t just about “making everything fit”—it’s also about adapting to the capabilities of the device hardware and web browser as well as the device resolution. One example of this could be that, while Google Chrome supports the CSS property
overscroll-behavior:
(which defines what happens when the user scrolls too hard towards the edge of the viewport), it’s not supported in any other web browser.Responsive Design Best Practices
Eliminate Friction
As mentioned earlier, a mobile-first approach to responsive web design will help designers evaluate what’s really necessary in order for the user to achieve their main objective.
As we build up to the tablet version (and later the desktop version), we can then begin to think about secondary objectives and the microinteractions, user flows, and CTAs (calls to action) that make those user objectives achievable. What’s more important is that we focus on the primary objectives of the user first and eliminate any unnecessary friction that aids neither the primary nor the secondary objectives.
A primary objective could be the purchasing of a product, whereas the secondary objective could be signing up for a newsletter (which could lead to a purchase later).
Here’s a terrific example of eliminating friction: Since mobile user interfaces are typically harder to navigate, it would be best to switch to a one-page checkout for mobile eCommerce stores and only enable multi-step checkout for desktop eCommerce stores.
Design for Thumbs
Responsive web design is tricky in the sense that users will interact with the desktop website via clicks but the mobile version via taps and swipes. There are physical differences as well. Desktop users typically have their computers on a surface, whereas mobile users hold their devices in their hands. These differences significantly change the way mobile UI designers design tap targets and other important UI elements with which users interact.
Thumbs can reach the center of the device screen better than the corners. (source: A List Apart)
Let’s take a look at some examples:
- People typically expect the main desktop navigation to be at the top; however, on mobile, it should be at the bottom. Thumbs don’t reach the top comfortably.
- Other interactive elements should also be easy to reach. This means keeping them in the center of the screen because it’s more difficult for thumbs to reach the sides and corners of device screens.
- So that they can be tapped with ease, important links and CTAs should have a height of at least 44px (smaller tap targets are bad for usability).
Recommended reading: The Fundamental Guide to Mobile Usability.
Take Advantage of Mobile Devices’ Native Hardware
Mobile hardware (like the device camera, or GPS services) isn’t specifically reserved for native apps, and as mentioned earlier, responsive web design isn’t just about “making everything fit.” It’s also about adapting to the capabilities of the device. In the case of mobile web design, since mobile devices have easy to use cameras, some microinteractions—such as data input—are actually easier on smaller screens as long as websites are taking advantage of the available native hardware.
Let’s take a look at some examples:
- Credit/top-up card scanning (because forms are often tricky on mobile)
- Photo-sharing on social media, because the media is already on your device
- Two-factor authentication (because you’re already on your mobile device)
- Quickly checking stocks/analytics (because mobile apps simplify information)
- Performing a web search with voice (because hands-free is easier than typing)
Make Layouts Fluid/Adaptive by Default
Not every user will have their desktop browser maximized. This means that while designers need to consider the responsive breakpoints of the devices that users are using today, they also need to account for what happens in between those breakpoints.
A fluid vs. fixed web layout for responsive web design
Responsive breakpoints should be used to “reflow” the layout and content to a new device, but to account for all the sizes in between (just in case), layouts need to be otherwise fluid (that is, they naturally adapt/stretch as the browser resizes).
Keep these tips in mind when designing fluid/adaptive layouts:
- Percentage units will allow elements to be fluid.
- Setting minimum and maximum widths can enable the “but don’t go smaller/bigger than this” scenario.
- SVG image formats can be scaled up and down without losing quality, and are resolution-independent (as opposed to JPGs and PNGs, which are not).
Don’t Forget about Landscape Orientation
We talked about specific responsive breakpoints earlier, but we also need to consider that those mobile viewports can be displayed in landscape orientation as well. While implementing a fluid layout will technically make the content adaptive, losing a fair chunk of the portrait viewport can be a hindrance to the usability and accessibility.
Navigations are usually safe (sometimes they’re better, actually, since users typically navigate landscape orientation with two thumbs), but scrolling becomes significantly harder, which is less than optimal since the user is required to scroll more on landscape.
Designers may want to consider designing for landscape breakpoints as well; for instance, tiled elements that stack vertically on mobile could be displayed as a slider with left and right navigation buttons, meaning the user doesn’t have to scroll.
Remember, Typography Can Be Responsive Too
Even though UX designers typically use pixel units to design websites, on the actual web, one point doesn’t necessarily equal a pixel anymore, because different devices have different resolutions. The iPhone X, for example, has 458 PPI (Pixels Per Inch), so where pixel sizes are getting smaller, we’re able to achieve crisper graphics in the same physical space (Apple calls this “Retina” technology, and Android calls it “hDPI”).
This means that a 16px font size, for instance, would look bigger or smaller on some devices depending on its resolution. Web developers will typically use em units to define font sizes, which are a type of responsive unit where 1em is equal to 1 point.
Design handoff tools like Zeplin, Sympli, Marvel and InVision can help designers collaborate with developers on matters that are a joint responsibility. While designers execute the design, and developers execute the code, as a whole the product design workflow is a team effort that requires solid communication. Desktop computer prices.
Responsive Design Performance Optimization Tips and Best Practices
Responsive web design isn’t just about how it looks but also about how it acts and feels. Adapting websites so that they load faster on the intended device is equally important.
Lazy Load Non-vital Images and Videos
Images and videos are what make up a large chunk of the total download size of a website, but you don’t need to load them all at once. There are two scenarios where the rendering of media can be delayed: Below-the-fold content can be loaded as the user scrolls below the fold, and render-blocking media should be made to download only after the layout and content has downloaded. This practice is called lazy loading, where the loading of heavy, non-important elements is delayed to improve page performance.
Conditional Loading
Some website elements are not intended for mobile users, or at least aren’t worth the extra cognitive load. We want our mobile websites to be simple, so it makes sense to hide elements in certain scenarios. That being said, we have to make sure that we aren’t wasting browser resources and bandwidth by loading these elements even when they’re hidden; hence, it’s best practice to only include these elements in certain conditions.
Once again, a developer can achieve this with code; however, designers can improve page performance by communicating the conditions of when and where certain elements should and shouldn’t exist.
Responsive Images
As mentioned earlier, some devices display more pixels per inch, which can result in images becoming blurry if they’re not exported at the correct resolution. Depending on the resolution of the device, some will require images at double (@2x), triple (@3x) and even quadruple (@4x) the size. Web browsers now support the
<picture>
element, which chooses the correct image resolution depending on the device.Designers crafting responsive websites can tailor images to the correct device by making sure to export at all the resolutions used on today’s devices (if you’re unsure, ask your developer—communication is key when it comes to responsive web design).
Exporting image assets from Sketch @2x for responsive web design
Conclusion
Wireframing can help to iron out the creases early in the design process, and this works well when taking a mobile-first approach to responsive web design. Perhaps there’s a responsive breakpoint that needs some extra attention, or maybe there’s a concept that just isn’t effective in terms of mobile responsiveness. It’s better to find the bumps in the road sooner rather than later (i.e., before adding visual aesthetics).
Modern design tools like Adobe XD, Marvel and InVision enable teams to test prototypes on real devices, discuss feedback in context, and generally collaborate as a team until the layout works in all scenarios.
Employing a lean UX workflow where responsive design is driven by internal testing and feedback will ensure that the user experience works seamlessly across all platforms and screen resolutions before being presented to a real user for the first time.
Understanding the basics
What are breakpoints in responsive design?
Responsive Design Image Scaling Internet Explorer 10
Breakpoints are the key moments when a design is adapted to a new screen size; for example, a breakpoint could be defined at 320px, which is the horizontal size of most mobile device viewports.
What is responsive web design?
Responsive web design entails the process of designing websites that adapt to all devices, platforms, and screen sizes in terms of both form and function.
Responsive Design Image Scaling Internet Explorer Download
What does it mean to be mobile friendly?
Designing mobile friendly websites means to adapt websites to mobile devices. Google defines mobile friendliness by whether or not tap targets meet the minimum requirements of being at least 44x44px, whether fonts are large enough to read, and whether or not content is cut off by the viewport, among other things.
Comments
If you're looking for a tool that helps you develop your responsive website in an easy and intuitive way, I'm working on a browser called https://Polypane.rocks.Polypane helps you get an overview of your website in as many different screen sizes as you need. It can also detect the breakpoints in your design and show screens for that specifically. You can sign up for the beta for free :)
I have read your blog and I got a very useful and knowledgeable information from your blog. It’s really a very nice blog. You have done a great job. Thank you so much for sharing.<a href='https://www.consagous.com/'> Responsive Design and Development Company</a>
Thank you for this excellent read!! I definitely loved every little bit of it. Cheers for the information. This is the perfect blog for those who wants to know about this topic. You know so much it's almost hard to argue with you!Visit http://greatseosolution.com/
With the increasing number of mobile users and more sophisticated devices, web designers need to design more flexible sites that work on platforms, keeping in mind the better user experience across different devices. Here at Gold Coast IT Solutions, we always keep in mind what is in it for our clients and to satisfy them with our service. Thank you for posting informative article
With the increasing number of mobile users and more sophisticated devices, web designers need to design more flexible sites that work on platforms, keeping in mind the better user experience across different devices. Here at Gold Coast IT Solutions, we always keep in mind what is in it for our clients and to satisfy them with our service. Thank you for posting informative article
Please enable JavaScript to view the comments powered by Disqus.comments powered by DisqusHome > Articles > Design > Voices That Matter
␡- High-resolution displays
< BackPage 6 of 8Next >
This chapter is from the book Responsive Design Image Scaling Internet Explorer Free
Implementing Responsive Design: Building sites for an anywhere, everywhere web
This chapter is from the book
This chapter is from the book
Implementing Responsive Design: Building sites for an anywhere, everywhere web
High-resolution displays
Just in case you thought swapping images out based on screen size wasn’t difficult enough, it turns out there is at least one more situation that might require different images: high-resolution displays. The problem really started with the Retina display on the iPhone 4, but it’s been exacerbated by the iPad 3 and the latest versions of the MacBook Pro both supporting a Retina display.
The Retina display sports a whopping 326ppi (pixels per inch) pixel density, compared to 163ppi for the iPhone 3 display. This high density means that images can appear to be incredibly detailed and sharp—if they’re optimized for the display. If they’re not, they will appear grainy and blurry.
Creating images for high-resolution displays means creating larger images, which in turn means larger file sizes. Therein lies the rub. You don’t want to pass these larger images to screens that don’t need them. Currently, there isn’t a great way to do that with content images: it’s the same sort of problem we discussed previously when trying to load images appropriate for different screen widths.
For CSS images, you can use the min-resolution media query for all browsers except those running on WebKit. For WebKit-based browsers, you must use the –webkit-min-device-pixel-ratio media query.
The –webkit-min-device-pixel-ratio media query takes a decimal value representing the pixel ratio. To target the Retina display on the iPhone, iPad, or new MacBook Pro you need a value of at least 2.
The min-resolution media query takes one of two values. The first is the screen resolution in either dots per inch or dots per centimeter. Doing this requires a little math, and some of the early implementations were inaccurate. As a result, I recommend using the new dots per pixel (dppx) unit. Not only does it remove the need for any math (it lines up perfectly with the ratio value accepted by the –webkit-min-device-pixel-ratio media query), but it also avoids the older, incorrect implementations. Support for the dots per pixel unit is still a little sketchy, but since displaying Retina-ready images is a nice enhancement rather than an essential feature, I’m pretty comfortable using it.
The above media query targets any device with a pixel ratio of at least 2. Lines 1–3 set the background image for low resolutions. Lines 4 and 5 target devices with a pixel ratio of at least 2. If the pixel ratio is at least 2, then lines 8–10 apply a higher-resolution image for the background.
SVG
One solution for both high-resolution displays and images that scale across screen sizes is Scalable Vector Graphics (SVG). SVG images are vector images whose behavior is defined in XML. This means they can scale well without actually increasing file size. It also means they can be programmatically altered and adjusted.
One great example of how SVG can improve an experience was the solution Bryan Rieger (now at Yiibu) designed for his then employer Future Platforms and their client, the Royal Observatory at Greenwich. The Observatory's Prime Sky project involved a mobile and desktop site featuring detailed constellation diagrams. The maps (and corresponding text labels) were so complex that simply scaling them to suit small screens caused a loss of valuable detail. Using SVG and some smart scaling, Bryan was able to adjust line quality, font size and the overall composition, retaining detail and legibility across all screen sizes (Figure 4.6).
Figure 4.6. Simply resizing the image resulted in a large loss of detail (top right). By using SVG and some smart scaling, adjustments could be made ensuring that the level of detail could be retained, especially keeping text legible (bottom right).
There are two real issues standing in the way of SVG: browser support and lack of tools. As usual, Internet Explorer 8 and under don’t play along. More importantly, neither does the default browser on Android 2.x—the most popular version of that platform. Those browsers that do support SVG images vary in their level, and quality, of support.
The most popular tools for image creation and manipulation, such as Photoshop, are not built with vector formats like SVG in mind. If you want to create SVG images, you need to find another tool to do it in.
As tools and browsers start to catch up, SVG images may become a very common tool in a web developer’s toolbox.
Related Resources
- Book $47.99
- eBook (Watermarked) $38.39
- Book $47.99
I have a site testing for compatibility issues and responsive designs on IE,Chrome,Firefox,Safari.
In Firefox the testing was completed with ease as it had the developer options and there by pressing the Ctrl+m gives you get the different resolution screen.
The same is not applicable for IE,Safari.Under Google Chrome I tried the Inspect Element and then the Toogle device mode and is slightly difficult.
I have to test the responsive design without using any tool so could you please suggest me on How the above can be done
user285oo6user285oo6
7 Answers
Yes , I have tested a responsive site into the Different browser.
- In Google Chrome Browser to test the Responsive view press F12.-> Click on 'Toggle Device Mode' , Using this option we can select the different type of device mode.
- Another option is we can add app which is 'Responsive Web Design Tester', using this on right click menu Responsive Web Design Tester option is available with different device mode.
- In Mozilla Firefox , Open Web developer tools (ctrl+Shift+I) is available -> Into the select Responsive Design View (ctrl+Shift+M) -> Into this option Different view is available of the different device.
- In IE 8 - 11 Responsive testing you can use site of the https://www.browserstack.com/ and also addon in firefox to check the IE Responsive as Below Snap.
7721 gold badge7 silver badges19 bronze badges
Create a desktop background with overlapping boxes at the resolutions you need.
Resize the browser windows to match those boxes as needed.
Sometimes a lo-fi solution is the best.
SpuckSpuck
Update:You can use inbuilt mode in chrome browser for responsive design testing.
With help of device mode you can do following:
- Test your responsive designs by emulating different screen sizes and resolutions, including Retina displays.
- Evaluate your site's performance using the network emulator, without affecting traffic to other tabs.
- Visualize and inspect CSS media queries.
- Accurately simulate device input for touch events, geolocation, and device orientation.
- Enhance your current debugging workflow by combining device mode with the existing DevTools.
- Enabling device modeTurn on device mode by pressing the Toggle device mode toggle device mode icon off icon. When device mode is enabled, the icon turns blue and the viewport transforms into a device emulator.
You can also toggle device mode on and off using the keyboard shortcut:Ctrl+Shift+M (or Cmd+Shift+M on Mac).
Ref: https://developer.chrome.com/devtools/docs/device-mode
Alternative Options:You can right click on an element on a page and then select Inspect Element option from context menu.
Additionally I would suggest you to use chrome extensions for testing responsive design of your web application. Such as following extensions;
- Responsive Web Design Tester -
- Responsive-web-design testing tool-
Khushboo KapoorKhushboo Kapoor
I would use a virtual machine and install the browsers on there, then you can resize or set the resolution of the machine to match the size you want to test on.
You can install your own operating system on the free VirtualBox https://www.virtualbox.org/
Or you can download free images from Microsoft which have a license for a couple of weeks. You will have to re-download then in a later stage. Its full versions of windows where you can also install other browsers on. Find them on: https://www.modern.ie/en-us
For mimicing mobile browsers on your machine have a look at: https://chrome.google.com/webstore/detail/ripple-emulator-beta/
Niels van ReijmersdalNiels van Reijmersdal22.5k2 gold badges34 silver badges84 bronze badges
In Chrome you can check with the help of inspect element press F12 and select device symbol on that left side top.
then select device mode those you want to test.
Bhargav JanjrukiaBhargav Janjrukia
In Firefox you can check with the help of inspect element press F12 and select Responsive Design Mode symbol near to close developer tools,then write the resolutions that you want to test.eg: 1440x900 (MacBook Pro 15.4)
In chrome you can check with the help of inspect element press F12 and select device symbol on that left side top , then select device mode those you want to test.Here also you can write the resolution of devices.
Certain sites are also there for checking responsive designs.
ArYaArYa
I suggest use the BrowserStack , they has more than 500 platform, I just pick the browsers, according to resolution. Also, I can call API, and automate testing by integrating with Selenium do check on local.
scorpionscorpion
Not the answer you're looking for? Browse other questions tagged manual-testingcross-browser-testingchromeie8 or ask your own question.
The SVG format has plenty of advantages over other image formats for the web. It’s vector-based, compact, and even editable via plain text editors thanks to the XML syntax. There’s a reason why it’s becoming increasingly more popular, especially with the steadily growing mobile web. Responsive webdesign is where it has a lot of strengths. However, it does have some problems here as well. So let’s take a look at the pros and cons of SVG in responsive webdesign.
Scalable at Will
As a vector format, SVG is scalable at will. Especially in responsive and fluid layouts, graphics are often scaled to the maximum width available depending on the browser and display size. With standard JPEG and PNG, you often risk images becoming pixelated. SVG graphics, on the other hand, are always displayed razor-sharp.
While photos can deal with a scaling of over 100 percent, logos and other, less filigree drawings, however, will look blurry at such a scaling.
To allow SVG graphics to be scaled at will, you need to enter the “viewBox” attribute into the “<svg>” element, and to forgo absolute width and height values. Applications like Illustrator automatically place this attribute when exporting to SVG format. When SVG graphics have set width and height values, they are always displayed in these dimensions. Then, scaling isn’t possible. When using the “viewBox” attribute, an SVG graphic is always displayed in the maximum width of the element that ties in the graphic.
When an SVG file is implemented via an “<img>” element, like in this example, you should enter a width and height there. Otherwise, the graphic is scaled as if the “width” value was set to 100 percent.
Another positive aspect of the scalability is the use on high-resolution displays. Without using the “srcset” attribute, which allows for the integration of high-resolution image files, pixel-based graphics are always scaled up. However, when using SVG graphics, you save the work of having to provide multiple versions of a graphic for different pixel densities. An SVG graphic is always displayed at its best resolution.
Adjustable Via Media Queries
Another significant advantage of the SVG format is the application of Media Queries and CSS. Similar to an HTML document, the appearance can be adjusted to the respective width. In contrast to HTML documents, the width of the browser window or display, respectively, is not the decisive factor, but the width of the element that integrates an SVG graphic into a document.
Especially detailed graphics often fail to shine on small displays. For that, there’s the option to simply hide expendable details using a “display” attribute. As a graphic’s line width is always scaled with the rest, the lines can sometimes become too slim to be clearly visible.
SVG Without Media Queries: Thin Lines Because of Small Scaling
Here, a stronger line can be chosen using CSS.
In our example, the line width is set to six pixels. It is buffed to twelve pixels on depictions of less than 320 pixels in width.
SVG With Media Queries: Line Width is Enhanced For Small Scaling
Overall, plenty of optimizations can be made this way. By now, Media Queries and CSS within an SVG graphic are supported by all modern browsers. Internet Explorer starting from version 10 also supports it.
It doesn’t matter whether you implement the SVG file via “<iframe>”, “<object>” or “<img>” elements. In any case, the Media Queries are executed.
Integrating SVG Via CSS
Integration via CSS works the same way as the integration with an “<img>” element. However, there are a few things to keep in mind here. For example, if you want to use an SVG graphic as a background image, it will always be scaled to the element’s full width when using the “viewBox” method described above.
Background Graphic with „viewBox“ Property but without „background-size.“
This can be helped by defining a fixed size for the “<svg>” element instead of using the “viewBox” attribute. Alternatively, it is possible to define the background size via CSS, using the “background-size” attribute.
Background Graphic With “viewBox” property and “background-size”
From time to time, you might want to equip HTML elements with a background graphic that has the exact same measurements. For fixed sizes, that’s not a problem, as all you need to do is enter absolute values. However, when trying to equip the element with a relative size instead, which is often the case when it comes to responsive webdesign, a few tricks are necessary.
Here is where the so-called “padding-bottom” hack comes into play. Let’s assume an element is supposed to always take up 50 percent of the window width. With CSS, an SVG background graphic can always be defined to assume the HTML element’s width. The problem starts when it comes to the height. When assigning a relative height to the HTML element, it will always be displayed in relation to the window, but not in relation to the element’s width.
However, it is possible to enter a value that is interpreted in relation to the element width, using “padding-bottom”, and the “calc()” rule. For instance, when my SVG graphic has an aspect ratio of 2:1, I can enter this aspect ratio with “padding-bottom”. For that, the width of the element is divided by the aspect ratio.
As seen above, the width of 50 percent is divided by the aspect ratio of 2:1. Instead of “calc()”, you could also directly enter the calculated value, 25 percent in this case. Thus, the HTML element always has a width of 50 percent as well as a height that matches the SVG graphic’s aspect ratio.
Conclusion
The SVG format can make use of many of its strengths when it comes to responsive webdesign. Above all else, it eases work, as graphics don’t need to be provided for multiple solutions anymore. There’s no longer a lack of sufficient browser support either.
(dpe)