Building Responsive Websites and Apps with Drupal

1. The document discusses the debate around relying on JavaScript for web applications and progressive enhancement. 2. It argues that while JavaScript can break, the web has evolved to focus more on capable client-side devices rather than availability of JavaScript. 3. It suggests embracing new paradigms like components and functional programming to build high quality, error-handling code rather than avoiding JavaScript.

Responsive web design involves creating layouts that adapt to different screen sizes using flexible grids and media queries. It allows for a device-agnostic approach and is easier to build than separate mobile sites. Key aspects of responsive design include planning with a mobile-first approach, prototyping, using consistent breakpoints based on content, usability testing, writing for different screens, designing visually hierarchical layouts, and addressing images and media. Testing is important throughout the process. While responsive design is a good base, other solutions like responsive or native apps may still be needed, and the job requires ongoing review.

This document outlines 10 web performance lessons for the 21st century. The lessons are: 1) Measure first, optimize bottlenecks second 2) Measure what matters 3) Get a performance budget 4) Write JavaScript efficiently using mostly functions 5) Write code efficiently using mostly HTML 6) Consider static functional programming as JavaScript may not be enough 7) Observe how browsers work behind the scenes 8) Build fast organizations 9) Have courage in your minimalism 10) Sometimes keeping it simple with 9 lessons is enough. The document provides explanations and examples for each lesson along with relevant links to additional resources.

Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!" While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.

The document discusses the history and challenges of front-end development. It notes that initially there were many different front-end tools that made selection difficult. Frameworks became popular but could be incompatible and difficult to decouple. It suggests that ES6 and React provide a good foundation for building front-ends, as React code can be written in ES6 and they avoid issues of other frameworks.

The document provides an overview of front-end development for Django developers. It discusses using HTML, CSS, JavaScript and other front-end technologies. It recommends using components, preprocessors and task automation like Grunt. It also discusses standards, performance optimization and creating UI libraries.

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.

A brief introduction to responsive web design presented to Biomedical Communications (MScBMC) students on March 15, 2013.

This document discusses responsive web design techniques including: - Using viewports and media queries to adapt layouts for different screen sizes. - Sizing images fluidly using max-width: 100% so they are responsive. - Design patterns for responsive tables, hiding/showing content, and converting menus to dropdowns. - Tools like Modernizr, Respond.js, and frameworks like LESS to support responsive design goals. - Tips like using relative units (ems/percentages) over fixed pixels and transitions for visual changes.

Chris Heilmann gave a talk celebrating beautiful web sites but noted that many sites could be more optimized. He highlighted that the average site is over 2 MB in size, with images making up over 1 MB of that. Many sites use unnecessary libraries, send high resolution images to all devices, and include autoplay videos without checking connection speed. However, newer browser capabilities like Flexbox, Service Workers, and camera/microphone access provide opportunities. Sites should cut unnecessary code, optimize images, and leverage new technologies to create accessible experiences for all types of users on today's capable browsers.

Microservices, cloud, continuous delivery heavily influenced how modern teams build software systems. Come to this talk to learn how our team rebuild frontend stack of several newspapers significantly reducing cycle time and creating fun work environment that lets great developers be great. Some of the things I’ll share: - how respecting the Web makes us faster - what we learned running 12factor apps on Heroku - nuances of Continuous Delivery that you won’t find in books - thinking process behind our decisions and some of the change patterns we used Video: http://www.schibsted.pl/2015/07/enterprise-makeover-part-16-creating-lean-enterprise/ http://www.schibsted.pl/2015/07/enterprise-makeover-part-26-use-the-web-dont-abuse-it/ http://www.schibsted.pl/2015/07/enterprise-makeover-part-36-rethinking-agile-practices/ http://www.schibsted.pl/2015/07/enterprise-makeover-part-46-cloud-native-development-on-heroku/ http://www.schibsted.pl/2015/07/enterprise-makeover-part-56-continuous-delivery-orchestration/ http://www.schibsted.pl/2015/07/enterprise-makeover-66-organizational-change-summary/

The document discusses using JavaScript like a buffet, where developers should be flexible and not try to do everything with JavaScript or force their preferences on others. It encourages sharing code openly but also being considerate of different environments and users. Developers are advised to focus on quality over quantity and consider progressive enhancement over delivering all functionality at once.

The legal team at Adobe is constantly seeking creative new ways to better serve our customers and employees. Part of this effort has been the development of what we call The Adobe Legal Department Style Guide. We use it as the foundation of the way we create and revise our agreements, processes, policies and trainings to ensure that they are models of clarity and simplicity, and that we communicate with a common voice. These efforts have resulted in an array of benefits including greater organizational efficiency, reduced translation and other costs, and most importantly --- happier customers and employees. Now we would like to help others in the legal profession to do the same. The Adobe Legal Department Style Guide is available to anyone free of charge under a Creative Commons license.

