Responsive web design is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It uses flexible grids and layouts, flexible images and media queries. Media queries allow the page styling to adapt to different screen sizes and resolutions by applying different CSS styles. A responsive web design uses a flexible grid system, flexible images and media, and media queries to automatically adjust for different screen sizes and devices.
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.
Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
Responsive Images
Improving Performance
Responsive Typography
Media queries in JavaScript
Layout
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.
N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!
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.
Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
Responsive Images
Improving Performance
Responsive Typography
Media queries in JavaScript
Layout
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.
N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
In today's internet scenario responsive websites are the most popular way of putting a website in worldwide web, as this a form in which your website can be seen in multiple devices without any problem. In this slide we tried to explain step by step processes in responsive website design.
Responsive Web Design for Universal Access 2016Kate Walser
You can improve how well your website works and looks across different devices using responsive web design techniques. But did you know you can also improve access for all users, including those with disabilities, by applying responsive techniques? Learn how.
Icon fonts are becoming an increasingly popular way to delivery iconography for websites. They reduce HTTP requests, provide a resolution-independent way to scale icons, and are often smaller than sprites. In this session we'll explore what icon fonts are, the pros and cons of using them, how to make your own, and best practices for deploying them.
Slides from my 2013 Breaking Development conference workshop. We explore the tools and techniques behind building your own icon fonts, covering the entire process from sketching icon concepts to properly deploying your font. Topics cover include: designing icons, considerations for designing font glyphs, setting up Illustrator templates, working with Glyphs, exporting fonts, creating web fonts, and using icon fonts semantically.
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.
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.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
In today's internet scenario responsive websites are the most popular way of putting a website in worldwide web, as this a form in which your website can be seen in multiple devices without any problem. In this slide we tried to explain step by step processes in responsive website design.
Responsive Web Design for Universal Access 2016Kate Walser
You can improve how well your website works and looks across different devices using responsive web design techniques. But did you know you can also improve access for all users, including those with disabilities, by applying responsive techniques? Learn how.
Icon fonts are becoming an increasingly popular way to delivery iconography for websites. They reduce HTTP requests, provide a resolution-independent way to scale icons, and are often smaller than sprites. In this session we'll explore what icon fonts are, the pros and cons of using them, how to make your own, and best practices for deploying them.
Slides from my 2013 Breaking Development conference workshop. We explore the tools and techniques behind building your own icon fonts, covering the entire process from sketching icon concepts to properly deploying your font. Topics cover include: designing icons, considerations for designing font glyphs, setting up Illustrator templates, working with Glyphs, exporting fonts, creating web fonts, and using icon fonts semantically.
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.
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.
Developing a Progressive Mobile StrategyDave Olsen
My presentation given at HighEdWeb Rochester on June 27, 2011. It focuses on how universities should think about developing and building out their strategy for mobile devices. The future of mobile in higher ed is much larger than one app or one website. Numbers regarding adoption of mobile overall as well as at West Virginia University are included.
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.
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
A presentation I gave at Breaking Development 2011 (which was an updated and modified version of the presentation I gave at Fronteers 2010). In this talk I touched on the new Flexbox draft and CSS3 Grid Layout. Interestingly enough, while I was presenting, Microsoft announced IE10, which includes support for both specs (as well as multicolumn layout).
Color, themes, fonts: The building blocks of good e-commerce and ui designJosh Levine
Visual design on e-commerce sites is sometimes viewed as a purely aesthetic matter, but it has another important job. Used effectively, such design elements as color and type font can help visitors navigate a page and call out a product’s best features. Used poorly, they can distract visitors and detract from sales.
Josh Levine and Seth Newman discuss the redesign of Action Envelope's successful ecommerce website by web agency Alexander Interactive. Presented at the 2009 Internet Retailer Web Design Conference and Expo.
----
Description from Internet Retailer Conference:
"Colors, themes, fonts: The building blocks of good design"
— Josh Levine, Founder and Chief Experience Officer, Ai (Alexander Interactive)
— Sari Levine, Creative & User Experience Director, E-Commerce, Lowe's Cos. Inc.
Design elements that you choose to engage your customers work on consumers at a subconscious level—colors, themes, fonts, use of white space—but they are crucial to grabbing and holding shoppers' attention. This session will offer extremely practical advice and analysis of the building blocks of good design—what messages do different fonts communicate? When should you have white space and when not? What colors trigger certain reactions in consumers? How do you develop a design theme for a web site and how do you carry it out throughout the entire site without its becoming intrusive? This session will feature a design expert and a retailer who will discuss each of these important building blocks in detail and demonstrate how they were applied to a site design.
Industrial Design fundamental in User Experience Design bouchardr
Modern tools are helpful but returning to the basics of concept development are a must as we try to accelerate the design process into the digital age.
There are many resources on development for designers but what about design for developers? It shows how to create an effective layout, which fonts to choose, and how to make proper color choices. Skills that can be used in any graphic presentation.
(Presentation was given at the Heartland Developer Conference.)
VDIS10021 Working in Digital Design - Lecture 4 - Digital Colour ManagementVirtu Institute
This lecture is an overview that defines what digital colour is and how it can be managed through appropriate workflow to result in consistent colour outcomes for either web or print.
A starter guide to Color Theory in design. We will cover ideals like the Color Wheel (Primary, Secondary, Tertiary), Compliments, Triads, Split Compliments, Analogous, Shades, Tints, Monochromatic, Warm & Cool, and of course take a quick look at the differences between RGB and CMYK Color Modes.
Color is one of the first things we learn how to do in CSS — and yet many of us don't ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website. And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically.
Presented in 2015 & 2016 at Amazon's WebDevCon, ConFoo, Breaking Development, Mobile+Web Dev Conference, Code Fellows Seattle, CascadiaFest, CSS Summit, CSS Brigade Vancouver, CSS Day Amsterdam, Future Insights Live, WebVisions NYC, and Albany UX.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
Visitors to your site are increasingly less likely to have a traditional desktop experience. There’s a widening diversity of browsers and devices as the mobile, netbook and tablet market explodes. Can your designs handle this new world? Learn how CSS3 can be used to create a responsive design that adapts well to your visitors regardless of how large or small their screen sizes are. We’ll cover why you need to design your sites to work on a widening array of devices and screen sizes. There will be examples and coding. In particular, we’ll look at implementing a fluid grid and flexible images and using media queries to create a great experience for all visitors.
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
With great power, comes great responsive-ability web design.
Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.
Digibury: Getting your web presence mobile ready - David WalkerLizzie Hodgson
Getting your web presence mobile ready is a must for anyone involved with web development. Juggling the HTML5, CSS and Javascript to get there can be a challenge in a technological landscape where traditional designer and developer roles are changing. In this talk, David Walker, Principal Technologist Web & Mobile Development at qa.com, explored open source ZURB Foundation - a rapid prototyping and industrial scalable CSS framework that makes responsive design a simpler affair. Oh, and it has unicorns.
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Responsive Web Design
1. Responsive Web Design “ The Way is shaped by use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow into the worldAs a river courses down to the sea.—DAO DE JING, section 32, “Shapes”
69. Thanks. Questions? “ The Way is shaped by use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow into the worldAs a river courses down to the sea.—DAO DE JING, section 32, “Shapes”
Editor's Notes
The Web is Young No History, very few best practices in comparison to other “artists”. Conditioned to think the way of the graphic designer, or artist. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
We're conditioned to think the way of the graphic designer, or artist. When an artist starts a new piece of work he or she chooses very carefully. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
We're conditioned to think the way of the graphic designer, or artist. When an artist starts a new piece of work he or she chooses very carefully. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
Artists have their constraints. Constraints are good because they provide boundaries In Web Design we struggle with boundaries So we create our own.
Start with no canvas We set the minimum width of the smallest monitor that we want to design for, probably 960 pixels because that also fits nicely into a grid. This gives us boundaries to begin building the site, because after all boundaries are great because the give us limitations and provide focus. Can you imagine the highway with no lines painted on the road? Or a game of football without markings on the pitch? Or houses without your allotted land parchment? The next time you start looking at designing a site.......
Don’t do it! Don’t automatically on your next project go down that road. If we pick a canvas size we might be wrong.
But what happens when that occurs and we get the dimensions wrong? We run the risk of the website being clipped and not showing the full extent of what ins supposed to be seen. (include a picture of a scene that has horizontal and vertical scroll bars).
Mobile devices are increasing every day. We could look at browser sniffing but there’s a whole bunch of issues there - no js, sending incorrect request headers, overriding headers etc
Shorten the list by focussing on widths instead of devices These will increase as well, but it’s easy to accomodate. SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN?
SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN? Not as complicated as that looks.
SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN? Not as complicated as that looks.
The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
1024 px #container auto margin to center, some box shadow 620px Header 360px navigation 730px content 250px side bar numerous padding & margins
The reason we start here is because it doesn’t make our head hurt as much.
The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
You will see this a lot. If you choose responsive design You will live and breathe this algorithm
You will see this a lot. If you choose responsive design You will live and breathe this algorithm
The default body size for browsers is 16px Set body to 100%, and base all typographical decisions from there. This is just typography, so ignore the layout aspects of padding and margins for now.
Finish typography and start the Layout
Same principal.
The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
You will see this a lot. If you choose responsive design You will live and breathe this algorithm
1024 px #container auto margin to center, some box shadow (i’m going to pick an artibrary figure of 90% for this size because...... 620px Header 360px navigation 730px content 250px side bar numerous padding & margins
You will see this a lot. If you choose responsive design You will live and breathe this algorithm 360px navigation 730px content 250px side bar
You will see this a lot. If you choose responsive design You will live and breathe this algorithm 360px navigation 730px content 250px side bar
BE CAREFULL ABOUT THE CONTEXT
The context may change throughout the document
now before you round, don't. Browsers will round that themselves to a suitable size, so we want to give them as much information to make that computed change as possible.
Go through all the measurements in the site and change them. Paddings. Margins. Widths. Sometimes Heights (height is difficult to have a context)
Enter max-width: 100%;
this rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first. Remove the fixed width provided width= height=. this might fault.
this rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first.
There are some issues with IE6 around the max-width. i.e. it doesn’t work exactly right Do some searches, read the Ethans book for more information.
There are some issues with IE6 around the max-width. i.e. it doesn’t work exactly right Do some searches, read the Ethans book for more information.
You do need to watch out for ie7 rendering image sizes however Simply download the script (available at http://bkaprt.com/rwd/16/ ) and include it on any page with flexible images; it will scour your document to create a series of flexible, high-quality AlphaImageLoader objects.
Create a MASSIVE background image, and use the repeat-y “algorithm”
There is a CSS3 property called background-size ( http://bkaprt.com/rwd/20/ ), which would allow us to create truly flexible background images, but—you guessed it—browser support is still pretty immatureScott Robbin’s jQuery Backstretch plugin ( http://bkaprt.com/rwd/21/ ) simulates resizable bac kground images on the body element.
W3C had an idea Media Types came first These were the types you could choose
The phones started getting smarter. Not much support for “handheld”, so phone browsers sent “screen” headers by default
The phones started getting smarter. Not much support for “handheld”, so phone browsers sent “screen” headers by default
Now, every media query—including the one above—has two components:1. Each query still begins with a media type (screen), drawn from the CSS 2.1 specification’s list of approved media types ( http://bkaprt.com/rwd/26/ ).2. Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px).
Think of a media query like a test for your browser. When a browser reads your stylesheet, the Browser asks two questions: first, if it belongs to the screen media type; and if it does, if the browser’s viewport is at least 1024 pixels wide. If the browser meets both of those criteria, then the styles enclosed within the query are rendered; if not, the browser happily disregards the styles, and continues on its merry way.
Explain slide. Now there can be some confusion over max-width, min-width, max-device-width etc So we get taken to the age old question.....
DOES SIZE of the browser MATTER?
DOES SIZE MATTER?
Here are two quick guidelines that helped me sort it out: I won’t get into iphone 4 rendering more pixels from a display area than is available on the rendering surface though
Visit this link for a list of queries that you can call with CSS3.
WAIT - THERE'S MOARChain conditions together so that you can even better target specifics such as width and orientation.@media screen and (min-device-width: 480px) and (orientation: landscape) { … }Be warned though, iPhone iPad example... Moral is test for specific devices, do not assume just because thou might be able.
Lets take a closer look.
css3-mediaqueries.js - explain it’s hefty and checks all parenthis next screen for respond.js
very light weight and quick, but you’re still relying on JS
getting away from the code for a whole I wanted to reflect on the application of responsive design. While responsive design is an amazing option for web developers to offer up different layouts and designs for different devices and sizes, it certainly is not the answer in every situation.You could easily code up an entirely two different sites in the HTML markup and set display:none; for the mobile version when viewed on desktop size screens, and switch them in the media queries. Possible, but not a great idea. You're making both users download a whole bunch of extra markup that simply doesn't matter, and that's just not cool. Uncool. UNCOOL!!!In these cases it's better to offer two completely separate solutions and rely on some server side of JavaScript based redirection.
Don’t break a design down from the full size Build it linear to start with Forces you to prioritise content. In a linear environment there is no "this is as important as the that on" because there IS no equal. (insert a picture for the slide of a row of kids shortest to tallest).
Don’t break a design down from the full size Build it linear to start with Forces you to prioritise content. In a linear environment there is no "this is as important as the that on" because there IS no equal. (insert a picture for the slide of a row of kids shortest to tallest).
there is no substitute for testing on the actual devices, but if you don't have them then you can check out web developer tools. In fact, set them up as presets for you to push them through. All your business comes online, then buy devices