The document provides an agenda and materials for a responsive web development workshop. The 3 hour workshop will cover topics like responsive web design, media queries, CSS preprocessors, grids, and developing for devices and older browsers. It includes 105 slides and exercises for attendees to complete as they learn. The workshop will be led by Amelia Schmidt, a lead front-end developer, and aims to be interactive with questions encouraged. Attendees are provided a list of software they should have installed like Sublime Text, Xcode, Git, and virtual machines for testing across platforms.
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today. The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface. In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way. CSS Grid is here, and you can start using it today. This talk shows you how to do it right.
This document discusses building custom blocks for WordPress and provides an overview of the process. It recommends that blocks be built as plugins and be self-contained components. It outlines the typical development and production setup, with source code in one directory and built files like minified scripts and stylesheets in another. The key steps are to make a plugin, set up the build process, build the block, and then use the block. Links to additional resources on the block editor and examples are also provided.
The web has evolved, and now it’s time our themes do the same. WP Rig is an evolution on the tried and true starter theme model: a modern build process and WordPress starter theme bundled together, created to simplify the process of building advanced, accessible, performant, progressive themes. WP Rig does the heavy lifting of optimization so developers can focus on what they do best: designing and building great user experiences. In this talk you’ll learn how to supercharge your theme development process with WP Rig.
Angels versus demons: balancing shiny and inclusiveChris Mills
The modern web developer faces a moral choice when creating sites and apps. The angel on your shoulder tells you to use standards and respect accessibility across users of AT, older browsers, mobile, etc. The devil on your other shoulder meanwhile tells you to use all the shiny, satisfy your ego, and leave user agents over two weeks old in the dust.
This talk walks you through the dilemma, looking at the perils of embracing the serpent and presenting solutions that will allow you to achieve a satisfactory compromise. We know the devil has all the good albums, and we want to rock out as much as you do! But not at the expense of the Web’s greatest strengths!
This document contains the transcript of a presentation by Chris Heilmann on web development. Some of the key points discussed include:
- The benefits of progressive enhancement and using HTML, CSS, and JavaScript together to build robust and accessible websites.
- How limitations in early design can foster creativity.
- The importance of error handling and defensive coding practices.
- Embracing new technologies like Service Workers and Manifests to build Progressive Web Apps.
- Rethinking the idea that JavaScript is unreliable and should not be depended on, as modern browsers have made it a capable tool.
The document provides five ways for JavaScript developers to be happier:
1) Concentrate on the present and focus on creating rather than worrying about the past or future.
2) Limit distractions by streamlining your development environment and using an editor like VS Code that consolidates features.
3) Make mistakes less likely by using linters to catch errors as you code.
4) Get to know your tools better like debuggers to avoid console.log and gain insights to build better solutions.
5) Give back to others in the community by being helpful rather than causing drama.
This document discusses various web development tools for debugging and inspecting code, including FireBug, Opera Dragonfly, IE Developer Tools, and Webkit Developer Tools. It also provides tips on using breakpoints to debug JavaScript code and references browser-specific developer tools guides. Several real-world web applications are listed as examples of AJAX and HTML5 implementations. HTML Tidy is introduced as a tool for cleaning up and fixing errors in HTML markup.
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today. The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface. In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way. CSS Grid is here, and you can start using it today. This talk shows you how to do it right.
This document discusses building custom blocks for WordPress and provides an overview of the process. It recommends that blocks be built as plugins and be self-contained components. It outlines the typical development and production setup, with source code in one directory and built files like minified scripts and stylesheets in another. The key steps are to make a plugin, set up the build process, build the block, and then use the block. Links to additional resources on the block editor and examples are also provided.
The web has evolved, and now it’s time our themes do the same. WP Rig is an evolution on the tried and true starter theme model: a modern build process and WordPress starter theme bundled together, created to simplify the process of building advanced, accessible, performant, progressive themes. WP Rig does the heavy lifting of optimization so developers can focus on what they do best: designing and building great user experiences. In this talk you’ll learn how to supercharge your theme development process with WP Rig.
Angels versus demons: balancing shiny and inclusiveChris Mills
The modern web developer faces a moral choice when creating sites and apps. The angel on your shoulder tells you to use standards and respect accessibility across users of AT, older browsers, mobile, etc. The devil on your other shoulder meanwhile tells you to use all the shiny, satisfy your ego, and leave user agents over two weeks old in the dust.
This talk walks you through the dilemma, looking at the perils of embracing the serpent and presenting solutions that will allow you to achieve a satisfactory compromise. We know the devil has all the good albums, and we want to rock out as much as you do! But not at the expense of the Web’s greatest strengths!
This document contains the transcript of a presentation by Chris Heilmann on web development. Some of the key points discussed include:
- The benefits of progressive enhancement and using HTML, CSS, and JavaScript together to build robust and accessible websites.
- How limitations in early design can foster creativity.
- The importance of error handling and defensive coding practices.
- Embracing new technologies like Service Workers and Manifests to build Progressive Web Apps.
- Rethinking the idea that JavaScript is unreliable and should not be depended on, as modern browsers have made it a capable tool.
The document provides five ways for JavaScript developers to be happier:
1) Concentrate on the present and focus on creating rather than worrying about the past or future.
2) Limit distractions by streamlining your development environment and using an editor like VS Code that consolidates features.
3) Make mistakes less likely by using linters to catch errors as you code.
4) Get to know your tools better like debuggers to avoid console.log and gain insights to build better solutions.
5) Give back to others in the community by being helpful rather than causing drama.
This document discusses various web development tools for debugging and inspecting code, including FireBug, Opera Dragonfly, IE Developer Tools, and Webkit Developer Tools. It also provides tips on using breakpoints to debug JavaScript code and references browser-specific developer tools guides. Several real-world web applications are listed as examples of AJAX and HTML5 implementations. HTML Tidy is introduced as a tool for cleaning up and fixing errors in HTML markup.
1. The document discusses using CSS to create visual elements like shapes, logos, and icons instead of images for performance, maintainability, and resolution independence reasons.
2. It provides examples of how to create basic shapes like rectangles, circles, and triangles using CSS properties like border-radius, gradients, and positioning.
3. The document also covers techniques for generating HTML elements, using pseudo-elements, and manipulating elements with transforms to create effects like masks and shadows.
The document discusses web standards and protocols as well as tips for good website design. It provides lists of "dos" and "don'ts" for website design. The "dos" include testing pages in multiple browsers, keeping layouts simple, writing clearly and concisely, and providing alternatives to images. The "don'ts" include linking to irrelevant material, overusing emphasis, and splitting topics across multiple pages.
This document provides steps for saving a glog, which involves double clicking a text box, highlighting a word, clicking double circles to add a web link, previewing the glog, naming the glog, and clicking save if it looks correct.
This document outlines an agenda for an introductory Javascript workshop. The workshop will be led by Andy Amaya and TAs from Thinkful, and will introduce key Javascript concepts over 2 hours. Attendees will learn about variables, functions, if/else statements, and comparing values. They will practice these concepts through assignments and examples on JSBin and Repl.it with support from instructors. The document also provides background on Javascript and Thinkful's program for becoming a developer through mentorship and flexible online learning.
[DevDay2018] Javascript on the Rise - By Trang Tran, Co-founder & Manager at ...DevDay Da Nang
There was a time when the word JavaScript reminded developers about form validations or adding animation in web pages. However through time, Javascript has grown to be one of the most popular languages in the development world with its implementation usage in back-end and front-end development. With the rise of Javascript front-end frameworks such as AngularJS, React JS or VueJS, as well as the invention of cross-platform mobile development frameworks such as React Native, Native Script, Javascript once again has proved its popularity and ability to become the most powerful language that truly breaks the platform barrier and allows developers to solve problems in various platforms.
This document discusses the differences between CSS and JavaScript and when each is most appropriate to use. It argues that CSS is often underestimated in favor of JavaScript solutions. CSS has advanced significantly with features like calc(), media queries, animations/transitions, flexbox, grid, variables and more. These powerful features allow many tasks to be accomplished with CSS alone without needing JavaScript. The document encourages embracing the "squishiness" of the web and considering CSS more when building interfaces.
Over the past several years, as the role of the browser has grown, rich desktop-like apps have emerged built entirely in the browser. To enable this movement, a new generation of powerful JavaScript frameworks have emerged including EmberJS, AngularJS, BackboneJS, and React. In this 30 minute crash course on front end frameworks, Bloc co-founder and CTO Dave Paola will cover the history of front end web development, the recent emergence of these new Javascript frameworks, and go over some of the pros and cons for learning them.
We'll hear from Bloc co-founder and CTO Dave Paola and Bloc Developer Christian Schlensker. Prior to Bloc, Dave was a developer at Kontagent, has over 15 years of software development experience, and has founded numerous other companies. Christian comes to Bloc from Pinchit and TAG where he was a developer. Prior to that, Christian was also a graphic designer.
In our experience, beginners are often overwhelmed by buzz words like "HTML5," "JavaScript," and "Ruby." Without an experienced guide, they can spend months going down rabbit-holes drilling into specific languages, and emerge frustrated that they can't build a real website. Dave will start by helping you visualize the front end web development landscape.
Comparing Angular, Ember, Backbone, and React
2
Once you understand the landscape, Dave will introduce the four major front end frameworks that have emerged over the past two years. He'll discuss the pros and cons of learning each one, from the point of view of a beginner. These four frameworks are: AngularJS, EmberJS, BackboneJS, and ReactJS.
This document discusses the importance of having an online presence and managing your personal brand on the web. It provides tips for establishing profiles on key social media platforms like LinkedIn, Facebook, and Twitter to showcase your work and expertise. The document also reviews options for creating your own website using blogging platforms like WordPress or coding HTML yourself, and considerations for designing and hosting the site.
Building Responsive Websites and Apps with DrupalFour Kitchens
This document discusses building responsive websites and apps with Drupal. It begins by explaining what responsive design is and how it allows websites to adapt to different screen sizes through CSS media queries and flexible grids. It advocates using a mobile-first approach where the mobile version is the baseline and enhanced for larger screens. Key aspects covered include responsive images, the Modernizr module, feature detection libraries, and front-end performance optimization.
This document provides an overview of responsive web design concepts including layouts, units like REM and EM, media queries, viewports, and grids. It discusses static, liquid, adaptive and responsive layouts. REM units are described as root EM units. Media queries are introduced as a way to apply different styles based on screen width. Viewport meta tags are covered to enable responsive scaling. Grid systems using floats or frameworks like Bootstrap are also summarized.
Talk held on a Smashing Magazine Meetup February, 27th 2012 in Frankfurt (Germany) about current problems with developers, designers and clients in front-end development
This document discusses responsive web design (RWD). RWD allows websites to automatically adjust their layout depending on the user's screen size using media queries. It is important for accessibility and usability as most internet users now access the web on mobile devices. The document recommends using a mobile-first and progressive enhancement approach where basic content and functionality work on all browsers and advanced features are progressively added. It provides examples of RWD techniques and tools to test responsive designs.
Responsive Web Designed for your communication and marketing needsSEGIC
This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
This document provides an overview of responsive web design and coding basics for designers. It discusses how print design constraints differ from web, and how responsive design addresses changing screen sizes using fluid grids, media queries, and relative units. It introduces HTML, CSS, and JavaScript, explaining how they work together, and provides examples of common HTML elements and CSS selectors. Key concepts covered include inheritance, specificity, and the cascading nature of CSS.
This document discusses responsive design and how it can be implemented in TYPO3. It defines responsive design as using fluid grids that resize based on browser width rather than fixed width layouts. It recommends using flexible layouts, images, and media queries to build responsive sites. Popular frameworks like Bootstrap and Foundation are introduced to help with responsive design. The document provides examples and resources for creating responsive sites that adapt to different screen sizes.
Cascading Style Sheets (CSS) is a language for styling web pages that allows control over color, layout, and fonts. CSS saves time by reusing style sheets across pages and improves page loading speeds. Styles can be easily maintained and updated globally. CSS offers selectors for styling elements, classes, IDs, and combinations. Pseudo-classes and pseudo-elements allow additional styling options. Media queries allow custom styling for different screen sizes.
Inclusive design: real accessibility for everyoneChris Mills
Chris Mills gives a presentation on inclusive design and accessibility. He defines inclusive design as considering all users, including those with disabilities, using mobile devices, or with low bandwidth. He outlines 10 principles of inclusive design such as being equitable, flexible, simple and intuitive. He provides examples of how to implement these principles through techniques like adaptive layouts, alternative text, and consistent navigation. The overall message is that inclusive design benefits all users and is just good design.
Turku loves-storybook-styleguidist-styled-componentsJames Stone
The document discusses different tools for building design systems in React, including Storybook, Styleguidist, and Styled Components. It explains that Storybook is focused on component development and testing ("the workshop"), while Styleguidist generates documentation and is meant to share the design system externally ("the storefront"). Styled Components is presented as a good option for managing CSS in React projects. Examples are provided for each tool to illustrate how they can be used.
1. The document discusses using CSS to create visual elements like shapes, logos, and icons instead of images for performance, maintainability, and resolution independence reasons.
2. It provides examples of how to create basic shapes like rectangles, circles, and triangles using CSS properties like border-radius, gradients, and positioning.
3. The document also covers techniques for generating HTML elements, using pseudo-elements, and manipulating elements with transforms to create effects like masks and shadows.
The document discusses web standards and protocols as well as tips for good website design. It provides lists of "dos" and "don'ts" for website design. The "dos" include testing pages in multiple browsers, keeping layouts simple, writing clearly and concisely, and providing alternatives to images. The "don'ts" include linking to irrelevant material, overusing emphasis, and splitting topics across multiple pages.
This document provides steps for saving a glog, which involves double clicking a text box, highlighting a word, clicking double circles to add a web link, previewing the glog, naming the glog, and clicking save if it looks correct.
This document outlines an agenda for an introductory Javascript workshop. The workshop will be led by Andy Amaya and TAs from Thinkful, and will introduce key Javascript concepts over 2 hours. Attendees will learn about variables, functions, if/else statements, and comparing values. They will practice these concepts through assignments and examples on JSBin and Repl.it with support from instructors. The document also provides background on Javascript and Thinkful's program for becoming a developer through mentorship and flexible online learning.
[DevDay2018] Javascript on the Rise - By Trang Tran, Co-founder & Manager at ...DevDay Da Nang
There was a time when the word JavaScript reminded developers about form validations or adding animation in web pages. However through time, Javascript has grown to be one of the most popular languages in the development world with its implementation usage in back-end and front-end development. With the rise of Javascript front-end frameworks such as AngularJS, React JS or VueJS, as well as the invention of cross-platform mobile development frameworks such as React Native, Native Script, Javascript once again has proved its popularity and ability to become the most powerful language that truly breaks the platform barrier and allows developers to solve problems in various platforms.
This document discusses the differences between CSS and JavaScript and when each is most appropriate to use. It argues that CSS is often underestimated in favor of JavaScript solutions. CSS has advanced significantly with features like calc(), media queries, animations/transitions, flexbox, grid, variables and more. These powerful features allow many tasks to be accomplished with CSS alone without needing JavaScript. The document encourages embracing the "squishiness" of the web and considering CSS more when building interfaces.
Over the past several years, as the role of the browser has grown, rich desktop-like apps have emerged built entirely in the browser. To enable this movement, a new generation of powerful JavaScript frameworks have emerged including EmberJS, AngularJS, BackboneJS, and React. In this 30 minute crash course on front end frameworks, Bloc co-founder and CTO Dave Paola will cover the history of front end web development, the recent emergence of these new Javascript frameworks, and go over some of the pros and cons for learning them.
We'll hear from Bloc co-founder and CTO Dave Paola and Bloc Developer Christian Schlensker. Prior to Bloc, Dave was a developer at Kontagent, has over 15 years of software development experience, and has founded numerous other companies. Christian comes to Bloc from Pinchit and TAG where he was a developer. Prior to that, Christian was also a graphic designer.
In our experience, beginners are often overwhelmed by buzz words like "HTML5," "JavaScript," and "Ruby." Without an experienced guide, they can spend months going down rabbit-holes drilling into specific languages, and emerge frustrated that they can't build a real website. Dave will start by helping you visualize the front end web development landscape.
Comparing Angular, Ember, Backbone, and React
2
Once you understand the landscape, Dave will introduce the four major front end frameworks that have emerged over the past two years. He'll discuss the pros and cons of learning each one, from the point of view of a beginner. These four frameworks are: AngularJS, EmberJS, BackboneJS, and ReactJS.
This document discusses the importance of having an online presence and managing your personal brand on the web. It provides tips for establishing profiles on key social media platforms like LinkedIn, Facebook, and Twitter to showcase your work and expertise. The document also reviews options for creating your own website using blogging platforms like WordPress or coding HTML yourself, and considerations for designing and hosting the site.
Building Responsive Websites and Apps with DrupalFour Kitchens
This document discusses building responsive websites and apps with Drupal. It begins by explaining what responsive design is and how it allows websites to adapt to different screen sizes through CSS media queries and flexible grids. It advocates using a mobile-first approach where the mobile version is the baseline and enhanced for larger screens. Key aspects covered include responsive images, the Modernizr module, feature detection libraries, and front-end performance optimization.
This document provides an overview of responsive web design concepts including layouts, units like REM and EM, media queries, viewports, and grids. It discusses static, liquid, adaptive and responsive layouts. REM units are described as root EM units. Media queries are introduced as a way to apply different styles based on screen width. Viewport meta tags are covered to enable responsive scaling. Grid systems using floats or frameworks like Bootstrap are also summarized.
Talk held on a Smashing Magazine Meetup February, 27th 2012 in Frankfurt (Germany) about current problems with developers, designers and clients in front-end development
This document discusses responsive web design (RWD). RWD allows websites to automatically adjust their layout depending on the user's screen size using media queries. It is important for accessibility and usability as most internet users now access the web on mobile devices. The document recommends using a mobile-first and progressive enhancement approach where basic content and functionality work on all browsers and advanced features are progressively added. It provides examples of RWD techniques and tools to test responsive designs.
Responsive Web Designed for your communication and marketing needsSEGIC
This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
This document provides an overview of responsive web design and coding basics for designers. It discusses how print design constraints differ from web, and how responsive design addresses changing screen sizes using fluid grids, media queries, and relative units. It introduces HTML, CSS, and JavaScript, explaining how they work together, and provides examples of common HTML elements and CSS selectors. Key concepts covered include inheritance, specificity, and the cascading nature of CSS.
This document discusses responsive design and how it can be implemented in TYPO3. It defines responsive design as using fluid grids that resize based on browser width rather than fixed width layouts. It recommends using flexible layouts, images, and media queries to build responsive sites. Popular frameworks like Bootstrap and Foundation are introduced to help with responsive design. The document provides examples and resources for creating responsive sites that adapt to different screen sizes.
Cascading Style Sheets (CSS) is a language for styling web pages that allows control over color, layout, and fonts. CSS saves time by reusing style sheets across pages and improves page loading speeds. Styles can be easily maintained and updated globally. CSS offers selectors for styling elements, classes, IDs, and combinations. Pseudo-classes and pseudo-elements allow additional styling options. Media queries allow custom styling for different screen sizes.
Inclusive design: real accessibility for everyoneChris Mills
Chris Mills gives a presentation on inclusive design and accessibility. He defines inclusive design as considering all users, including those with disabilities, using mobile devices, or with low bandwidth. He outlines 10 principles of inclusive design such as being equitable, flexible, simple and intuitive. He provides examples of how to implement these principles through techniques like adaptive layouts, alternative text, and consistent navigation. The overall message is that inclusive design benefits all users and is just good design.
Turku loves-storybook-styleguidist-styled-componentsJames Stone
The document discusses different tools for building design systems in React, including Storybook, Styleguidist, and Styled Components. It explains that Storybook is focused on component development and testing ("the workshop"), while Styleguidist generates documentation and is meant to share the design system externally ("the storefront"). Styled Components is presented as a good option for managing CSS in React projects. Examples are provided for each tool to illustrate how they can be used.
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
This document summarizes a talk given by Chris Heilmann at ForwardJS in 2015. Heilmann discusses the state of web development technologies and how developers have focused too much on experimental features that are not ready for production use. This has led to a fragmented web where browsers implement features differently. He argues developers should focus on standardizing and improving existing web standards rather than constantly introducing new technologies. ES6 is highlighted as a priority for improving existing JavaScript.
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
There is no mobile or desktop Web: we view the same Web, but in different ways. So what is the secret sauce to give the best experience to our users? Drown your fixed-width design, destroy your device-specific approaches and ride the web's unicorn while an orchestra is playing we are the champion in the background: you found the holy grail! It's responsive web design. It's not new. It's not magical. Still, we need it as the bytes going thru the wires doesn't always give us the best experience out there. So stop watching cats videos, and learn more about how you can use Responsive Web Design's approach to your current site, today.
This document introduces responsive design and discusses how to build websites flexibly for different screen sizes and devices. It answers common questions about responsive design, advocates flexibility over adapting to specific devices, and provides tips on content optimization, legacy browser support, responsive tools, and following a responsive design process.
Neil Perlin is an internationally recognized content consultant who helps clients create effective content across various mediums. The document discusses several predictions for the future of technical communication, including increased use of mobile-friendly responsive design, topic-based authoring, structured authoring using standardized styles, and analytics to track content usage. It also covers trends toward open web standards, cloud-based tools, and smaller chunks of reusable content.
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.
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.
2. Responsive web development workshop
AGENDA
‣ What is responsive
‣ Responsive web design
‣ Media queries
‣ CSS preprocessors
‣ Grids
‣ Developing for devices
‣ Developing for older browsers
‣ Javascript libraries
2
105 slides
3 hours
Let’s go!
3. INTRODUCTION 3
You’ll need:
‣ Sublime Text http://www.sublimetext.com/
‣ Xcode https://developer.apple.com/xcode/
‣ Git https://git-scm.com/
‣ Bundler http://bundler.io/ and Ruby installed on your computer
‣ VirtualBox https://www.virtualbox.org/
‣ Windows boxes https://dev.modern.ie/
‣ A positive attitude :)
4. INTRODUCTION 3
About me
‣ I have been working as a web developer for four years
‣ I work at a tech startup called Equiem as Lead Front-end Developer &
UX Developer
‣ I work with SCSS, Javascript, jQuery and PHP day to day
‣ I’m largely taught by my mentors and the internet
5. INTRODUCTION 3
Workshop format
‣ This is an interactive workshop and you’ll be completing tasks as we
go along
‣ Please ask any questions, let’s keep this a dialogue
‣ If you can’t do something because of lack of installed programs or you
don’t have the skillz, that’s cool, we can modify for different levels
‣ We’ll start off beginner and move towards more advanced
‣ Don’t worry, and have fun!
7. 5WHAT IS RESPONSIVE?
The world is changing
‣ 34% of smartphone users go online mostly using their phones, and not
on a desktop, laptop, or other device
‣ People using a desktop computer to search online will increase from
1.4 billion to 1.6 billion users in 2015.
‣ People searching online using a smartphone will increase from 800
million to 1.9 billion users in 2015
https://www.bopdesign.com/bop-blog/2015/02/responsive-web-design-statistics/
12. 5WHAT IS RESPONSIVE?
What it’s not:
‣ “m Dot” eg. http://m.theage.com.au/
‣ Adaptive
‣ Liquid
‣ Static (http://www.liquidapsive.com/)
Fixed
Fixed websites have a
set width and resizing
the browser or viewing
it on different devices
won’t affect on the way
the website looks.
Adaptive
Adaptive websites
introduce media
queries to target
specific device sizes,
like smaller monitors,
tablets, and mobile.
Fluid
Fluid websites are
built using % for
widths. Columns are
relative to one another
and the browser can
scale up and down
fluidly.
“m dot”
m.website.com is a
separate codebase
with the same
database, essentially
an entirely different
“skin” for a site built
for mobile only.
13. 5WHAT IS RESPONSIVE?
Responsive is…
‣ The same website, the same code, the same database, but displayed
differently on different screens due to the use of…
‣ …media queries, which can be leveraged in powerful ways via grid
systems and breakpoints
‣ The idea that the web is not just one size, or three sizes, but any
possible size on an ever-expanding set of devices, including the
Internet Of Things revolution
‣ A design decision, a suite of web tools, a paradigm…
14. KEY OBJECTIVES
Download the base repo
EXERCISE 1: SETUP
AGENDA
5 minutes 1. Open up terminal
2. $ git clone git@github.com:meelijane/
rwd.git
3. Open up index.html
4. View it in your browser
DELIVERABLE
The base repo appearing in your
browser
7
RESOURCES
Sublime Text, a Github account, git for command line and a
browser
16. 5RESPONSIVE WEB DESIGN
Start with the right tools
‣ Designing for multiple screen sizes means that static design
deliverables will be hard to work with
‣ Client sign-off can get confusing with RWD
‣ Photoshop is a photo editing tool
‣ PSDs can make it hard to keep track of revisions
‣ Whether you’re working Agile or Waterfall (and I recommend Agile),
working with responsive design will require you to be fluid as well
17. 5RESPONSIVE WEB DESIGN
Start with the right ideas
‣ Style-guide driven design
‣ Component-based design
‣ Your designer will need to get familiar with responsive web concepts
like HTML basics, CSS basics e.g. floats, web typography
‣ Prototype, prototype and prototype some more
‣ Design to a grid
‣ Webflow https://webflow.com/
‣ http://macaw.co/
18. 5RESPONSIVE WEB DESIGN
Some things to watch out for
‣ Patterns taken from print design that might not work in a fluid context
‣ Client sign-off on static designs
‣ No content provided before designs start
‣ No context provided for designs eg. user research
‣ Using Lorem Ipsum in place of any real content
http://slides.com/equiem/red-flags#/
21. 5RESPONSIVE WEB DESIGN
Start with the content
‣ You can’t build a responsive website without an understanding of its
content
‣ Create a content strategy and/or obtain the actual content before you
get started with visual design
‣ It’s important for responsive design, accessibility and SEO that your
content is semantic and web-ready
22. “95% of the information on the web is written
language. It is only logical to say that a web
designer should get good training in the main
discipline of shaping written information, in
other words: Typography.”
6
Oliver Reichenstein
RESPONSIVE WEB DESIGN
23. 6RESPONSIVE WEB DESIGN
Here is a great teaser about this
cat on a beanbag.The image has
a fixed ratio (use the <img> tag)
and there is just enough text in
this box to fill up the available
space.You can use lorem if you
want.
Cat on a bag
<img
src=“…”>
<div>
<p>
<h2>
24. KEY OBJECTIVES
Understand how responsive
design can be incompatible with
certain design patterns
EXERCISE: RESPONSIVE WEB DESIGN
AGENDA
10 minutes 1. Create the markup to generate a text and
image teaser where the image and text sit
side by side, and the whole teaser is
bounded by a box
2. Resize the browser and observe
DELIVERABLE
A text and image teaser in your
browser
7
RESOURCES
The repo from the last exercise
25. 6RESPONSIVE WEB DESIGN
Here is a great teaser
about this cat on a
beanbag.The image has
a fixed ratio (use the
<img> tag) and there is
just enough text in this
box to fill up the
available space.You can
use lorem if you want.
Cat on a bag
26. 6RESPONSIVE WEB DESIGN
Here is a great teaser
about this cat on a
beanbag.The image has a
fixed ratio (use the
<img> tag) and there is
just enough text in this
box to fill up the available
space.You can use lorem
if you want.
Cat on a bag
Here is a great teaser
about this cat on a
beanbag.The image has a
fixed ratio (use the
<img> tag) and there is
just enough text in this
box to fill up the available
space.You can use lorem
if you want.
Cat on a bag
Here is a great teaser
about this cat on a
beanbag.The image has a
fixed ratio (use the
<img> tag) and there is
just enough text in this
box to fill up the available
space.You can use lorem
if you want.
Cat on a bag
Here is a great teaser
about this cat on a
beanbag.The image has a
fixed ratio (use the
<img> tag) and there is
just enough text in this
box to fill up the available
space.You can use lorem
if you want.
Cat on a bag
28. 5WHAT IS CSS?
CSS is the language for describing the presentation of Web pages,
including colors, layout, and fonts. It allows one to adapt the presentation
to different types of devices, such as large screens, small screens, or
printers. CSS is independent of HTML and can be used with any XML-
based markup language.The separation of HTML from CSS makes it
easier to maintain sites, share style sheets across pages, and tailor pages
to different environments.This is referred to as the separation of
structure (or: content) from presentation.
https://www.w3.org/standards/webdesign/htmlcss#whatcss
29. 5WHAT IS CSS?
Cascading style sheets
‣ A style sheet consists of a list of rules. Each rule or rule-set consists of
one or more selectors, and a declaration block.
.big-box {
background-color: red;
}
Rule
30. 5WHAT IS CSS?
Cascading style sheets
‣ Selectors may apply to:
‣ all elements of a specific type, e.g. the second-level headers h2
‣ elements specified by attribute, in particular:
‣ id: an identifier unique within to the document
‣ class: an identifier that can annotate multiple elements in a
document
‣ elements depending on how they are placed relative to others in the
document tree.
32. 5WHAT IS CSS?
Cascading style sheets
‣ A declaration block consists of a list of declarations in braces.
‣ Each declaration itself consists of a property, a colon (:), and a value.
‣ If there are multiple declarations in a block, a semi-colon (;) must be
inserted to separate each declaration.
.big-box {
background-color: red;
}
Declaration
block
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
33. 5WHAT IS CSS?
Inheritance
‣ Inheritance is a key feature of CSS
‣ Descendant elements may inherit CSS property values from any
ancestor element enclosing them.
<div class=“box”>
<p class=“paragraph”>
<span>CSS is awesome!</span>
</p>
</div>
Nested
HTML
elements
34. 5WHAT IS CSS?
Inheritance
‣ In general, descendant elements inherit text-related properties, but
box-related properties are not inherited. Properties that can be
inherited are color, font, letter-spacing, line-height, list-style, text-
align, text-indent, text-transform, visibility, white-space and word-
spacing.
‣ Properties that cannot be inherited are background, border, display,
float and clear, height, and width, margin, min- and max-height and -
width, outline, overflow, padding, position, text-decoration, vertical-
align and z-index.
35. 5WHAT IS CSS?
Inheritance
<div class=“box”>
<p class=“paragraph”>
<span>CSS is
awesome!</span>
</p>
</div>
.box {
color: pink;
}
This text
will be pink
38. 5MEDIA QUERIES
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
A media query consists of a media type and at least one
expression that limits the style sheets' scope by using
media features, such as width, height, and color. Media
queries, added in CSS3, let the presentation of content
be tailored to a specific range of output devices
without having to change the content itself.
http://www.w3.org/TR/css3-mediaqueries/
43. KEY OBJECTIVES
Change elements on a web page
by use of media queries
EXERCISE: MEDIA QUERIES
AGENDA
5 minutes 1. Create a media query in the index.html file
as <style> CSS
2. Inside the media query, target a div on the
page and change its colour for < 400px
screen width
3. Resize the window and check it out
DELIVERABLE
A web page with a box that
changes colour when the screen
is less than 400px wide
7
RESOURCES
Sublime text, web browser
45. 5CSS PREPROCESSORS
CSS is like painting
‣ You apply rules to selectors individually
‣ Selectors and rules become deeply connected
‣ Every element on a page is individually themed
‣ CSS is supposed to add “optional” styles to HTML, which should really
be completely usable on its own
‣ It’s easy and very simple…
47. 5CSS PREPROCESSORS
SCSS
‣ Sass is an extension of CSS3 which adds nested rules, variables,
mixins, selector inheritance, and more. Sass generates well formatted
CSS and makes your stylesheets easier to organise and maintain.
‣ Sass is the most mature, stable, and powerful professional grade CSS
extension language in the world.
‣ Sass is completely compatible with all versions of CSS
‣ There are endless number of frameworks built with Sass. Compass,
Bourbon, and Susy just to name a few.
http://sass-lang.com/
48. 5CSS PREPROCESSORS
SCSS
‣ Sass has two syntaxes. The most commonly used syntax is known as
“SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This
means that every valid CSS3 stylesheet is valid SCSS as well. SCSS
files use the extension .scss.
‣ The second, older syntax is known as the indented syntax (or just
“.sass”). Inspired by Haml’s terseness, it’s intended for people who
prefer conciseness over similarity to CSS. Instead of brackets and
semicolons, it uses the indentation of lines to specify blocks. Files in
the indented syntax use the extension .sass.
http://sass-lang.com/
51. 5CSS PREPROCESSORS
SASS vs. SCSS?
http://thesassway.com/editorial/sass-vs-
scss-which-syntax-is-better
SCSS
Integrates better with
native CSS
SCSS
Lower barrier to entry
SCSS
Makes nesting harder
which is probably
better…
SASS
Less typing
SASS
Doesn’t complain
about punctuation as
frequently
SASS
Nicer to read
56. 5CSS PREPROCESSORS
Some of the benefits
‣ Style-guide driven design
‣ Components and re-usable chunks
‣ More consistent look and feel, better browser compatibility
‣ Less repetition, less typing
‣ Time saved
‣ Better organised code
‣ Supercharged CSS with frameworks like Compass
57. 5CSS PREPROCESSORS
Compass
‣ Compass is an open-source CSS Authoring Framework.
‣ Experience cleaner markup without presentational classes.
‣ It’s chock full of the web’s best reusable patterns.
‣ It makes creating sprites a breeze.
‣ Compass mixins make CSS3 easy.
‣ Create beautiful typographic rhythms.
‣ Download and create extensions with ease.
http://compass-style.org/
61. KEY OBJECTIVES
Get Sass and Compass running,
use a Compass function
EXERCISE: COMPASS
AGENDA
10 minutes 1. Open Terminal
2. $ gem install bundler
3. $ bundle install
4. bundle exec compass watch
5. Open “rwd” in Sublime
6. Edit style.scss
DELIVERABLE
Working SASS code with use of
one Compass function or mixin
7
RESOURCES
Sublime, Bundler, Compass, your browser
63. NavLogo
Sideba
r
Main content area
5MEDIA QUERIES
width: 200px width: 70%
width: 70%
width: 30%
float: leſt float: leſt
float: leſt
float: leſt
margin-
bottom: 20px
margin-
bottom: 20px
margin-right:
20px
padding-
right: 20px
padding:
20px
64. 5MEDIA QUERIES
NavLogo
Sideba
r
Main content area
@include
float-span(2)
@include
float-span(6)
@include
float-span(6)
@include
float-span(2)
margin-
bottom: 20px;
margin-
bottom: 20px;
// Symmetric grid with fluid
gutters, 1/2 gutter on each
side of a column
@include add-grid(8);
@include add-gutter(1/3);
@include add-gutter-
style('split');
70. 5MEDIA QUERIES
Get on the grid!
‣ Consistency in element sizing and spacing between elements
‣ Fixes rounding errors for you
‣ Float-based grids or absolutely positioned with margins
‣ Asymmetric, symmetric or arbitrarily organised grids
‣ Grids inside each element
‣ No need for fixed pixel width measurements
‣ Different grids can be defined for different breakpoints
72. 5MEDIA QUERIES
Breakpoints
‣ http://breakpoint-sass.com/
‣ Setting breakpoints allows you to create “really simple, organised
media queries with Sass”
‣ Use breakpoints inside elements or outside of them
‣ Give media queries meaningful names
‣ Simplified syntax for media queries
‣ Flexible and works with various different approaches
73. 5MEDIA QUERIES
// Set up breakpoints
$smallish: 500px;
.cool-div {
@include breakpoint($smallish) {
background-color: blue;
}
}
74. 5MEDIA QUERIES
// Set up breakpoints
$smallish: 0px 500px;
$largeish: 501px 1200px
.cool-div {
@include breakpoint($smallish) {
background-color: blue;
}
@include breakpoint($largeish) {
background-color: red;
}
}
Set breakpoints as
ranges
Leverage breakpoints
to create “ranges”
where your styles
apply
77. 5MEDIA QUERIES
Use breakpoints
where appropriate
Screens aren’t all the
same size. More
screens exist than
Apple screens. Change
your layout where it
breaks, not where
screens start and end.
78. KEY OBJECTIVES
Install a simple grid system for
your web page
EXERCISE: GRIDS
AGENDA
10 minutes 1. Set up a simple grid with Singularity
2. Make some divs and position them with
@include float-span
3. Set up some breakpoints
4. Change the float-spans at a different
breakpoint
DELIVERABLE
Insert deliverable/outcome
7
RESOURCES
Sublime, browser
80. 5DEVELOPING FOR DEVICES
Retina support
‣ “Retina Display” is a brand used by Apple that have higher pixel
density than previous models. But high density screens aren’t just
Apple.
‣ iPhone 4 and above
‣ iPad 3 and above
‣ A whole bunch of Android devices
‣ Macbook Pro w/ Retina
‣ 4k and 5k iMacs now exist
82. 5DEVELOPING FOR DEVICES
Retina support - what does it mean?
‣ Images are doubled in height and width to compensate for smaller
pixels
‣ If you have an image that has a low resolution suitable for non-retina
screens, it will look crap on a retina screen
‣ Various workarounds exist for this, including <img srcset> and
various Javascript libraries
‣ For a lot of images, the best solution is to just double it up and reduce
the JPG quality
‣ http://www.netvlies.nl/blog/design-interactie/retina-revolution
83. 5DEVELOPING FOR DEVICES
Retina images look better for everyone
RETINA IMAGE
Native size 600 x 400
JPG compression 31%
Size: 16kb
NON-RETINA IMAGE
Native size 300 x 200
JPG compression 80%
Size: 21kb
ACTUALLY
SMALLER!
85. 5DEVELOPING FOR DEVICES
It’s not just for those types of images…
‣ We use images for all kinds of things including decoration, illustration,
logos and icons
‣ Icons particularly start looking bad without retina support - pixelated,
sometimes unrecognisable
‣ SVG to the rescue!
86. 5DEVELOPING FOR DEVICES
It’s not just for those types of images…
‣ We use images for all kinds of things including decoration, illustration,
logos and icons
‣ Icons particularly start looking bad without retina support - pixelated,
sometimes unrecognisable
‣ SVG to the rescue!
87. 5DEVELOPING FOR DEVICES
SVG?
‣ “Scalable Vector Graphics (SVG) is an XML-based vector image
format for two-dimensional graphics with support for interactivity and
animation.”
‣ Small file size, compresses well and scales to ANY SIZE without losing
clarity
‣ Looks great on retina
‣ You can even control it via CSS including colours, filters and even
animation
‣ https://css-tricks.com/using-svg/
88. 5DEVELOPING FOR DEVICES
SVG icons in Icon Fonts
‣ Remember wingdings? Icon fonts are actual fonts that have icons
instead of letters… designed by you!
‣ Icon fonts use SVG with fallbacks to normal fonts like .otf
‣ Font Awesome (fortawesome.github.io) is the original
‣ I like to use a tool called Icomoon https://icomoon.io/
‣ When your icons are SVG, they look great on all devices!
‣ Make sure you have a fallback in place - Filament Group suggest
unicode or emoji!
‣ https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
90. 5DEVELOPING FOR DEVICES
Testing, testing and more testing
‣ Nothing beats testing on an actual device
‣ http://melbourne.opendevicelab.com.au/
‣ If you’ve got iOS devices, you can plug them in to your computer and
use Safari
‣ Xcode’s device emulator supports SDKs for various iOS devices
‣ Google Chrome’s emulator gives you a sense for different devices,
screen sizes, pixel densities and more
‣ Don’t forget about retina!
91. KEY OBJECTIVES
Demonstrate ability to create
websites for devices with Retina
support
EXERCISE: DEVELOPING FOR DEVICES
AGENDA
15 minutes 1. Create a double-up image using the JPG
compression method and HTML size
attributes
2. Implement an icon font and show an icon
on the page
3. If you have it, bring up the xCode device
emulator and open a site in itDELIVERABLE
Some images that are Retina
friendly
7
RESOURCES
Sublime text, an image from Google, Font Awesome
https://fortawesome.github.io/Font-Awesome/
94. 5DEVELOPING FOR OLDER BROWSERS
People still use IE7
‣ People still use old browsers and that’s just reality
‣ That said you probably don’t need to stress over IE7 and IE6 anymore
‣ But that depends entirely on your context and audience…
‣ IE8 is has had support deprecated by Microsoft
‣ IE9 almost behaves like a normal browser… almost…
‣ That said, you can’t make assumptions and for various reasons you
should consider how your responsive site will fare with the older IEs
95. 5DEVELOPING FOR OLDER BROWSERS
Progressive enhancement
‣ Focuses on accessibility and semantic HTML
‣ Graceful degradation where cool things aren’t supported
‣ This also takes in to account screen readers and other devices that
might not have the cool tricks we use for Chrome and Firefox
‣ Your site should be usable without CSS or Javascript turned on at all!
96. 5DEVELOPING FOR OLDER BROWSERS
Progressive enhancement
‣ Create fallbacks for icon fonts
‣ Use the Yep/Nope Javascript library
‣ KISS - keep it simple, stupid!
‣ Remember that IE8 doesn’t support media queries so you’ll need to
make sure it doesn’t go haywire
‣ IE9 and IE8 both have limits including maximum selectors, maximum
fonts and just general sluggishness
‣ There’s always http://outdatedbrowser.com/
97. 5DEVELOPING FOR OLDER BROWSERS
Don’t make assumptions - test!
‣ Microsoft know that people need special tools to develop for their
browsers
‣ https://dev.modern.ie/ + https://www.virtualbox.org/ = you can open
up a Windows computer as a program running on your Mac
‣ Remember that various different IE versions require various different
Windows versions. You can download them individually at modern.ie
or more tech savvy can get them all with https://github.com/xdissent/
ievms
‣ https://saucelabs.com/ is another option but much slower and harder
to debug
98. 5DEVELOPING FOR OLDER BROWSERS
Compass has lots of options to help
‣ When you get to actually fixing bugs and writing code that is cross-
browser compatible, Compass is really useful
‣ http://compass-style.org/reference/compass/support/
‣ Takes care of vendor prefixing, fallbacks and is configurable so you
can choose what and what not to support
99. KEY OBJECTIVES
Open a website up on a
Virtualbox Windows Machine
EXERCISE: DEVELOPING FOR OLDER BROWSERS
AGENDA
10 minutes 1. Download a VM from modern.ie
2. Install it on Virtualbox
3. Run IE and open Developer Tools to
inspect markup
DELIVERABLE
VirtualBox X-browser testing
setup
7
RESOURCES
VirtualBox, modern.ie
101. 5USEFUL JAVASCRIPT LIBRARIES
There are amazing things made to help you!
‣ jQuery MatchHeights http://brm.io/jquery-match-height/
‣ Backstretch http://srobbin.com/jquery-plugins/backstretch/
‣ Fitvids http://fitvidsjs.com/
‣ Swiper http://www.idangero.us/swiper/
‣ Mmenu http://mmenu.frebsite.nl/
‣ Dot Dot Dot http://dotdotdot.frebsite.nl/
‣ Waypoints http://imakewebthings.com/waypoints/
‣ Find more at http://www.jqueryrain.com/
102. 5USEFUL JAVASCRIPT LIBRARIES
Be careful
‣ Remember that Javascript adds performance overheads so use it
sparingly
‣ Run Javascript only on Desktop if possible, and make sure you aren’t
triggering it unnecessarily on mobile devices
‣ But also - when optimising for performance, make sure you are testing
and not assuming!
103. KEY OBJECTIVES
Install a Javascript library and
have a play
EXERCISE
AGENDA
Whatever
remains…
1. Download one of the libraries from the
previous slide
2. Create applicable markup
3. Trigger the library’s support
DELIVERABLE
Insert deliverable/outcome
7
RESOURCES
Javascript libraries, your project, Sublime