User have a goal and are on a mission. Navigation is one of the core elements of a responsive website. Which navigation principle is the best for the information architecture, usability and user experience? In addition to the scalability for different screen sizes, it is the major challenge to find the balance between completeness and clarity. The presentation explores these questions and formulated guidelines.

The document discusses building websites that comply with WCAG AA accessibility standards. It emphasizes using proper semantics and structure to help screen readers and browsers build an accessibility tree. Interactive elements like links, buttons, and inputs should have proper roles and keyboard navigation to be accessible. Resources are provided on semantics, interactive elements, keyboard navigation, skip links, visible focus styles, and WordPress accessibility guidelines and themes.

Responsive design begint steeds normaler te worden. Zo hebben nagenoeg alle template providers al responsive templates en ook de grotere, ingewikkelde websites zijn steeds vaker responsive. Maar hoe werkt dat nou? Wat kom je allemaal tegen als je responsive websites/templates aan het bouwen bent? Binnen deze presentatie laat ik een aantal mogelijke oplossingen zien voor de uitdagingen waar wij als ontwikkelaars van responsive Joomla! templates dagelijks mee te maken hebben.

Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.

This presentation was given at the UT Austin Drupal Users Group by Todd Nienkerk of Four Kitchens (June 19, 2012) For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

Four Kitchens is a full-service Drupal consulting firm that builds large, complex websites. They have an elite team of "web chefs" with expertise in design, development, systems architecture, and project management. Some of their clients include major organizations like The Economist, Yale University, and Al Jazeera. They believe in open source and contributing their work back to the community under open licenses. Their name "Kitchens" refers to the collaborative teamwork needed to build a website, similar to preparing a feast.

In the beginning, web designers only had a handful of typefaces at their disposal to use in their designs. Then Flash and Javascript allowed unlimited fonts but lacked accessibility features. In the past year, it seems we finally have a winning solution: the @font-face method which has support from all major browsers and does so using only HTML and CSS. Meanwhile, a second conversation is happening amongst those who actually own the fonts – the foundries. Would these emerging technologies ensure that their typefaces could not be easily copied from the web? Unfortunately @font-face is still not widely accepted by most foundries. Some allow you to use a hosted service like TypeKit, or you can venture into the burgeoning movement of open source and commercial-free fonts and enjoy free rein over your web typography.

This presentation was given at BADCamp by Todd Nienkerk of Four Kitchens (October 23, 2011) For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

This document summarizes the history and current state of using web fonts on websites. It discusses how browser support for @font-face has evolved over time, popular web font formats, best practices for defining font families with multiple weights, options for hosting fonts, and the benefits of using hosted web font services versus self-hosting. It also provides an overview of the Drupal @font-your-face module for selecting and applying web fonts in Drupal sites.

This document discusses designing websites for future-proofing and different device dimensions. It recommends a responsive design approach using CSS3 media queries to create layouts that adapt based on device size and capabilities. The key aspects are to consider the mobile interface first, keep designs simple, and reorganize elements like headers, navigation and content for different screen sizes. Code examples are provided for implementing media queries in both the HTML link and CSS style sheets.

This presentation was given at DrupalCon Copenhagen by Aaron Stanush and Todd Nienkerk of Four Kitchens (August 24, 2010) For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

The document discusses designing websites as dynamic web systems rather than static pages. It recommends that designers first define the site purpose and content, choose a platform like Drupal, and translate designs into the framework's terminology. The presentation provides tips on conceptualizing a site as a set of reusable components that can be adapted over time.

The document provides an overview of web fonts, including their history, formats, licensing, hosting options and best practices. It discusses the evolution from early techniques like sIFR and Cufón to the current standard of @font-face with WOFF fonts. Commercial foundries and free options are covered, along with the "bulletproof" syntax for browser compatibility. Font hosting services are presented as an easier alternative to managing files directly. The future of hinting, a single format and richer typographic tools through CSS is envisioned.

This document discusses open-source and no-cost tools for collaboration. It summarizes suites like Google Apps, Zimbra, and Atlassian which provide tools for email, document sharing, project management and more. It also covers chat options like Openfire, Skype and IRC, as well as telephony with Asterisk. The document concludes with how Four Kitchens uses tools like Atlassian, Zimbra, Openfire and Google Apps for internal and client collaboration, minimizing maintenance where possible.

Grid systems provide a standardized approach to web layout using a series of columns. The 960 Grid System is a popular grid framework that uses 12 or 16 columns that are each 60 or 40 pixels wide respectively. It provides CSS classes to define grid widths and positions. The NineSixty Drupal theme ported the 960 Grid System to Drupal and added features like dynamic grid widths, debugging tools, and content-first layout capabilities.

This document discusses accelerated theming using the NineSixty grid system. It provides an overview of grid systems and their history, explains how grid systems work by dividing content into columns and gutters, and provides examples of layouts that can be created using a 12-column grid. It specifically examines the 960 grid system, how it divides content into 60px columns, centers content at 960px wide, and can be used with both 12-column and 16-column layouts simultaneously.

