Responsive web design allows sites to adapt to different screen sizes and devices. Key techniques include using flexible layouts with relative units, media queries to apply styles conditionally, responsive images, and grid systems. The viewport meta tag controls scaling. Flexbox and grids help build flexible layout structures. Tables can be made responsive by scrolling or rearranging content for small screens. Mobile-first and content-focused approaches support responsive goals.
Brief overview about difference of adaptive and responsive web design, main principles of build responsive layout, and main component of responsive layout is media query.
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
a presentation on the responsive web designing..that tell you technology gives more efficient way to meet the end clients and solving the user experience problems
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
Brief overview about difference of adaptive and responsive web design, main principles of build responsive layout, and main component of responsive layout is media query.
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
a presentation on the responsive web designing..that tell you technology gives more efficient way to meet the end clients and solving the user experience problems
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Media queries is very important for developing Modern Websites. This slide will guide you about Media queries. After watching this, you don't need any other tutorial or lessons.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.
This presentation gives an overview on Java standard portlets. It speaks about the trends in java portals and java specification requests created to achieve the Java portlet programming. It also tells the portal advantage over the conventional approach of web programming based on Java platform.
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
AngularJS, a MVW framework from Google is based on JavaScript, a language globally known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Integrating AngularJS is simple as it evaluates page once HTML is in the DOM and make easier to bind Angular on top of existing applications. It can run along with Node.js, an asynchronous development platform with lightning speed execution, which makes building Mean Stack applications easier and faster. AngularJS comes with a very good documentation and also have wide range of third party modules making it user-friendly for developers.
An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Media queries is very important for developing Modern Websites. This slide will guide you about Media queries. After watching this, you don't need any other tutorial or lessons.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.
This presentation gives an overview on Java standard portlets. It speaks about the trends in java portals and java specification requests created to achieve the Java portlet programming. It also tells the portal advantage over the conventional approach of web programming based on Java platform.
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
AngularJS, a MVW framework from Google is based on JavaScript, a language globally known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Integrating AngularJS is simple as it evaluates page once HTML is in the DOM and make easier to bind Angular on top of existing applications. It can run along with Node.js, an asynchronous development platform with lightning speed execution, which makes building Mean Stack applications easier and faster. AngularJS comes with a very good documentation and also have wide range of third party modules making it user-friendly for developers.
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.
Responsive web design refers to a website designed to adapt to whatever device a visitor is using. Responsive web sites are designed to provide an optimal viewing experience across all platforms.
In this presentation, you'll find benefits and basic principles of Responsive Web Design.
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.
I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.
Welcome To
Responsive web design basics | SEO Expate BD Ltm.
how to design websites that adapt to the requirements and capabilities of the device being used to view them. Web browsing on mobile devices is expanding at an astounding rate, yet these devices frequently have limited display space and necessitate a different approach to information organization. accompanies consumers' needs and those of the gadgets they utilize. Depending on the size and capabilities of the gadget, the layout alters. On a phone, for instance, consumers might see content presented in a single column perspective; on a tablet, the same content might be presented in two columns.
Screen sizes for phones, "phablets," tablets, workstations, game consoles, TVs, and even wearables range widely. Your site must be able to adapt to any screen size, whether they exist now or in the future, as screen sizes are constantly changing. Devices also come with a variety of features that let us engage with them. For instance, some of your guests will use touchscreen technology. All of these factors are taken into account in contemporary responsive design to enhance the user experience.
the viewport setting
A meta viewport tag needs to be placed in the document's head for pages that are responsive to different screen sizes. A meta viewport tag instructs the browser how to adjust the page's size and scaling. The meta viewport value width=device-width informs the page to resize its width in device-independent pixels to match the width of the screen. A device (or density) independent pixel is a representation of a single pixel that, on a screen with high pixel density, may include numerous actual pixels. This enables the page's content to reflow to fit various screen sizes, whether it is displayed on a tiny mobile phone or a huge desktop monitor.
Adapt content size to viewport
Users are accustomed to browsing websites vertically on desktop computers and mobile devices, but not horizontally. Forcing the user to zoom out or scroll horizontally in order to view the entire page leads to a poor user experience.
It's simple to inadvertently produce page content that doesn't exactly fit into the designated viewport when designing a mobile site with a meta viewport tag. The viewport may scroll horizontally, for instance, if an image is displayed at a width that is greater than the viewport. To avoid forcing the user to scroll horizontally, you should resize this content to fill the viewport's width. The content is not properly scaled for the viewport. You can automate the process of finding overflowing content with the use of Lighthouse audit.
Images
A scrollbar will appear if an image's fixed dimensions are larger than the viewport. The solution to this issue is to set the maximum width for all pictures to 100%. If the viewport size is smaller than the picture, the image will be shrunk to fit the available space. The image won't expand any larger than its actual size because the max-width, not th
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Dr. Vinod Kumar Kanvaria
Exploiting Artificial Intelligence for Empowering Researchers and Faculty,
International FDP on Fundamentals of Research in Social Sciences
at Integral University, Lucknow, 06.06.2024
By Dr. Vinod Kumar Kanvaria
This slide is special for master students (MIBS & MIFB) in UUM. Also useful for readers who are interested in the topic of contemporary Islamic banking.
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
Francesca Gottschalk - How can education support child empowerment.pptxEduSkills OECD
Francesca Gottschalk from the OECD’s Centre for Educational Research and Innovation presents at the Ask an Expert Webinar: How can education support child empowerment?
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
2. WHAT?
Responsive Web Design (RWD) is an approach to web
design aimed at crafting sites to provide an optimal viewing
experience across a wide range of devices.
4. WHY?
Day by day, the number of devices,
platforms, and browsers that need to work
with your site grows. Responsive web
design represents a fundamental shift in
how we’ll build websites for the decade to
come.
Jeffrey Veen
6. HISTORY
2004
A site layout example that adapts to browser viewport
width was first demonstrated by Cameron Adams.
2009
CSS3 media queries were almost ready for prime time.
2010
Ethan Marcotte coined the term responsive web design.
2012
Responsive design was listed as #2 in Top Web Design
Trends.
7. HOW CAN WE DO RESPONSIVE?
viewport
media queries
flexible images and media
adaptive images
grids
flexbox
responsive tables
9. VIEWPORT BASICS
DEVICE PIXELS AND CSS PIXELS
Device pixels give the formal resolution of whichever
device you’re working on.
At zoom level 100% one CSS pixel is exactly equal to one
device pixel.
Zooming to 200% makes one CSS pixel grow to four times
the size of one device pixels.
10. VIEWPORT BASICS
THE DESKTOP VIEWPORT
The function of the viewport is to constrain the <html>
element, which is the uppermost containing block of your
site.
The <html> element takes 100% of the width of that
viewport.
The viewport has the width and height of the browser
window — on desktop.
11. VIEWPORT BASICS
THE MOBILE VIEWPORTS
The visual viewport is the part of the
page that’s currently shown on-
screen.
The CSS layout, especially percentual
widths, are calculated relative to the
layout viewport.
12. VIEWPORT META TAG
A meta viewport tag gives instructions on how to control the
page's dimensions and scaling.
13. VIEWPORT META TAG HISTORY
It was first implemented by Apple for the Safari/iPhone
browser, but has since been implemented for most of
mobile browsers.
14. VIEWPORT META TAG SYNTAX
<meta name="viewport" content="width=devicewidth, initialscale=1">
16. VIEWPORT META TAG PROPERTIES
Property Description
width Width of the viewport in pixels (or device-width). If width isn’t
set, it defaults to a desktop size (980px on mobile Safari).
height Height of the viewport in pixels (or device-height). Generally
you don’t need to worry about setting this property.
initial-
scale
(0 to 10.0) Multiplier that sets the scale of the page after its
initial display. Safe bet: if you need to set it, set it to 1.0.
Larger values = zoomed in, smaller values = zoomed out
17. VIEWPORT META TAG PROPERTIES
Property Description
minimum-
scale
(0 to 10.0) The minimum multiplier the user can “zoom out”
to. Defaults to 0.25 on mobile Safari.
maximum-
scale
(0 to 10.0) The minimum multiplier the user can “zoom in”
to. Defaults to 1.6 on mobile Safari.
user-
scalable
(yes/no) Whether to allow a user from scaling in/out
(zooming in/out). Default to “yes” on mobile Safari.
18. CSS @VIEWPORT
The @viewport rule consists of the @-keyword followed by a
block of property declarations describing the viewport.
@viewport {
width: 980px;
minzoom: 0.25;
maxzoom: 5;
}
19. CSS @VIEWPORT PROPERTIES
Property Description
width Sets both max and min-width. It's a shorthand descriptor.
auto | device-width | length | percentage
max-width auto | device-width | length | percentage
min-width auto | device-width | length | percentage
orientation Lock orientation or leave to auto.
auto; // auto | portrait | landscape
20. CSS @VIEWPORT PROPERTIES
Property Description
zoom 'zoom' equates to 'initial-scale' in meta tag.
auto | number | percentage
max-zoom Largest allowed zoom factor.
min-zoom Smallest allowed zoom factor.
user-zoom Equates to 'user-scalable' in meta tag.
fixed | zoom
21. SUMMARY
Use a meta viewport tag to control the width and scaling
of the browsers viewport.
Include width=device-width to match the screen's width
in device independent pixels.
Include initial-scale=1 to establish a 1:1 relationship
between CSS pixels and device independent pixels.
Ensure your page is accessible by not disabling user
scaling.
23. MEDIA QUERIES
Media queries let the presentation of content be tailored to
a specific range of output devices without having to change
the content itself.
24. SYNTAX
A media query consists of a media type and zero or
more expressions that check for the conditions of
particular media features
<link rel="stylesheet" media="screen and (color)" href="ex.css">
@import url("ex.css") screen;
@media (minwidth:500px) { … }
26. MEDIA TYPES
Type Description
all Suitable for all devices.
braille Intended for braille tactile feedback devices.
embossed Intended for paged braille printers.
handheld Intended for handheld devices (typically small screen,
limited bandwidth).
print Intended for paged material and for documents viewed on
screen in print preview mode.
27. MEDIA TYPES
Type Description
projection Intended for projected presentations, for example
projectors.
screen Intended primarily for color computer screens.
speech Intended for speech synthesizers.
tty Intended for media using a fixed-pitch character grid (such
as teletypes, terminals, or portable devices with limited
display capabilities).
tv Intended for television-type devices (low resolution, color,
limited-scrollability screens, sound available).
28. MEDIA FEATURES
Property Description
aspect-
ratio
is defined as the ratio of the value of the ‘width’ media
feature to the value of the ‘height’ media feature.
color describes the number of bits per color component of the
output device.
color-
index
describes the number of entries in the color lookup table of
the output device.
device-
aspect-
ratio
is defined as the ratio of the value of the ‘device-width’ media
feature to the value of the ‘device-height’ media feature.
29. MEDIA FEATURES
Property Description
device-
height
describes the height of the rendering surface of the output
device.
device-
width
describes the width of the rendering surface of the output
device.
grid is used to query whether the output device is grid or
bitmap.
height describes the height of the targeted display area of the
output device.
30. MEDIA FEATURES
Property Description
monochrome describes the number of bits per pixel in a monochrome
frame buffer.
orientation is ‘portrait’ when the value of the ‘height’ media feature
is greater than or equal to the value of the ‘width’ media
feature.
resolution describes the resolution of the output device, i.e. the
density of the pixels.
scan describes the scanning process of "tv" output devices.
width describes the width of the targeted display area of the
output device.
32. JS API: MEDIAQUERYLIST
matches
Boolean whether the query matched or not.
media
Serialized media query list.
addListener
Adding event listener to a media query. Listener is
invoked when the media query's evaluated result
changes.
removeListener
Removing event listener from a media query.
33. SUMMARY
Media queries can be used to apply styles based on device
characteristics.
Use min-width over min-device-width to ensure the
broadest experience.
38. FLEXIBLE SVG
Modern browsers make svg flexible from the box. For old
browsers a padding 'workaround' can be used.
.svgcontainer {
display: inlineblock;
position: relative;
width: 100%;
paddingbottom: 100%;
verticalalign: middle;
overflow: hidden;
}
.svgcontent {
display: inlineblock;
position: absolute;
top: 0;
left: 0;
}
39. FLEXIBLE CANVAS
If you resize the canvas, the drawn content is always erased.
You can either redraw the content after resizing.
var previousWidth = window.innerWidth;
var resizeCanvas = function(context){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
scale = window.innerWidth/previousWidth;
context.scale(scale, scale);
drawRectangle(context);
};
window.addEventListener('resize',
resizeCanvas.bind(null, context),
false);
41. SRCSET
A list of one or more strings separated by commas
indicating a set of possible image sources for the user
agent to use.
Getting images to scale efficiently across varying viewport
widths and screen resolutions.
43. SIZES
A list of one or more strings separated by commas
indicating a set of source sizes.
Source size values specify the intended display size of the
image.
45. PICTURE AND ART DIRECTION
srcset if you’re lazy, picture if you’re crazy.
Mat Marquis
46. ART DIRECTION
Tailoring image content to fit specific environments.
Sometimes this means cropping an image.
Other times, it can mean a different image altogether
that may have different proportions or may be changed
in other ways to communicate more effectively in a
layout.
54. RESPONSIVE GRIDS
Extra small
devices
Phones (<768px)
Small
devices
Tablets (≥768px)
Medium
devices
Desktops (≥992px)
Large
devices
Desktops (≥1200px)
Grid
behavior
Horizontal at
all times
Collapsed to start, horizontal above
breakpoints
Container
width
None (auto) 750px 970px 1170px
Class
prefix
.col‐xs‐ .col‐sm‐ .col‐md‐ .col‐lg‐
58. FLEXBOX BASICS
FLEX CONTAINER
display
defines a flex container.
flex-direction
establishes the main-axis.
flex-wrap
allows the items to wrap.
flex-flow
is a shorthand flex-direction and flex-wrap properties.
59. FLEXBOX BASICS
FLEX CONTAINER
justify-content
defines the alignment along the main axis.
align-items
defines the default behaviour for how flex items are laid
out along the cross axis on the current line.
align-content
aligns a flex container's lines within when there is extra
space in the cross-axis.
60. FLEXBOX BASICS
FLEX ITEMS
order
controls the order in which flex items appear in the flex
container.
flex-grow
defines the ability for a flex item to grow if necessary.
flex-shrink
defines the ability for a flex item to shrink if necessary.
61. FLEXBOX BASICS
FLEX ITEMS
flex-basis
defines the default size of an element before the
remaining space is distributed.
flex
is the shorthand for flex-grow, flex-shrink and flex-basis
combined.
align-self
allows the default alignment to be overridden for
individual flex items.
67. USE RELATIVE UNITS
A key concept behind responsive design is fluidity and
proportionality as opposed to fixed width layouts.
68. DON’T USE RELATIVE UNITS
Don’t use relative units everywhere. Ask yourself a question:
Is this property depending on the viewport
width?
69. CHOOSE CORRECT BREAKPOINTS
Defining breakpoints based on specific devices, products,
brand names, or operating systems that are in use today
can result in a maintenance nightmare.
The content itself should determine how the layout
adjusts to its container.
70. ‘MOBILE’ FIRST
Use the simplest layout as a start point.
Forces You to Focus on Core Content and Functionality.
In most cases this approach will get less css styles
overrides.
75. EXTERNAL RESOURCES
Responsinator.com
displays as numerous devices
iOS Simulator
if you have a Mac. (After launching Xcode, go into
the Xcode menu and chooseOpen Developer Tool > iOS
Simulator)
Browserstack
for cross browser and device testing.
77. TEST ON REAL DEVICES
Nothing beats holding a device and touching a site.
How far do you need to reach to tap something?
How well does the device respond?