This document provides an overview of responsive web design. It defines responsive web design as an approach that aims to provide optimal viewing experiences across different devices. It discusses the history and alternatives to responsive design. The key aspects of responsive design are then explained, including fluid grids, flexible images, CSS media queries, and using the viewport meta tag. Tools for responsive design like Bootstrap and techniques like fluid layouts are also covered. Finally, resources for further learning about responsive web design are provided.
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.
This document provides an overview of key concepts for understanding WordPress including:
- WordPress is a content management system (CMS) that allows users to create and manage website content without coding knowledge. It uses PHP code behind the scenes.
- Key vocabulary includes: content, themes, posts, pages, widgets, plugins, dashboard, host/server, URL/domain name.
- Users can choose WordPress.org for full functionality or WordPress.com which is free but has limitations. Themes and plugins are limited on WordPress.com.
- The document reviews how to set up a WordPress site including choosing a theme, domain name, and plan. It also covers creating posts and pages, adding media
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
1. HTML5 is a major revision to the HTML standard that is still under development and aims to be the future of the web.
2. It includes new elements like <video>, <audio>, and <canvas> that allow embedding multimedia without plugins, as well as features like geolocation.
3. The HTML5 specification is very large, covering HTML, SVG, CSS, and APIs. It aims to provide a common standard for web applications.
4. HTML5 is not just a marketing term - it represents an ongoing effort to develop a unified standard for the next generation of the web.
This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.
This document provides an overview of responsive web design. It defines responsive web design as an approach that aims to provide optimal viewing experiences across different devices. It discusses the history and alternatives to responsive design. The key aspects of responsive design are then explained, including fluid grids, flexible images, CSS media queries, and using the viewport meta tag. Tools for responsive design like Bootstrap and techniques like fluid layouts are also covered. Finally, resources for further learning about responsive web design are provided.
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.
This document provides an overview of key concepts for understanding WordPress including:
- WordPress is a content management system (CMS) that allows users to create and manage website content without coding knowledge. It uses PHP code behind the scenes.
- Key vocabulary includes: content, themes, posts, pages, widgets, plugins, dashboard, host/server, URL/domain name.
- Users can choose WordPress.org for full functionality or WordPress.com which is free but has limitations. Themes and plugins are limited on WordPress.com.
- The document reviews how to set up a WordPress site including choosing a theme, domain name, and plan. It also covers creating posts and pages, adding media
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
1. HTML5 is a major revision to the HTML standard that is still under development and aims to be the future of the web.
2. It includes new elements like <video>, <audio>, and <canvas> that allow embedding multimedia without plugins, as well as features like geolocation.
3. The HTML5 specification is very large, covering HTML, SVG, CSS, and APIs. It aims to provide a common standard for web applications.
4. HTML5 is not just a marketing term - it represents an ongoing effort to develop a unified standard for the next generation of the web.
This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.
CSS media queries allow specifying different CSS styles for different screen sizes and devices. They enable responsive web design by loading only valid CSS for a given viewport width. This presentation introduces CSS media queries, their advantages for responsive design, how to use media queries in CSS and HTML, and tips for cross-browser compatibility including a JavaScript workaround for older IE versions. Examples are provided and references listed for further information.
In this session Simon will share his considerable experience of managing projects; from the initial client meetings to getting sign-off on designs to finally going live, and all that comes inbetween.
This document summarizes Jeff Croft's presentation at Web Directions South 2008 about elegant web typography. He discusses common myths about web typography and emphasizes that great typography is important for well-designed sites. Croft also covers techniques for achieving quality typography with CSS, including resetting styles, understanding font sizing with ems, and considering whether to use relative or absolute font sizes. The presentation provides guidance for thoughtfully designing typography at different sizes using a typographer's scale.
In 2006 Simon wrote a successful book about learning CSS. Building the web wasn’t easy back then, but CSS was pretty basic. Simon also used to talk about systems a lot, but didn’t have many answers. Fast-forward to 2014 and everything has changed; that CSS book is both useless and wrong, and systems inform much of what we build. This talk will look at how the landscape changed for front-end designers, and how we must think more holistically about the scope of our projects. With practical examples he’ll explore the tools, methodologies and systems that reenergised him and helped make sense of the whole darned mess.
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.
HTML5 is a new version of HTML that aims to improve the semantic structure and functionality of web pages. It introduces new elements like <header>, <nav>, <article>, and <footer> to better define page sections. While browser support is still evolving, many modern browsers support key HTML5 features. The HTML5 specification is developed by the World Wide Web Consortium to advance web standards.
This document provides an overview of HTML5 and related technologies. It discusses how HTML5 is more than just HTML, and covers the HTML5 specification process and components. It then provides a tour of new HTML5 features like <video>, <audio>, SVG, <canvas>, geolocation, and CSS3 specifications including borders, colors, shadows, backgrounds, fonts, media queries and transforms. The document demonstrates several of these features and provides resources for further information.
The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
This document outlines an agenda for an HTML5 essential training. It covers front-end technologies, HTML basics and evolution, terminology, document structure, common elements, section elements, semantic elements, features beyond basics, and useful resources. The training includes live demos of common elements and <div> usage. It compares using HTML4 divs versus HTML5 semantic elements for page structure.
Initially presented during the Web 2.0 Expo in Berlin, this presentation takes typography beyond the surface layer. Structure, Process, Macro and Micro typography are all covered in detail to help you improve the typographic quality on your site, service or product.
The web standards gentleman: a matter of (evolving) standards)Chris Mills
This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.
Silverlight 5 for Line of Business provides concise summaries of key features in Silverlight 5 including improved threading that offloads GPU animations and network requests to non-UI threads for better performance, expanded text functionality like multi-column text overflow and character spacing controls, and enhanced data binding capabilities such as style data binding, implicit data templates, ancestor binding, and data binding debugging. The document also reviews the history and adoption of Silverlight and provides examples of how Silverlight 5 has been used in applications for the 2010 Olympics, Microsoft, and other enterprises.
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....Aidan Foster
This presentation was originally presented at Drupal Camp Toronto, 2012.
To view the video cast of this presentation visit http://fosterinteractive.com/blog/responsive-design-case-study
-----DESCRIPTION-----
responsivedesign.ca was launched in February of 2012, and it was well received. It was our first mobile-first responsive site. We built it quickly and knew it wasn’t perfect, but the game plan was to launch early and incrementally improve the site over time.
It’s not even a year later we use whole new workflows, creative design methods, modules, and development tools in our responsive websites. This talk will highlight how we created the original project and what we’ve since learned regarding workflow and development including:
Responsive Images Modules
Creative Concept Development
Device vs. Natural Breakpoints
SASS / Compass + Mixins we use
Dealing with IE
Benchmarking
----- Originally Presented at Drupal Camp Toronto 2012 -----
http://2012.drupalcamptoronto.org/sessions/a-responsive-design-case-study-what-we-did-wrong-building-responsivedesignca-and-how-we-fix
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
HTML5 is the next generation web development standard that improves upon HTML4 and XHTML. It focuses on features rather than syntax, and includes new elements like <article> and <section>, native audio/video support, drawing APIs, geolocation, drag and drop, web forms 2.0, and more. HTML5 aims to improve multimedia capabilities while keeping code readable by humans and machines. It is supported by all major browsers, though support for specific features may vary, and polyfills can help with backwards compatibility.
This document provides an agenda and introduction for a training session on HTML5. It discusses HTML5 features like new elements, canvas, SVG, drag and drop, geolocation, video, audio, forms, storage and more. The trainer is Mehdi Jalal from NETLINKS for the Afghanistan Workforce Development Program. Browser support for HTML5 is still evolving as the specification is not fully complete.
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
Want to leverage your creativity, love of board games, and web platform experience to do something different? Turn your imagination into a Print & Play card game using only a modern web browser, color printer and text editor.
This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. Creating a few cards in graphics software like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generating your SVG using JavaScript.
We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and defining content for re-use. Understand how units in the SVG coordinate system can transform our on-screen creation into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their native XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers.
You will leave this session with a basic knowledge of SVG concepts, how to programmatically generate SVG using JavaScript, and how to make your SVG creation printer friendly.
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.
"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.
The document discusses responsive web design and its key elements. It notes that the web is now accessed through various devices like desktops, mobile phones, tablets, TVs and game consoles. Responsive web design adapts websites to different screen sizes and devices by using flexible grids, images and media queries. Some key aspects are using relative units like ems instead of pixels, flexible layouts, images that scale with the page and media queries to apply CSS styles for different devices. The document provides examples and resources for learning more about responsive design.
Responsive Web Design - Web & PHP Conference - 2013-09-18Fré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.
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designFrédéric Harper
This document discusses responsive web design and how websites can adapt to different devices. It notes how people now access the web through desktop browsers, mobile browsers, tablets, TVs, game consoles and more. Responsive web design involves making sites flexible through techniques like flexible grids, flexible images and media, and media queries. Media queries allow stylesheets to be tailored for different device widths. Key aspects of responsive design include considering user needs over our own, adapting to device capabilities, and future-proofing sites. The document provides examples of responsive patterns and techniques.
CSS media queries allow specifying different CSS styles for different screen sizes and devices. They enable responsive web design by loading only valid CSS for a given viewport width. This presentation introduces CSS media queries, their advantages for responsive design, how to use media queries in CSS and HTML, and tips for cross-browser compatibility including a JavaScript workaround for older IE versions. Examples are provided and references listed for further information.
In this session Simon will share his considerable experience of managing projects; from the initial client meetings to getting sign-off on designs to finally going live, and all that comes inbetween.
This document summarizes Jeff Croft's presentation at Web Directions South 2008 about elegant web typography. He discusses common myths about web typography and emphasizes that great typography is important for well-designed sites. Croft also covers techniques for achieving quality typography with CSS, including resetting styles, understanding font sizing with ems, and considering whether to use relative or absolute font sizes. The presentation provides guidance for thoughtfully designing typography at different sizes using a typographer's scale.
In 2006 Simon wrote a successful book about learning CSS. Building the web wasn’t easy back then, but CSS was pretty basic. Simon also used to talk about systems a lot, but didn’t have many answers. Fast-forward to 2014 and everything has changed; that CSS book is both useless and wrong, and systems inform much of what we build. This talk will look at how the landscape changed for front-end designers, and how we must think more holistically about the scope of our projects. With practical examples he’ll explore the tools, methodologies and systems that reenergised him and helped make sense of the whole darned mess.
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.
HTML5 is a new version of HTML that aims to improve the semantic structure and functionality of web pages. It introduces new elements like <header>, <nav>, <article>, and <footer> to better define page sections. While browser support is still evolving, many modern browsers support key HTML5 features. The HTML5 specification is developed by the World Wide Web Consortium to advance web standards.
This document provides an overview of HTML5 and related technologies. It discusses how HTML5 is more than just HTML, and covers the HTML5 specification process and components. It then provides a tour of new HTML5 features like <video>, <audio>, SVG, <canvas>, geolocation, and CSS3 specifications including borders, colors, shadows, backgrounds, fonts, media queries and transforms. The document demonstrates several of these features and provides resources for further information.
The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
This document outlines an agenda for an HTML5 essential training. It covers front-end technologies, HTML basics and evolution, terminology, document structure, common elements, section elements, semantic elements, features beyond basics, and useful resources. The training includes live demos of common elements and <div> usage. It compares using HTML4 divs versus HTML5 semantic elements for page structure.
Initially presented during the Web 2.0 Expo in Berlin, this presentation takes typography beyond the surface layer. Structure, Process, Macro and Micro typography are all covered in detail to help you improve the typographic quality on your site, service or product.
The web standards gentleman: a matter of (evolving) standards)Chris Mills
This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.
Silverlight 5 for Line of Business provides concise summaries of key features in Silverlight 5 including improved threading that offloads GPU animations and network requests to non-UI threads for better performance, expanded text functionality like multi-column text overflow and character spacing controls, and enhanced data binding capabilities such as style data binding, implicit data templates, ancestor binding, and data binding debugging. The document also reviews the history and adoption of Silverlight and provides examples of how Silverlight 5 has been used in applications for the 2010 Olympics, Microsoft, and other enterprises.
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....Aidan Foster
This presentation was originally presented at Drupal Camp Toronto, 2012.
To view the video cast of this presentation visit http://fosterinteractive.com/blog/responsive-design-case-study
-----DESCRIPTION-----
responsivedesign.ca was launched in February of 2012, and it was well received. It was our first mobile-first responsive site. We built it quickly and knew it wasn’t perfect, but the game plan was to launch early and incrementally improve the site over time.
It’s not even a year later we use whole new workflows, creative design methods, modules, and development tools in our responsive websites. This talk will highlight how we created the original project and what we’ve since learned regarding workflow and development including:
Responsive Images Modules
Creative Concept Development
Device vs. Natural Breakpoints
SASS / Compass + Mixins we use
Dealing with IE
Benchmarking
----- Originally Presented at Drupal Camp Toronto 2012 -----
http://2012.drupalcamptoronto.org/sessions/a-responsive-design-case-study-what-we-did-wrong-building-responsivedesignca-and-how-we-fix
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
HTML5 is the next generation web development standard that improves upon HTML4 and XHTML. It focuses on features rather than syntax, and includes new elements like <article> and <section>, native audio/video support, drawing APIs, geolocation, drag and drop, web forms 2.0, and more. HTML5 aims to improve multimedia capabilities while keeping code readable by humans and machines. It is supported by all major browsers, though support for specific features may vary, and polyfills can help with backwards compatibility.
This document provides an agenda and introduction for a training session on HTML5. It discusses HTML5 features like new elements, canvas, SVG, drag and drop, geolocation, video, audio, forms, storage and more. The trainer is Mehdi Jalal from NETLINKS for the Afghanistan Workforce Development Program. Browser support for HTML5 is still evolving as the specification is not fully complete.
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
Want to leverage your creativity, love of board games, and web platform experience to do something different? Turn your imagination into a Print & Play card game using only a modern web browser, color printer and text editor.
This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. Creating a few cards in graphics software like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generating your SVG using JavaScript.
We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and defining content for re-use. Understand how units in the SVG coordinate system can transform our on-screen creation into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their native XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers.
You will leave this session with a basic knowledge of SVG concepts, how to programmatically generate SVG using JavaScript, and how to make your SVG creation printer friendly.
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.
"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.
The document discusses responsive web design and its key elements. It notes that the web is now accessed through various devices like desktops, mobile phones, tablets, TVs and game consoles. Responsive web design adapts websites to different screen sizes and devices by using flexible grids, images and media queries. Some key aspects are using relative units like ems instead of pixels, flexible layouts, images that scale with the page and media queries to apply CSS styles for different devices. The document provides examples and resources for learning more about responsive design.
Responsive Web Design - Web & PHP Conference - 2013-09-18Fré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.
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designFrédéric Harper
This document discusses responsive web design and how websites can adapt to different devices. It notes how people now access the web through desktop browsers, mobile browsers, tablets, TVs, game consoles and more. Responsive web design involves making sites flexible through techniques like flexible grids, flexible images and media, and media queries. Media queries allow stylesheets to be tailored for different device widths. Key aspects of responsive design include considering user needs over our own, adapting to device capabilities, and future-proofing sites. The document provides examples of responsive patterns and techniques.
The document discusses responsive web design and how to implement it in WordPress. It defines the key components of responsive design as flexible grids, flexible images and media, and media queries. It then provides examples and recommendations for how to use flexible grids, flexible images, and media queries to make a WordPress site responsive on different devices.
This document summarizes strategies for making content responsive including pruning content like images and secondary content for mobile using CSS classes. It discusses linking to content instead of showing it all at once using JavaScript or CSS interactions. Lazy loading images with AJAX calls after page load is also covered to improve performance. The document emphasizes testing content strategies based on device capabilities and making sites functional even without full media query support.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
This document provides an overview of HTML5 best practices for mobile design. It begins with introductions and outlines the session agenda. The presenter then discusses high-level principles like universal design and progressive enhancement. Specific techniques covered include viewport meta tags, media queries, scalable images, HTML5 tags, and touch-friendly guidelines. CSS topics include grids, backgrounds, gradients, and transitions. JavaScript behaviors like navigation, forms, and geolocation are also reviewed. Useful frameworks, polyfills, and testing tools are presented. The overall message is that mobile design requires an adaptive, user-centered approach through careful content structuring, responsive presentation, and unobtrusive behavior.
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.
This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.
The document discusses principles of responsive and adaptive web design. It covers topics like flexible layouts, images and media, media queries, breakpoints, grids, and frameworks like Bootstrap. Flexible layouts using percentages allow content to scale and reorganize across devices. Images and media should resize proportionally. Media queries apply different CSS styles based on screen width conditions. The grid helps layout content consistently. Frameworks like Bootstrap provide tools to build responsive sites more easily. The goal is to design sites that adapt to various contexts like device type or width.
The Omega Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme that uses built-in media queries to make the site responsive. Each zone (group of regions) can be configured for content first layouts, that resize and rearrange themselves depending on the screen size of the user's device.
The presentation will walk-through the theory behind Omega's mobile-first approach, how to use the many configuration options on the theme settings page, pitfalls to avoid, and what's on the forecast for Omega 4.x!
Additional Resources:
bit.ly/omega-tips
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.
The document summarizes a presentation about using Adobe Fireworks for designing HTML and CSS websites. It discusses how Fireworks is ideal for web design as it integrates well with other Adobe applications. It also explores how Fireworks allows for rapid prototyping through features like slicing images and exporting code. The presentation emphasizes writing code by hand and using frameworks like the 960 grid system to help maintain consistency and improve efficiency.
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 Web Design - Devoxx UK - 2014-06-13Fré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 & Responsible: Implementing Responsive Design at Scalescottjehl
Scott Jehl of Filament Group discussed building responsive and responsible websites. He advocated for a layered approach using progressive enhancement. This involves a basic mobile-first experience enhanced for newer browsers. Images and layout adapt to different screensizes using responsive design principles. Accessibility, performance, and usability were highlighted as key areas of responsibility.
This document contains a list of 50 types of slides that can be used in presentations. It includes common chart types like bar charts and pie charts. It also lists types of slides for photos, infographics, text, important slides, figures, and more. The list was sourced from slideshare.net, a website where presentations can be uploaded and shared.
The document appears to list types of slides that can be used in presentations. It includes 50 types of slides organized under categories like CHARTS, PHOTO, INFOGRAPHICS, TEXT, IMPORTANT SLIDES, FIGURES. Common slide types listed include title slides, section slides, bar charts, photos, mind maps, and call to action slides. The source of the slides types is listed as slideshare.net.
The document lists 50 types of slides that can be used in presentations. It includes different types of charts, photos, infographics, text elements, important slides like title slides, figures, and other visual elements. The list provides high-level categories of visual elements that can be incorporated into presentations.
This document lists 50 different types of slides that can be used in presentations. Some of the highlighted slide types include charts (bar charts, histograms, scatter charts), photos (printscreen, photo of human and text, animals), infographics (visual metaphors, word clouds, timelines), text-based slides (quotes, lists, questions), and important structural slides (title slides, section slides, last slides). The document provides a high-level overview of different visual elements that can be incorporated into presentations.
The document lists 50 different types of slides that can be used in presentations. It includes charts, photos, infographics, text elements, important structural slides, figures, and other visual elements like timelines, processes, and coordinate systems. The source of the slides types is listed as slideshare.net.
This document contains a list of 50 different types of slides that can be used in presentations. It includes common chart types like bar charts and pie charts. It also lists other visual elements such as photos, infographics, mind maps, and timelines. The document categorizes the slides into sections like charts, photos, infographics, text, important slides, and figures. It indicates that the source of this list of slide types is slideshare.net.
This document lists 50 different types of slides that can be used in presentations. It includes various chart types like bar charts and histograms. It also includes slides with photos, infographics, different text elements, important slides like titles, sections and questions. The source of this list of slide types is cited as slideshare.net.
This document lists 50 different types of slides that can be used in presentations. It includes common chart types like bar charts and pie charts. It also includes slides for photos, infographics, text elements, important concepts, intro/outro slides, and more. The document provides a high-level overview of different slide options without descriptions of each type. It directs the reader to slideshare.net as the source for more information on the various slide types.
This document lists 50 different types of slides that can be used in presentations. It includes common chart types like bar charts and pie charts. It also includes slides with photos, infographics, text elements, important slides like title slides and thank you slides. The source of the slides types is listed as slideshare.net.
This document lists 50 different types of slides that can be used in presentations. It categorizes the slides into charts, photos, infographics, text, important slides, and figures. Some of the slide types included are bar charts, histograms, pie charts, photos of humans and text, word clouds, titles slides, questions slides, and call to action slides. The document notes that the source of the slides types is slideshare.net.
This document contains a list of 50 types of slides that can be used in presentations. It includes different types of charts, photos, infographics, text elements, and other slides often used at important points in presentations like title slides, section slides, and last slides. The list contains items like bar charts, histograms, pie charts, photos, logos, icons, infographics, word clouds, timelines, and more. It does not provide any descriptions or details about the slides, only their type names.
The document lists 50 different types of slides that can be used in presentations. These include common chart types like bar charts and pie charts. It also includes slides with photos, infographics, text elements, important elements like titles and sections, and concluding slide types. The source of the slide types is listed as slideshare.net, a website where presentation slides can be shared.
This document lists 50 different types of slides that can be used in presentations. It includes common chart types like bar charts and pie charts. It also includes slides with photos, infographics, text elements, figures, and important slides like title slides and last slides. The source of this list of slide types is cited as slideshare.net.
The document lists 50 different types of slides that can be used in presentations. It includes charts, photos, infographics, text-based slides, important slides like titles and conclusions, figures, and more. The types of slides are organized into categories like charts, photos, info graphics, text, important slides, and figures. The source of the slides types is listed as slideshare.net.
The document lists 50 types of slides commonly used in presentations. These include various charts like bar charts, histograms and pie charts. It also includes photos, infographics, different text elements, important slides like title slides and last slides, figures, and time-based elements like timelines and processes. The source of this list of slide types is cited as slideshare.net.
This document lists 50 different types of slides that can be used in presentations. It includes common chart types like bar charts and pie charts. It also includes slides with photos, infographics, text elements, important elements like titles, sections and questions. The document provides a comprehensive list of slide types to consider when creating a presentation.
This document lists 50 different types of slides that can be used in presentations. It includes common chart types like bar charts and histograms. It also includes slides with photos, infographics, text elements, important concepts, figures, titles, and closing slides. The source of the slide types is listed as slideshare.net, which is a website where people share and discover presentation slides.
This document lists 50 different types of slides that can be used in presentations:
- It categorizes the slides into charts, photos, infographics, text, important slides, and figures.
- Some examples of slide types included are bar charts, histograms, pie charts, photos of humans/animals, word clouds, timelines, titles slides, and call to action slides.
- The source of the slide types is listed as slideshare.net, an online platform for sharing presentations.
This document lists 50 different types of slides that can be used in presentations, grouped into categories such as charts, photos, infographics, text, important slides, and figures. The slides include options like bar charts, histograms, pie charts, photos, mind maps, timelines, call to action slides, and title slides. The document notes that the source of the slides types is the website slideshare.net.
This document lists 50 different types of slides that can be used in presentations. It groups the slides into several categories including charts, photos, infographics, text, important slides, figures. The slides range from basic elements like titles, sections and questions to more advanced elements like mind maps, processes, comparisons and timelines. The source of the slides types is listed as slideshare.net.
ARENA - Young adults in the workplace (Knight Moves).pdfKnight Moves
Presentations of Bavo Raeymaekers (Project lead youth unemployment at the City of Antwerp), Suzan Martens (Service designer at Knight Moves) and Adriaan De Keersmaeker (Community manager at Talk to C)
during the 'Arena • Young adults in the workplace' conference hosted by Knight Moves.
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
Architectural and constructions management experience since 2003 including 18 years located in UAE.
Coordinate and oversee all technical activities relating to architectural and construction projects,
including directing the design team, reviewing drafts and computer models, and approving design
changes.
Organize and typically develop, and review building plans, ensuring that a project meets all safety and
environmental standards.
Prepare feasibility studies, construction contracts, and tender documents with specifications and
tender analyses.
Consulting with clients, work on formulating equipment and labor cost estimates, ensuring a project
meets environmental, safety, structural, zoning, and aesthetic standards.
Monitoring the progress of a project to assess whether or not it is in compliance with building plans
and project deadlines.
Attention to detail, exceptional time management, and strong problem-solving and communication
skills are required for this role.
8. The dangerous thing is not that
machines might start thinking like
humans, but that humans might start
thinking like machines.
— Sydney J. Harris
“
When Sydney J. Harris said that, he meant
human society and our understanding of
computers. But it can relate to what we do as
we'll. When we think about the Web, what do
9. We are blinded by chrome. When it
comes to RWD, we think about layouts,
and often we should, but we have to
keep in mind that we are not rectangle
artists. we explore solutions to
problems. Browsers think in boxes, but
humans shouldn't.
10. Wir denken dass das Web so aussieht.
Als Designer sehen wir uns oft als Pixel-Pusher
oder Rectangle Zeichner. So sieht das Web aber
nicht aus
When it comes to responsive design, we think
about layouts, and sometimes we should, but we
have to keep in mind that we aren’t rectangle
artists. We explore solutions to problems.
11. A fluid, unpredictable, chaotic,
interconnected environment
with plenty of right and wrong
solutions. I always feel weird
about blog posts on why RWD is
a wrong technique, or HTML5/
native is a wrong solution. The
Web isn’t black and white, it’s
rich, extremely diverse and it
requires pragmatic thinking.
15. “
Media queries can be used to do
more than patch broken layouts:
with proper planning, we can
begin to choreograph content
proportional to screen size,
serving the best possible
experience at any width.
— Trent Walton
16.
17.
18. Content Choreography
• From the technical standpoint, arrangement
of boxes is often implemented using Flexbox.
@media screen and
(max-width: 33.236em) {
#main { display: flex; }
#main > nav,
#main > aside { flex: 1; }
#main > article { flex: 2; }
#main > nav { order: 0; }
#main > article { order: 1; }
#main > aside { order: 2; }
19.
20. We can manipulate
experiences to make
them genuine across
different viewports —
be it desktop, mobile or
anything else.
29. Resolution Independence
• High pixel density displays prompt us to
create future-proof solutions for graphics.
• Creating multiple assets for the same
graphics (not photos) isn’t future-proof.
• Two options: SVG and Icon Fonts.
32. Resolution Independence (SVG)
• SVG files are usually larger and browsers
need more time to rasterize and display them.
• Good SVG support: Chrome 4+, Safari 4+,
FF4+, Opera 9.5+, IE9+, mobile browsers.
• For legacy browsers (and Android 2.3)
we need PNG-fallback with Conditional
Comments (IE<9) or Modernizr.
35. Resolution Independence
(Web Fonts)
• There are many comprehensive Web fonts:
Entypo and FontAwesome are free.
• Excellent support: everywhere but Opera
Mini and Android 2.1.
• Build custom, small “bundles” with Fontello
(combines popular open-source fonts).
38. Compressive Images
• To display photos properly on high pixel
density displays, we don’t need hi-res images.
• If a JPG image has relatively small dimensions,
we can use a workaround to keep its size small.
• Solution: given a “normal” image resolution,
double it and use minimal JPEG compression.
39. “
...Given two identical images that
are displayed at the same size on a
website, one can be dramatically
smaller than the other in file size
if it’s highly compressed and
dramatically larger in dimensions
than it is displayed.
— Daan Jobsis
46. “
If you [...] had to choose between
employing media queries to make
the design look good on a mobile
device or optimizing the site for
performance, you would be better
served by making the desktop site
blazingly fast.
— Jason Grigsby
47. Conditional CSS
• We ask browsers to load assets progressively —
and only when they can be displayed.
• Idea: if a CSS media query was fired, catch it
with JavaScript and load additional assets.
• CSS:
@media all and (min-width: 45em) {
body:after {
content: 'desktop';
display: none;
}
}
48. Conditional CSS
• JS:
var size =
window.getComputedStyle(document.body,':after').get
PropertyValue('content');
if (size == 'desktop') {
// Load some more content.
}
• CSS:
@media all and (min-width: 45em) {
body:after {
content: 'desktop';
display: none;
}
}
55. Gmail’s Lazy Loading
• Latency is the time between when a browser
requests a resource from a server and when it
starts to receive the server’s response.
• On mobile, latency is a major UX killer. For a
1Mb page with 85 requests per page, it is 4.5s!
• JavaScript is expensive; parsing takes time and
blocks the rendering of the page. Usually you
don’t need all JavaScript right away.
56. Gmail’s Lazy Loading
• Idea: let browsers download all of the JS right
away, but evaluate it “on demand”, i.e. when
users need a particular feature.
• Much of the downloaded JS is commented out,
and when needed uncommented and eval-ed.
• Gmail’s case:
200 Kb of JS -> 2600 ms page load
200 Kb of JS (lazy loaded) -> 240 ms page load
57. Gmail’s Lazy Loading
• <script id="lazy">
// Make sure you strip out (or replace) comment
blocks in your JavaScript first.
/* JavaScript of lazy module */
</script>
<script>
function lazyLoad() {
var lazyElement = document.getElementById('lazy');
var lazyElementBody = lazyElement.innerHTML;
var jsCode = stripOutCommentBlock(lazyElementBody);
eval(jsCode); }
</script>
<div onclick=lazyLoad()>Lazy Load</div>
58.
59. The Two-Click Social Widget
• Load social widgets only when user explicitly
chooses to take that action to share content.
• Idea: load small social icons by default, and
load the FB, Twitter and G+ widgets on click.
• Cuts down on bandwidth and on latency.
(FB button alone weighs 120 Kb + 4 requests).
63. Protecting Image Aspect Ratios
• When max-width: 100%; is applied to an
image with width and height attributes
defined in HTML, image rescales incorrectly.
• Solution: add height: auto; for images to
which max-width: 100% is applied.
• CSS:
img, video { max-width: 100%; height: auto; }
64. Intrinsic Ratio For Videos
• To ensure the intrinsic 4:3 or 16:9 ratios for
videos, we create a box with the proper ratio,
then stretch the video inside to fit the
dimensions of the box.
• HTML:
<div class="wrapper-with-intrinsic-ratio">
<div class="element-to-stretch"></div>
</div>
69. Responsive Videos
• We can serve different video files to different
devices by using media attribute on the
video <source> attribute.
• Supported in the latest versions of Chrome,
Opera, Safari, FF 15+, IE9+, mobile browsers.
70. Responsive Videos
• HTML:
<video controls preload="none">
<source type="video/mp4" src="video_small.mp4"
media="all and (max-width: 480px),
all and (max-device-width: 480px)">
<source type="video/webm" src="video_small.webm"
media="all and (max-width: 480px),
all and (max-device-width: 480px)">
<source type="video/mp4" src="video.mp4">
<source type="video/webm" src="video.webm">
<!-- proper fallback content goes here -->
</video>
72. Vertical Media Queries
• min-height and max-height are useful for
adjusting the font-size, padding, margin and
cropping images.
• Beware of h/v-media queries collisions when
resizing the browser. Things might easily
get out of control.
73.
74.
75. Media Queries Splitting
• In development, we can use a breakpoint-
based organization for CSS (“min-width”):
0-up.css, 450-up.css, 720-up.css etc.
• We can also set breakpoints 1px apart and
split styles instead of overriding from one
media query to the next (“min/max-width”):
base.css, 0-449.css, 450-719.css etc.
76. Media Queries Splitting
• In practice, it’s often a good starting point to
work with em media queries right away.
0-up.css, 25em-up.css, 35em-up.css etc.
• If it’s not an option, it’s a good idea to convert
px to em for production code to improve
maintenance and avoid zooming issues.
80. “
Designing for the Web is like
visualizing a tesseract. We build
experiences by manipulating their
shadows.
— Tim Brown
81. Debugging Media Queries
• Due to lack of convenient tools, debugging
RWD often feels like groping in the dark.
There are some popular techniques though.
• Setting the body bg color to different colors for
each breakpoint. Also box-sizing: border-box.
• The * technique for testing for optimal
measure in the browser.
82.
83.
84.
85. People like to test a number
of metrics to see why people
are not * staying on a site. I
think sometimes we spend
so much time focusin* g on
analytics that we have no...
*
*
86. People like to test a number
of metrics to see why people
are not * staying on a site. I
think sometimes we spend
so much time focusin* g on
analytics that we have no...
*
*
100. If we could adequately typeset an article and
thus establish the general context of the
design, everything else would follow. [...]
The key attribute for achieving perfect
typesetting was perfect measure: a good
average between 45 and 90 characters per
line—on all screen resolutions.
— Elliot Jay Stocks, “Smashing Book 3”
“
101. So we started looking for typefaces that would best express our
new vision, values and our deisgn persona...and oh boy were we
excited. We felt like a kid in a candy store... until we had to be
thrown into cold shower.
With the abundance of rich typefaces on the Web, we excitedly
jumped into the myriad of possibilities. We experimented with
literally dozens of typefaces from several type foundries in various
pairings: we considered Centro Sans and Centro Serif, Meta and
Meta Serif, Adelle, Ronnia, LFT Etica, FF Tisa, just to name a few.
We observed how they looked at different font sizes and how well
they worked together. We examined how well they appeared in bold
and italic and in headings and body copy, as well as how they worked
in less obvious contexts such as image captions.
102.
103. Typefaces should be optimized for
long reading on (many) screens and
fit various contexts.
104.
105.
106.
107. We started out with setting up a couple of demo pages for
typography, including links, italics, bold.
With all design distractions removed, we could pay a great
deal of technical attention to the type once we set up our
basic styles. How legible is this typeface at a particular size?
How well does it perform on Windows? Is there a superior
version from an alternative font delivery network that
perhaps uses PostScript outlines for display sizes?
Focusing on these fine details is much easier when you’re
looking purely at the type and nothing else.
Because there’s a lot going on visually on Smashing
Magazine—screenshots, buttons and noisy ads—a sans-serif
felt like a more sensible, uncluttered route for body copy. In
fact, it was difficult to imagine a serif typeface being used for
code-heavy articles in the coding section.
108. Sorry, Proxima Nova rendering is
incorrect on this screenshot, but we
lost the original files. :-)
109.
110.
111.
112.
113.
114.
115.
116.
117. We started from mobile, and worked
our way upwards to desktop views.
118.
119.
120. Navigation changes: we
used two markups: one
with select, another
with a nested unordered
list. and switches them
on and off with CSS.
The keywords were carefully
chosen and tested.
We kned that it would take too
much space, but we decided to test
it and it performed fairly well.
We’ve developed a toggle menu here
as well, it is currently in the queue
for testing. We had drop-down...
initially here...
121.
122.
123.
124.
125. We never targeted specific devices—
and introduced media queries
whenever it felt natural to do so.
131. Responsive Design Patterns
• Responsive design affects all design assets:
layout, images, type, navigation, tables,
calendars, galleries, forms, maps, ads...
• Offline access and mobile UX enhancements
complement RWD very well (e.g. HTML5
localStorage, GeoLocation, Telephone links).
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143. Responsive Design Patterns
• Media queries aren’t supported in Android
2.1 native client, Gmail app on all platforms,
Win Mobile 6.1 & Phone 7, BlackBerry OS 5.
• Also, Webmail services tend to ignore media
queries and overwrite them with their custom
CSS code.
157. Image credits
• Front cover: Geometric Wallpapers
by Simon C Page (http://simoncpage.co.uk/
blog/2012/03/ipad-hd-retina-wallpaper/)
• Homer Simpsons: http://smashed.by/homer,
http://smashed.by/crazy-homer