NineSixty is a Drupal theme based on the 960 grid system that provides accelerated theming. It includes improvements such as content-first layout using "push" and "pull" classes, dynamic grid widths using the ns() function, debugging tools, and RTL language support. NineSixty's grid-based approach helps designers achieve consistency while saving time through reusable code.

This presentation was given at DrupalCon London by Todd Nienkerk of Four Kitchens and Adam Snetman of Thinkso Creative (August 24, 2011) For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

The document discusses the problems with requests for proposals (RFPs) in business. It notes that while RFPs are intended to find vendors for work, they are often used for bad reasons like getting free consulting or qualifying new vendors. The document provides advice on how clients and vendors can improve the RFP process, such as requiring meetings with project staff, being open about budgets, and vendors offering alternatives to the standard RFP format. Overall, the document argues that RFPs often waste time and money for both clients and vendors and there are better ways to find partners for projects.

This document summarizes the Accelerated grid theming using NineSixty presentation given by Todd Nienkerk at DrupalCamp LA. It discusses the history of grid systems in design and their adoption on the web. Grid systems use columns, gutters, and nested divs to create flexible, standardized page layouts. The document then explains how the popular 960.gs grid framework works, including its 12- and 16- column options, CSS classes, and markup.

This presentation was given at DrupalCamp Stockholm by Todd Nienkerk of Four Kitchens (May 7, 2011) For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

This document summarizes a presentation on using the 960 grid system for Drupal theming. It discusses the history of grid systems in design, how grid systems work on the web using CSS frameworks, and provides specific details on how the popular 960 grid system can be implemented in Drupal themes using its grid classes and layout options.

Todd Nienkerk and Aaron Stanush presented on creating Drupal themes that are optimized for Drupal. They recommend brainstorming the purpose and content of the site before starting design work. Key aspects to define include goals, content types, site maps, and wireframes. Themes should be built using template files and CSS to style common Drupal components like nodes, blocks, menus and regions. Using techniques like template suggestions, subthemes, and grid frameworks can accelerate the design and development process.

TIC Magazine est le premier magazine marocain francophone dédié aux Technologies de l’Information et la communication, destiné aux professionnels du secteur au Maroc Plus d'infos sur http://www.ticmagazine.net

This is somewhat outdated. Read these slides instead: http://www.slideshare.net/rupl/responsive-drupal-beyond-the-media-query --------------------------------------------------------------- A brief summary of the options available to Drupal themers looking to build mobile websites, mobile apps, or websites with mobile versions.

In this presentation I discuss the mobile web: what it is, why it is lucrative, the limitations of developing for mobile, and how to best optimize web sites for viewing on mobile. This includes media queries, viewport and general best practices. I delivered this to a class at Oxford Brookes university on the 25th March 2011.

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.

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.

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!

The document discusses responsive UX, which is designing websites and applications that adapt to different screen sizes and devices using fluid grids, media queries, and responsive images; it provides examples of how to implement responsive design principles through fluid grids, image scaling, and media queries to build sites that automatically adjust for smartphones, tablets, and other devices.

A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/. Event page: https://www.facebook.com/events/296799847060237/

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.

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.

The document is a presentation by Tom Carney about responsive web design. It discusses Carney's background in web development for over 10 years and experience with mobile and responsive design for 18 months. The presentation covers the introduction of responsive design, responsive design techniques like grids, media queries and plugins, transitioning websites to responsive design, responsive design workflows, and examples of responsive design. It addresses setting separate mobile sites versus responsive design and takes questions from the audience.

This document discusses CSS3 and its new features. CSS3 is made up of modules that add functionality on top of CSS2.1. Some key features covered include drop shadows, opacity, RGBA/HSLA colors, border-radius, transitions, transforms, media queries, web fonts, and animations. The presenter encourages using CSS3 now as most browsers support many of its features and provides ways to work around any issues. Modernizr is recommended to help with feature detection.

This is the same workshop from August, but about 40 new slides, mostly at the end. A hands-on workshop for DC Web Women on September 11, 2012.

Web tech­nologies are evolving at such a frenetic pace that it becomes almost mandatory to learn on your own. A lot of us still depend on other people to do this learning for us, and we tend to use their answers to solve our everyday problems. Inconsistent imple­men­ta­tions, rapidly evolving specs, ques­tionable perfor­mance impacts and main­te­nance impli­ca­tions mean we cannot always depend on others for answers but must involve ourselves actively in the process of devel­oping spec­i­fi­ca­tions for new Web tech­nologies. But how do we go about it? There are some simple rituals we can all do, which can have us be better-​​informed and also better inform the people and groups who are most directly involved in the devel­opment of new Web tech­nologies.

Building a responsive mobile application with AngularJs. Tips and Tricks. How to use Ionic and AppGyver to fill the Cordova performance gap.