A Responsive Web Design talk for designers and developers given at the DECODED Conference held in Dublin on 6th May 2016.
This talk covers:
- the tooling issues facing responsive designers
- the pain points facing responsive web developers
- and the pitfalls in production.
Read more on 'Responsive Design from problem to production' on my dev blog:
http://j.mp/ResponsiveDesigners
Report
Share
Report
Share
1 of 46
More Related Content
Similar to Responsive Design from problem to production
Responsive Websites and Grid-Based Layouts by Gabriel Walt AEM HUB
The document discusses Adobe Experience Manager's capabilities for responsive web design. It provides an overview of responsive vs adaptive design and how AEM allows editing responsive layouts through a grid system. It then details how to set up responsive editing in AEM, including enabling the responsive emulator, layouting mode, and responsive grid. It also covers developing components for the responsive grid and leveraging breakpoints.
Damien Antipa & Gabriel Walt - Adobe
In this session we will demonstrate how to configure a website project with the new capabilities of AEM 6.1. We show the benefit with the new integrated device simulator. How to leverage breakpoints and the new AEM grid system to create a new author experience with an elastic and responsive layout. We will discuss new tooling for web designers and component developers as well as new opportunities with the grid system.
The document discusses Adobe Experience Manager's capabilities for responsive web design. It provides an overview of responsive vs adaptive design and outlines AEM's features for editing responsive layouts through a grid system. The presentation covers how to enable responsive editing in AEM, including setting up breakpoints and using the responsive paragraph system. It also provides examples of how to leverage the grid for layouting, floating, breaking, nesting and hiding content across breakpoints.
1. PhoneGap is a framework that allows developers to build mobile apps using HTML, CSS, and JavaScript instead of platform-specific languages. It works by wrapping web pages in a native container so they can access native device functions and be deployed to app stores.
2. The document discusses PhoneGap features like access to device APIs, cross-platform deployment, and debugging tools. It also covers setting up the PhoneGap development environment and creating a basic "Hello World" app.
3. The document provides code examples for the app manifest, JavaScript to access device functions, and HTML/CSS pages. It also discusses PhoneGap advantages like multiple platform support and disadvantages like lack of support for all native features.
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
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/
Video at http://www.youtube.com/watch?v=HaJnhYPLvx0
Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do.
Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed.
The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely.
With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.
A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.
http://2013.drupalcamplondon.co.uk/session/death-themer
This document discusses responsive image techniques for adaptive web design. It begins by explaining browser sniffing versus feature testing, and recommends using feature testing to determine browser width, screen resolution, and bandwidth instead of browser sniffing. It then covers techniques like using background-size to control image sizes, SVG for smaller file sizes, and font-based solutions. The document also discusses server-side techniques like .htaccess rewrite rules and client-side techniques like picture and HiSRC. It advocates for a mobile-first approach using CSS media queries and a single pixel GIF for responsive images.
This document discusses various techniques for responsive images in web design, including browser sniffing versus feature testing, image sizes for different screen resolutions and bandwidths, and different implementation methods like .htaccess files, the <picture> element, and JavaScript libraries. It covers topics like using the browser width to determine layouts, screen resolution detection, and bandwidth testing. Workarounds discussed include using background images, SVGs, icon fonts, and compressed JPEGs. The document advocates a mobile-first approach and using CSS media queries to adapt designs based on screen size.
Presentation that I gave, along with coworkers Mark Sims and Mike Townson, at the Dallas Society of Visual Communications.
http://www.dsvc.org/events/working-lunch/10/2012
This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.
The document discusses several new features in Android N, including multi-window mode, drag and drop between activities, new notification templates, bundled notifications, direct reply for notifications, quick settings tiles, constraint layout, static and dynamic app shortcuts, and various other UI and API improvements. It provides code examples for implementing some of the new features and recommends resources for learning more about Android N.
The document summarizes key points from a conference on November 9-10, 2015 about Gradle builds, Android performance, healthy code bases, and trending Android topics. It discusses optimizing Gradle builds for speed, including configuration on demand, the Gradle daemon, and avoiding expensive operations. It also covers measuring build times for different project sizes and configurations. Additional sections provide information on creating custom Gradle plugins, using data binding in Android, and new tools like Jack, Kotlin, and Eddystone beacons.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
The document discusses adaptive images in responsive web design. It begins by explaining why the browser should be asked for information like screen resolution and bandwidth instead of doing speed tests. It then covers different techniques for adaptive images like using the browser width, screen resolution, bandwidth tests, feature testing vs browser sniffing, and CSS media queries. It also discusses workarounds like using the .htaccess file, <picture> element, and HiSRC plugin to serve responsive images. The document advocates for newer approaches that provide a simple user experience while allowing the browser and server to communicate information.
Matt Bailey discusses his journey in front end development from analog to digital. He describes the current state of his skills including responsive design, CSS preprocessors, frameworks and build tools. Bailey outlines his approach to project structure, dependency management and build systems using Grunt. He discusses future areas for improvement such as CSS namespacing, living style guides, and visual regression testing.
Measuring Web Performance - HighEdWeb EditionDave Olsen
Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This document discusses adaptive images in responsive web design. It begins by explaining why the browser should be asked about screen resolution and bandwidth instead of sniffing the browser. It then demonstrates using feature testing to determine browser width and screen resolution. Next, it covers issues with higher resolution retina displays like larger file sizes. The document proposes solutions like using .htaccess files, srcset, and JavaScript libraries to serve the appropriate image based on screen details without browser sniffing. It emphasizes that CSS media queries are still important for responsive design.
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.
The Evolution of CGM (Computer Graphics Metafile) Viewing. The objective of the workshop is to provide you with all the information required to implement our evolutionary technology.
Similar to Responsive Design from problem to production (20)
Right Choice Landscaping offers exceptional villa landscape maintenance servi...rightchoicelandscapi
"Right Choice Landscaping offers exceptional villa landscape maintenance services in Dubai. Our dedicated team ensures that your villa’s outdoor spaces are beautifully maintained, enhancing both the aesthetic appeal and the value of your property. We offer landscaping and Garden design services to commercial property owners and homeowners all over the UAE.
With Fear For Our Democracy I Dissent ShirtTeeFusion
In these times of increasing political polarization, many people feel a deep concern for the health of American democracy. If you're one of them, then the "With Fear For Our Democracy, I Dissent" shirt might be the perfect way to express your convictions.
https://dribbble.com/shots/24472856-With-Fear-For-Our-Democracy-I-Dissent-Shirt
Mastering Web Design: Essential Principles and Techniques for Modern WebsiteswebOdoctor Inc
Dive into the dynamic world of web design with our comprehensive guide that covers everything from foundational principles to advanced techniques. Whether you're a beginner looking to understand the basics or a seasoned designer aiming to refine your skills, this article offers invaluable insights. Explore topics such as responsive design, user experience (UX) optimization, color theory, typography essentials, and the latest trends shaping the digital landscape. Gain practical knowledge and actionable tips to create visually appealing, functional, and user-friendly websites that stand out in today's competitive online environment. Perfect for designers, developers, and anyone passionate about crafting compelling web experiences, this guide equips you with the tools needed to elevate your web design proficiency to new heights.
Professional Document Editing Services / Bank Statement EditingEdit Bank Statement
Need to modify any document? Look no further! I offer expert editing services for all types of documents, ensuring accuracy and confidentiality. Whether you need adjustments for bank statements, certificates, bills, pay stubs, or any other documents, I can help. Contact me now for prompt and reliable editing services!
Services Offered:
• PDF Editing: Professional edits for all types of PDF documents.
• Bank Statement Editing: Accurate and detailed edits for any bank statement.
• Document Editing: Comprehensive edits for all kinds of documents.
• Certificate Correction: Correct and improve certificates for clarity and accuracy.
• Bill Editing: Modify and correct any bill details as needed.
• Pay Stub Editing: Accurate editing of pay stubs for personal or professional use.
• Anything You Want to Edit: Custom editing services tailored to your needs.
#EditBankStatement #BankStatementEditing #Bank #StatementEdit #BankStatementEdit #BankStatementEditing #EditPaystubs #FinancialServices #Paystubs #CheckStubs #CheckStubService #BankServices #USA #Canada #Texas #California #America #UK #London #EditPDF #BankFiles #BankFinance #Statements #BankStatement #BankStatements #BankStatementLoan #EditBankStatementPhotoshop #EditBankStatementsFree #ExplorePage #Top #ForYou #FYP #Instagram #Documents #Edits #Photoshop #GraphicDesign #Illustrator #Illustration #Creative #Design #Designer #EditDrivingLicense #EditPaystubs #EditBankStatement #EditAnyDocument #Editing #Paystubs #PaystubServices #PaystubsNeeded #PaystubService #PaystubService #EditPDFOnlineFree #PDFToWord #PDFEditorFree #PDFEditorOnline #HowToEditABankStatement #FakeBankStatement #HowToEditBankStatementPDF #PDFEditor
Professional design drives turnover, return, and growth.
How to strengthen the power of design in your domain?
The key is to introduce, specialize, and organize critical capabilities.
Design capacity thus becomes a strategic advantage: valuable, unique, and organized.
Cases from construction, manufacturing, and servicing provide proof.
Achieve your ambition faster with our subject expertise.
Call on us for instruction, support, or execution.
Request a free quick scan* to start.
*) Ask for our conditions.
https://designimpulse.nl
42. Responsive Design for Designers
– Understand the dynamic grid to design responsively
– 2 designs that work as a single responsive design
– Use vector-based design tools
43. Responsive Design for Developers
– Understanding the design grid to merge separated
designs
– Responsive design with multiple device testing and live
reloading
– Web kit for responsive design
45. Attributions
• Android is a trademark of Google Inc.
• The Android robot is reproduced or modified from work created
and shared by Google and used according to terms described
in the Creative Commons 3.0 Attribution License
http://creativecommons.org/licenses/by/3.0/
“Responsive Design from problem to production”
There are so many devices running different platforms, screens sizes and resolutions (eg. ldpi mdpi tvdpi hdpi xhdpi xxhdpi)
Responsive web design was originally defined by Ethan Marcotte in A List Apart (May 25, 2010) as the way forward to address the needs of the users and the devices they're using.
http://alistapart.com/article/responsive-web-design/
There has been a great number of resources available dealing with the technical aspects of Responsive Web Design (RWD), but few encompass the entire process from design to development and production…
Also despite ‘Responsive Design’ being almost 6 years on (this talk was held 6th May 2016 at DECODED conference) there are still a number of limitations with Responsive Design as a process that causes issues with designer and developer workflow – especially if you are unaware of where the problems lie.
In this talk I will discuss Responsive Design for designers, web developers and the production process.
By highlighting the problems or pain points for designers and developers I intend to show an approach to Responsive Design that will help smooth out the bumps between the designer and developer workflow.
Finally, we will look at production whether deploying as a responsive website or as an responsive web app using Cordova.
If I was to share one truth from my time learning graphic design and all the years of experience as a designer, it would be; good design needs a good problem
Wherever we appreciate or see ‘good design’ … it’s because there was first a ‘good problem’
∴ a good problem solver is also a good designer.
We first have to be good problem solvers! (“Form follows function” etc…)
• This approach applies for designers and developers.
Remember to watch out for ‘red flags’:
- Clients / customers tend to talk about making things look good, professional, clean, easy to use, etc…
But its our job as designers to understand the problem - a ‘good design’ is not a style.
- Clients / customers tend to talk about features or technologies they want to use.
But its our job as developers to address the user / audience needs - a ‘good problem’ is not defined by a list of features.
An example ‘Design Process’
‘Design’ infers the need to solve a particular problem.
Therefore, it is most important to start with knowledge and thought. Knowledge to ask the right questions and thought to understand and identify the problem(s).
Ultimately the most important part of any process is the result…
∴ the ‘Design Process’ should be understood as a pattern to help replicate successful outcomes.
There are a lot of versions of the ‘design process’…
– I encourage you to define your own design process / pattern that enables you to deliver your best results!
For example - the common designer approach is to present 3 design concepts.
But according to this interview with Steve Jobs, Paul Rand refused to offer them any ideas, only the solution!
– YouTube video of Steve Jobs on Paul Rand: http://youtu.be/vJthkRrQcfo
Designers / Developers,
when it comes to Responsive Design… don’t be a pixel pusher!
Responsive design should not mean merely moving pixels around a screen, its about design.
Btw developers / product owners - don’t just ask your designer to make things look pretty.
Rather, challenge them to be a designer.
Sure, designers can make things look pretty, but that’s NOT design.
We need to aim higher – Be a problem solver…
Be a designer!
Think about customers / users
Find the problem(s)
Use design to solve the problem(s)
As designers it helps if we know how the production side of things operates.
For example with design for print if helps prevent mistakes in production if you know about 4 colour CYMK production and colour calibration, bleed, and design for common sizes. Eg. Design flyers for A6 size is cheaper to produce than a bespoke size.
It’s the same with responsive web, a designer will need to have a certain awareness and appreciation for the production aspect.
∴ designers for responsive web will need to know how things will operate / react under a dynamic grid system.
Also regarding design for responsive web apps there are various design guidelines available for each platform – so it’s good idea to know what all the guidelines are, but knowing why those guidelines exist is even better.
Designers are not required to get hands dirty with code – but they should play and experiment with dynamic grid demos out there!
* Demo Bootstrap responsive grid for designers *
Here are 5 awesome design apps – but there so many options, which is best to use?
In the early web design days I used to design static width web pages using Photoshop (pixel based tool)
But as the average desktop monitors got bigger we started seeing larger websites emerge. It became technically possible to present richer experiences with magazine-style panache. Because of this design for print influence that meant professional print design tools like Illustrator became superior for web design because of advanced print design features like grids and guides.
Over time I migrated to Illustrator (vector based tool)
• Vector based tools also make it easier to resize and scale graphics.
Now there is a new wave of digital design tools available to designers:
Sketch
Experience Design
But what tool is best to use for Responsive Design..?
Unfortunately, there are no professional grade responsive design tools!
Tip: Use the next best thing – choose the vector-based design tools.
The trouble with graphic design tools they lean heavily towards print and static art-board sizes – rather than digital and dynamic sizes.
Because design artwork doesn’t contain responsive data this results in extra work for the designer…
∴ 2 designs required
- Portrait (mobile) and landscape (tablet / desktop) designs are both required to generate a single responsive design page.
Example #1 of Responsive Design showing Sign-in page.
Beware of design differences due to revisions:
– you can’t design the two screens at the same time.
– these are two separate instances and changes in one file will not update the other.
– increased risk of design inconsistencies as separate designs may be done on different days.
Because of these issues there are some things that appear on the landscape (desktop) screen that don’t exist on the portrait (mobile) design page. But Responsive Design in terms of approach should be ‘all the things’ for any screen (although there can be certain instances where exceptions to the rule are required)
One possible benefit here is that as you design the same thing twice it will give opportunity to refine and enhance at the design stage.
Example #2 of Responsive Design showing Dashboard page.
Consider:
- Four column grid view to single column list view (reduced columns for portrait screen)
- Consistent accent colour for links – this will help users locate the action buttons as layout adapts from grid to list view.
- Hidden elements used sparingly (only when it can be justified)
Example #3 of Responsive Design showing Tutorial page.
Design for touch (mobile) first:
Support touch first as it requires a larger interactive area - buttons should have an min. area of at least 44px square.
Controls that use swipe gestures can use draggable alternatives on desktop (Surface is good example)
Example #4 of Responsive Design showing Main page.
Important observations:
This particular app’s function requires 1000’s of user selections therefore I am careful to avoid scrolling as much as possible. The optimised UX in this instance is a single tap per page, but less careful use of responsive grids in portrait view (reduced width) would have easily resulted in vertical scrolling before being absolutely necessary.
Use of image tiles to reduce page load time. (SASS code to be shown later)
Full bleed effect for extra large desktop screens. The design grid has a max width but backgrounds can extend beyond to give an illusion of full page width.
* Demo responsive web app *
As developers it helps we can wear a design hat!
Knowledge of design grid.
Beware of design limitations - you will need at least two designs from a designer. (Portrait & landscape aspect designs will be required to create a single responsive design)
The language of RWD is CSS.
• But CSS doesn’t not sit comfortably with designer / developer.
• HTML / CSS will need constant tweaking to get designs looking and working right!
∴ Responsive Web Design requires tools like BrowserSync to provide real-time feedback for design.
BrowserSync will also help with real device testing (essential for testing interaction on touch devices)
* Demo multiple devices with live reload using BrowserSync *
Responsive design web kit I like to use as a designer/developer:
Polymer – UI Kit for web
Bootstrap – 12 column responsive grid system. Bootstrap 3 has 4-tier, Bootstrap 4 has 5-tier grid system.
Sass – write less CSS which is easier to control. Uses include @media mixins for responsive design that can be nested with styles.
BrowserSync – live reloading for real-time design and device testing.
Gulp – automate builds for distribution. Watches for HTML, Javascript, and SASS/CSS changes and hooks into BrowserSync.
Tip: Use bower to manage client-side dependencies and npm to manage developer / testing dependencies.
Helps prevent 3rd party code being included with commits and this is good idea for source controlled projects:
- Smaller repro to clone
- Cleaner commits
- Faster code reviews
Bootstrap 3 default grid for ‘xs’ width
SASS @mixin media queries can be nested in styles so responsive design alterations can be written in context if you prefer.
NB: Bootstrap 4 will support SASS, but until then these definitions will come in handy.
Bootstrap 3 default grid for ‘sm’ width
Bootstrap 3 default grid for ‘md’ width
Bootstrap 3 default grid for ‘lg’ width
NB: Bootstrap 4 will add an extra ‘xl’ tier grid for extra large desktops.
You can use the HTML5 <picture> element,
but there are more options by using CSS background-image (eg. tiles, scaling and positioning options)
For single-colour / monochrome graphics consider creating custom font…
Icomoon.io creates font using vector graphics and generates the SASS for you.
It’s easy to use – like Font Awesome icons.
It’s important to compress all image assets for speedy page loading.
Especially with the increase of larger hi-res images being required for Retina / HD screens.
ImageOptim (Mac)
https://imageoptim.com/
File Optimizer (Windows)
http://nikkhokkho.sourceforge.net/images/FileOptimizerSetup.exe
For fast web site deployment or previewing you can setup an Azure Web App with local git repro.
- Create an Azure App Service
Go to Azure Web App settings:
- Deployment source > Local git repro
This will add info:
- Git/Deployment username
- Git clone url
In my case I use `gulp build` to generate a ‘dist’ folder with distribution version of the web app.
Setup procedure:
Navigate to the ‘dist’ directory
Create a local git repro in there, then add all files and issue a commit
Finally, configure local git with Azure git clone url
- Just push changes to upload
* Deploy web app demo *
Cordova will package web app for
iOS
Android
UWP
Tip: Cordova Asset Generator creates app icons and launch image assets for all platforms.
WKWebView – uses the same Nitro JavaScript engine as Safari.
- Available as Cordova plugin
Web view behaviours provide a good UX for websites. But this is not the case for hybrid responsive web apps.
Web view behaviours are inherited by default and if you want to provide app-like UX these must be removed.
* Demo Cordova (default) app with web view behaviours *
Web view behaviours can be disabled using Cordova config.xml to make a web app feel more app-like.
* Demo an ‘app-ified’ Cordova hybrid app *
Disables page spring / bounce effect on iOS, or wave effect on Android.
Apps don’t zoom when you double tap.
NB: Adding this viewport meta tag to disable zooming also solves the ‘click delay’ touch-based browsers (at least on Android, and should work on iOS WKWebView)
IE looks for CSS: { touch-action: manipulation } on elements
https://news.ycombinator.com/item?id=10389789
Apps don’t show a magnifying glass everywhere during a long tap and hold gesture.
NB: Side effect is force touch and long press is removed.
App’s don’t allow selection everywhere and can be disabled using CSS.
NB: What about form inputs!?
- If your web app contains form inputs then you can exclude those inputs using the :not() CSS selector (but I find it easier to switch everything off by default.)
For iOS “-webkit-touch-callout: none” disables the default callout shown when you touch and hold a touch target.
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout
Appium allows you to test hybrid apps across multiple devices / platforms using the same code.
* Demo of End to End testing with Appium *
Summary for designers:
– Understand the dynamic grid to design responsively
– Separate portrait and landscape designs that lend themselves to a single responsive design
– The advantages of using vector-based design tools
Summary for developers:
– Understanding the design grid to merge separated designs
– Responsive design with multiple device testing and live reloading
– Web kit for responsive design
Summary for production:
– App-ify web view behaviours using Cordova’s config and CSS
– Cordova WKWebView plugin for faster iOS web app performance