It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory.
The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.
In this session reviewed tools, techniques and concepts to improve our projects:
- Performance and best practices
- CSS structuring and optization (BEM, SMACSS, etc.)
- Fixed-Pixel vs rem, em and %
- Responsive images. Drupal non-Drupal solutions and SVGs
- Asynchronous Javascript loading
- Typography in a responsive environment and FOUT, FOIT effects
- How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help.
- Beyond the Mouse: Touch and keyboard events
- Using RWD patterns
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.
Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI
The document discusses responsive web design and compares it to other approaches like adaptive web design. It addresses some myths around responsive design, including that every website should be responsive, that it hurts performance, and that it limits creativity. It also discusses technical aspects like media queries and their uses beyond mobile screens.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
A talk on front-end developer tools including Yeoman, Grunt.js, Require.js, Bower, and SASS given at Drupal Camp LA 2013.
This talk doesn't address Drupal specifically, but it was aimed to give the audience of drupal developers a look into the state of the art.
Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?
This document provides an overview of various front-end frameworks and tools. It discusses HTML templating languages like HAML and templating engines like Handlebars. It also covers CSS preprocessors like SASS and LESS. JavaScript libraries and frameworks covered include jQuery, Backbone, Spine and CoffeeScript. Boilerplates like HTML5 Boilerplate and frameworks like Twitter Bootstrap and Zurb Foundation are also summarized. The document encourages trying new tools but not feeling overwhelmed by the many options and focusing on those most helpful.
The document outlines an intro to hacking workshop on HTML, CSS, and PHP basics held in Miami Beach, FL in 2012. It provides information on setting up a local development environment with tools like WAMP or MAMP and text editors. It then covers topics that will be discussed, including HTML elements and tags, CSS selectors and rules to target content, and setting up basic HTML and CSS files. The workshop is powered by Ptah Dunbar and attendees are encouraged to tweet using the provided hashtags.
Marc Grabanski gave a whirlwind tour of Scalable Vector Graphics (SVG), covering the basics of SVG including elements, embedding SVG, features like DOM structure and filters, demos of transformations and animation, and tools like RaphaelJS. The presentation provided an overview of SVG and highlighted its advantages like scalability, accessibility, and use of HTML and CSS. Examples of various SVG elements, embedding methods, and features like filters and transformations were demonstrated.
Responsive & Responsible Web Design in DNNgravityworksdd
DNN is an excellent platform for a responsive website, but its important to know the ''Do's'' and ''Don'ts'' when designing responsively. This presentation will cover all things responsive: from wireframes and mockups, to media queries and javascript snippets. Get valuable tips on how to create a responsive site following modern web standards, while harnessing the power of the DNN framework. Learn how to design and plan your site, develop layouts with a fluid grid, and test to ensure your site looks great on tons of devices!
The jQuery Foundation coordinates work on the jQuery project, including code, documentation, infrastructure, and events. It is a non-profit organization funded by conferences, donations, and memberships. The Foundation maintains jQuery and related projects like jQuery UI, jQuery Mobile, and QUnit on GitHub. jQuery 1.x continues to support older browsers while jQuery 2.x supports modern browsers, with both versions maintaining API compatibility. Major releases in 2012 included jQuery 1.9 in January and jQuery 2.0 in April.
A guide to help you achieve code consistency that adheres to best practices. Sections include: What is a URL?, Naming Conventions, Project Folder Structure, Code Guide, Images Guide, and Things I wish I Knew Upfront
The document provides an introduction to HTML and CSS for web development. It explains that HTML is used to structure content and CSS is used to style HTML. It covers key HTML tags like headings, paragraphs, links and divs. It then demonstrates how CSS can be used to style elements with selectors, properties and values. CSS concepts like padding, margin and classes vs IDs are explained. Finally, it mentions next steps like making the site dynamic, responsive, and adding 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.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
Doris Chen is a senior developer evangelist at Microsoft who focuses on web technologies like JavaScript and HTML5. Her presentation covers optimizing Cordova app performance, including measuring startup cost and memory usage, using CSS for gradients instead of images, animating with translate3d instead of left/top, and handling events through bubbling instead of individual listeners. She provides tips like keeping the DOM simple, batching layout changes, and cleaning up unused objects to prevent memory leaks.
From jQuery San Diego, held Feb 12-13 2014, my talk on web accessibility for web developers. I cover basic techniques, introduce screen readers and ARIA, and go over testing. The goal is to demystify accessibility so we can weave it in to applications today.
WP Framework is a WordPress theme framework created by Ptah Dunbar that aims to provide everything needed for building WordPress themes and nothing extra. It has design principles focused on being efficient, modular, extensible, and developer-friendly. Key features include organized folders, valid HTML/CSS, over 30 hooks and filters, and a goal of raising standards for WordPress themes. The future plans include a theme builder and growing the WP Framework community.
Responsive web design allows websites to automatically adjust to different screen sizes and devices. It uses flexible grids and images that resize depending on screen resolution. Media queries detect screen size and adjust layout accordingly. This provides a consistent user experience across devices like smartphones, tablets and desktops. It is important for responsive design because people increasingly access websites on various devices, and a single responsive site is more convenient and usable than separate mobile and desktop sites.
Web Design And Development With Open SourceBaki Goxhaj
This is my presentation at "Software Freedom Kosova Conference 2009" where I spoke about Web Design and Development with Open Source tools. The conference was held in Pristina, Kosova on 29 and 30 August 2009. This presentation was done with Open Office Impress.
Student Mentoring Programs: The Why's, How's, and MoreCindy Pao
This document outlines how to establish student mentoring programs within English curriculums. It discusses pairing students with professionals in areas like creative writing, technical writing, and linguistics. It describes the benefits of mentoring for mentees, mentors, and organizations. It provides details on how to start a program, including recruiting mentors and mentees, suggested activities, and administrative materials that can be adapted from an existing mentoring program toolkit. The presentation aims to demonstrate how mentoring can strengthen student and professional communities within the field of English.
This is the thing that U are looking for. This is the best tutorial about responsive web design.I assure U after watching this presentation you definitely will be an expert as responsive web designer. This tutorial will teach you how to make fit your web site in every kinds of device .
This Slide will Provide you with tips and ideas related to each of the qualities that a successful responsive web design must have.
For hire me on fiverr:-
https://goo.gl/Ouv3VL
This document provides an introduction and overview of Bootstrap, an open-source front-end framework for developing responsive, mobile-first web sites and apps. It discusses what Bootstrap is, its mobile-first approach, rich component set, theming and customization options. It also demonstrates how to set up and configure Bootstrap, customize it using SASS and CSS overrides, and highlights some of the speaker's recent publications.
Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site.
Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.
This document discusses bringing an atomic design approach to Sitecore development. It introduces atomic design principles which involve building up small reusable components (atoms) into larger molecules and organisms. These can then be assembled into templates and pages. The document demonstrates how this approach can be translated to Sitecore by creating renderings, data templates and other items to represent atoms, molecules, organisms etc. It discusses challenges of the approach and benefits such as improved portability, consistency and extensibility.
This document summarizes an agenda for a responsive design roundtable discussion. The roundtable will cover topics including what responsive design is, the user continuum, and mobile web vs responsive design vs apps. It will take place on June 12, 2013 from 8am to 10am and be led by Christian Glover Wilson. The agenda includes 4 topics to discuss and time for Q&A.
Este documento presenta la filosofía del diseño web adaptable o responsive design. Explica que con el aumento de dispositivos conectados a Internet, es necesario crear sitios web que se adapten a diferentes tamaños de pantalla. Define el responsive design como una filosofía que permite que un mismo sitio web se vea bien en todo tipo de dispositivo sin importar las resoluciones o tamaños, gracias a técnicas como media queries, proporciones flexibles y elementos adaptables. Finalmente, recomienda herramientas como frameworks front-end como Bootstrap para facilit
Joseph Labrecque gave a presentation on responsive web design. He defined responsive web design as allowing desktop web pages to adapt to different screen sizes. He discussed important concepts like CSS media queries and fluid grids. He demonstrated how to use media queries to apply different styles based on screen width. He also overviewed common CSS layout methods and responsive frameworks like Bootstrap and Foundation. Finally, he highlighted tools for responsive design like browser developer tools and Adobe programs like Dreamweaver and Animate.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
The document introduces modern web technologies including starting mobile/touch first, HTML5, CSS3, and AJAX/JavaScript. It provides overviews of new HTML5 features like semantic markup, forms, geolocation, web storage, canvas, and offline capabilities. It also discusses CSS3 features, single page applications enabled by AJAX and JavaScript improvements, and how these technologies can be used together to provide rich user experiences.
Need a ten minute overview of responsive web design? In this talk we'll talk about the problem responsive web design (RWD) is trying to solve, what RWD is, the basic implementation aspects of RWD and some of the latest developments and sources of information if you want to learn more about RWD.
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens.
Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.
This document summarizes several latest trends in web technologies, including cloud computing, HTML5, programming languages like JavaScript and LISP, NoSQL databases, and functional and concurrent languages. Cloud computing allows minimal hardware purchasing through services like AWS while HTML5 expands web capabilities beyond Flash. Programming languages like JavaScript and LISP are being rediscovered for their power and conciseness. NoSQL databases provide an alternative to relational databases for high performance needs.
Este documento proporciona una introducción a Bitcoin, describiendo sus ventajas como una moneda digital de bajo costo y global que permite transacciones rápidas. Explica que Bitcoin puede ser minado a través de software de código abierto y que su creador es Satoshi Nakamoto. También incluye consejos sobre cómo comprar, almacenar y usar Bitcoin de manera segura.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
The document provides advice on how to start a business by first being employed within yourself. It discusses Nigeria's high unemployment rate and need for more entrepreneurs. The author advocates having a unique idea or product, then taking the first steps to turn it into a business from your home by working on it and building your brand. While the journey will not be easy, choosing to try can lead to success, whereas not trying will guarantee failure. The document ends by noting the streets of Lagos contain opportunities for both gold and broken dreams, and it's up to each individual to choose their path.
Session presented in the european DrupalCon Dublin 2016. Video can be found here: https://www.youtube.com/watch?v=152J_74KGl0
It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory. The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.
In this session I reviewed tools, techniques and concepts to improve our projects:
⁃ Modern Design processes
⁃ Performance
⁃ CSS structuring and optimization (CSS Methodologies and Living Styleguides)
⁃ Fixed-pixel vs relative units (and Viewport Sized Units)
⁃ Responsive Typography and FOUT, FOIT
⁃ Images, Responsive images and SVGs
⁃ Asynchronous loading
⁃ Proxy-based browsers
⁃ Beyond the Mouse
⁃ RWD patterns and Progressively Disclosure
I showed simulations for a better understanding.
This session was aimed to anyone who wanted to improve his RWD knowledge, although a minimal RWD knowledge was expected.
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.
As presented at DrupalCamp Michigan, January 2015
Presented By: Andy Blanchard and Chris Keller of Commercial Progression
As the sites we build get increasingly complicated simplifying or overlapping processes can be a great way to speed up delivery. In this talk, we'll share the techniques and tools we use at Commercial Progression to quickly produce high-quality design and frontend deliverables.
WE'LL ALSO DISCUSS:
How wireframing can be a vacation from designing
Using wireframes to test the usability of your website
Why prototyping makes life easier and more complicated all at the same time.
Explore front end development tools and their place in Drupal, CSS frameworks, CSS preprocessors, and JS task runners.
The document discusses how web browsers render web pages in 5 stages:
1) Constructing the object model from HTML tags and content
2) Creating the render tree by omitting non-visible nodes
3) Calculating layout and positioning during the layout stage
4) Painting pixels on the screen during the paint stage
5) Composite layers are ordered and combined during the composite stage
It provides tips for optimizing performance such as minimizing critical resources, leveraging caching, prioritizing content, and reducing reflows and repaints.
The document discusses a 5-step process for using a CSS grid framework called the 960 Grid System to design a website. Step 1 involves paper prototyping to define expectations. Step 2 is creating an unstyled semantic structure using the 960 Grid. Step 3 adds graphical elements in Photoshop. Step 4 finalizes production by slicing images and applying CSS. Step 5 focuses on testing across browsers before client delivery. Using this process and a CSS framework provides benefits like visual consistency and reduced cross-browser issues.
This guide will not bring you a magic formula to optimize critical render path. When the subject is web performance: there's no magic formula. Analyze performance is careful and meticulous process, and it can bring different results based on various existing variables.
This document provides practical strategies for improving front-end performance of websites. It discusses specific techniques like making fewer HTTP requests by combining files, leveraging browser caching with far-future expires headers, gzipping components, using CSS sprites, and deploying assets on a content delivery network. It also summarizes key rules from tools like YSlow and PageSpeed for optimizing front-end performance.
- HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web.
- Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations.
- Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.
Decoupling Drupal - Drupal Camp Toronto 2014Alex De Winne
What if you could say to a front-end developer:
“Build it the best way you know how and with the best tools available. Don’t worry that we’re using Drupal”
You can see the presentation video here https://www.youtube.com/watch?v=W1rc5CEro6U or go to the last slide.
A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love
This is an older slide deck I realized I never uploaded.
It is a slightly longer deck than the Night at the SPA deck. This features many concepts that are forerunners to the modern progressive web application.
There are slides related to web performance best practices, JavaScript architecture, responsive web design, touch and much more.
Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
Responsive Images
Improving Performance
Responsive Typography
Media queries in JavaScript
Layout
In this session we will present an overview from the point of view 'system that implementative on how to get the best performance from your drupal application.
We will also show examples of use cases for drupal scalable infrastructure.
This document provides an overview and agenda for a workshop on responsive web design for Drupal. It begins with a whirlwind tour of responsive design principles, then covers using base themes in Drupal and applying responsive techniques to Drupal sites. It includes case studies on retrofitting an existing site to be responsive and using the Fusion base theme. The document emphasizes planning breakpoints based on content, using flexible grids and media queries, and ensuring navigation and content remain usable across screen sizes.
AMP has benefits for driving discussion on web performance and collaboration, but it also has significant limitations and drawbacks. While AMP pages load faster initially due to Google's pre-rendering, regular websites optimized for performance can also load very quickly and provide a better user experience through proper branding and interactivity. Overall web performance optimization should go beyond just AMP by focusing on fundamentals like optimizing images, CSS, JavaScript, and the critical rendering path to make entire websites fast for users on all devices.
The document discusses responsive web design and best practices for building flexible layouts. It defines fixed and fluid layouts, and explains how to design fluid layouts using percentages and ems rather than pixels. It covers principles of responsive web design like using a mobile-first approach and progressive enhancement. Key coding best practices are also outlined, such as proper doctype declaration, external CSS/JS, semantic HTML, and accessibility.
How can we build experiences for the devices of tomorrow? Explore the techniques for building performant, maintainable and future-proof responsive designs.
Bio: Adam Chambers is a senior developer at Digital Surgeons, a full-service creative agency based in New Haven, Connecticut. Adam is the lead architect on the Gumby Framework project, creator of ResponsiveComments.js and a web standards enthusiast.
An exploration of the techniques required to build responsive web applications that can support the multitude of devices around today, as well as prepared for the devices of the future.
Critical Rendering Path - Velocidade também é uma funcionalidadeJoao Lucas Santana
Desenvolver aplicações web requer que você entenda seus usuários e o que eles precisam, mas também requer que você entenda como o Browser funciona, como seu conteúdo é entregue e exibido aos usuários. Dessa forma, você fornece uma boa experiência com performance apropriada. Nesta palestra introduziremos os conceitos presentes no campo de Web Performance Optimization, desde as requisições de rede, passando pela sequência de passos utilizados pelos Browsers para converter e executar os conteúdos (HTML, Javascript e CSS), definir o layout e, por fim, exibir as informações.
Similar to Improving the Responsive Web Design Process in 2016 (20)
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur
Tarun Gaur On Data Breaches and Privacy Fears https://www.cbs19news.com/story/50764645/tarun-gaur-on-data-breaches-and-privacy-fears-navigating-the-minefield-of-modern-internet-safety
Book dating , international dating phgrathomaskurtha9
International dating programhttps: please register here and start to meet new people todayhttps://www.digistore24.com/redir/384521/godtim/.
get started. https://www.digistore24.com/redir/384521/godtim/
10th International Conference on Networks, Mobile Communications and Telema...ijp2p
10th International Conference on Networks, Mobile Communications and
Telematics (NMOCT 2024)
Scope
10th International Conference on Networks, Mobile Communications and Telematics (NMOCT 2024) is a forum for presenting new advances and research results in the fields of Network, Mobile communications, and Telematics. The aim of the conference is to provide a platform to the researchers and practitioners from both academia as well as industry to meet and share cutting-edge development in the field.
Authors are solicited to contribute to the conference by submitting articles that illustrate research results, projects, surveying works, and industrial experiences that describe significant advances in the following areas but are not limited to.
Topics of interest include, but are not limited to, the following:
Mobile Communications and Telematics Mobile Network Management and Service Infrastructure Mobile Computing Integrated Mobile Marketing Communications Efficacy of Mobile Communications Mobile Communication Applications Critical Success Factors for Mobile Communication Diffusion Metric Mobile Business Enterprise Mobile Communication Security Issues and Requirements Mobile and Handheld Devices in the Education Telematics Tele-Learning Privacy and Security in Mobile Computing and Wireless Systems Cross-Cultural Mobile Communication Issues Integration and Interworking of Wired and Wireless Networks Location Management for Mobile Communications Distributed Systems Aspects of Mobile Computing Next Generation Internet Next Generation Web Architectures Network Operations and Management Adhoc and Sensor Networks Internet and Web Applications Ubiquitous Networks Wireless Multimedia Systems Wireless Communications
Heterogeneous Wireless Networks Operating System and Middleware Support for Mobile Computing Interaction and Integration in Mobile Communications Business Models for Mobile Communications E-Commerce & E-Governance
Nomadic and Portable Communication Wireless Information Assurance Mobile Multimedia Architecture and Network Management Mobile Multimedia Network Traffic Engineering & Optimization Mobile Multimedia Infrastructure Developments Mobile Multimedia Markets & Business Models Personalization, Privacy and Security in Mobile Multimedia Mobile Computing Software Architectures Network & Communications Network Protocols & Wireless Networks Network Architectures High Speed Networks Routing, Switching and Addressing Techniques Measurement and Performance Analysis Peer To Peer and Overlay Networks QOS and Resource Management Network-Based Applications Network Security Self-organizing networks and Networked Systems Mobile & Broadband Wireless Internet Recent Trends & Developments in Computer Networks
Paper Submission
Authors are invited to submit papers through the conference Submission System by July 06, 2024. Submissions must be original and
24. @chumillas #DrupalCampEs
Reuse CSS
Faster CSS rendering
Large scale ready
Helps you figure out what your
design is made of.
Helps you getting started in a project.
CSS structuring and optimization
CSS Methodologies
25. #DrupalCampEs
Living document of code that details
all the elements of your site.
CSS structuring and optimization
Living Styleguides
26. @chumillas #DrupalCampEs
Faster build times for new sections and pages
Standardize the CSS, keeping it small and
quick to load
Design consistency is easier to maintain
CSS structuring and optimization
Living Styleguides
29. @chumillas #DrupalCampEs
Fixed-pixel vs relative units
1.1 x the base 16px
17,6px (1.1 x the previous)
19,36px (1.1 x the previous)
1.1 x the base
1.1 x the base
emrem
34. @chumillas #DrupalCampEs
Responsive Typography
Title
14px
16px
22-60 rems
40-80 characters
Occusapicim dit doluptassum que labo. Em
sam ilictumPore quisqui officitaspit volenis
eturio est venim ipis ex eturepe llandit eum,
untium, quostot aturia sim sam corendanihit
fugianis delitio sandae volupta quate re nos
aut et dolendi tatium, offic te nos est aliat
que perum et eaquatu riberibus mo cus.
Peruntio. Nequiam et quo eum lab ipsa
cusantiberro maxim faccus am et voluptatem
voluptae pa cuptas et quae simagnim facienis
et et ese pa sanis aut autem asi unt ommodis
aut fugitasped qui omnimag nisimil laborum
sunt adit, voluptatur rero opti aris aut rerum
eos eatint, vitatem. Rovid quid ma aut
maximi, oditat lamus imusdantiis ex excessi
tatque poriatur?
36. @chumillas #DrupalCampEs
Responsive Typography
FOUT FOIT
“Flash of Unstyled Text” “Flash of Invisible Text”
Browsers used to display a
fallback font in the font stack
until the custom one loaded.
They started to detect if text
was set in a custom font that
hasn’t loaded yet, and made
it invisible until the font did
load
FOUT, FOIT
48. @chumillas #DrupalCampEs
Responsive images
Non Drupal solutions
ReSrc, thumbr.io, responsive.io
Cloudinary
Picturefill
Scaling based on the targeted end result
Scaling based on url.
Scaling based on media-queries.
...
49. @chumillas #DrupalCampEs
SVGs
Scaling based on the targeted end result
Scales to any size without losing clarity
Looks great on retina displays
Design control like interactivity and filters
Scalable Vector Graphics
Future-proof
Easy to make and edit
Manipulatable with CSS & JS *
Highly compressible
54. @chumillas #DrupalCampEs
While the JavaScript file is loading, parsing the
HTML document can continue
JS execution no longer has to wait for CSS
You can’t guarantee the order of JS execution
The script shouldn’t use document.write()
The document parser doesn’t pause while the script is loading, the
browser has no idea where any content added by document.write()
should go.
Doesn’t block the DOMContentLoaded event
Asynchronous loading
Async
i
i
55. @chumillas #DrupalCampEs
Asynchronous loading
Defer
<script src=”javascript.js” defer></script>
Deferred scripts are executed only after the
HTML page has been parsed
It has the potential to interfere with the
rendering of the page
Deferred scripts will execute in the order they
appear in the document ou can’t guarantee
the order of JS execution
async has priority
i
i
58. @chumillas #DrupalCampEs
Proxy-based browsers
Reduce bandwidth usage by
compressing resources
on a proxy server
before sending it to the client browser.
India, Indonesia, Nigeria, Bangladesh
and South Africa
Opera Mini users
250
million
59. @chumillas #DrupalCampEs
Use SVG rather than icon fonts
Style your HTML with CSS
Test your site without JavaScript
Make your site performant
Test in Opera Mini
Proxy-based browsers
60. @chumillas #DrupalCampEs
Progressive enhancement
Basic content and functionality of a web
page to any browser or Internet connection
Enhanced version advanced browser
software or greater bandwidth
Proxy-based browsers
Accessibility
62. @chumillas #DrupalCampEs
Beyond the mouse
• Be accessible in browsers where a mouse pointer may not exist.
• Don’t assume touch will be used, but design as if it will be.
Save hover for shortcuts
Keep in touch
Gestures: don’t override them