SlideShare a Scribd company logo
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Real-Life Responsive
Web Design
Vitaly Friedman
13/11/2014 • Rome, Italy
Vitaly Friedman, editor-in-chief

and co-founder of SmashingMag
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Mini-training: Personalization & Recommendation Demystified
Mini-training: Personalization & Recommendation DemystifiedMini-training: Personalization & Recommendation Demystified
Mini-training: Personalization & Recommendation Demystified

Recommendations are everywhere : music, movies, books, social medias, e-commerce web sites… The Web is leaving the era of search and entering one of discovery. This quick introduction will help you to understand this vast topic and why you should use it.

personalizationrecommendercollaborative filtering
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance

We’ll get deep in the well-known techniques for website’s performance (from Steve Souders and others) and how real mobile devices reacts to each one. Are mobile browsers compatible with CSS Sprites or with Lazy Load Script? What about inline images and canvas? What are the big differences between desktop and mobile web performance?

wpooptimizationandroid
Webdev battacherjee
Webdev battacherjeeWebdev battacherjee
Webdev battacherjee

Published by Althea Elfleda Tolentino McGregor, BlackBerry Dev Alpha, January 2012, Licensed Vendor for BlackBerry World App and Development, Social Media, Digital Content by BlackBerry Laws, Copyrights, Authorship, Commercial Rights and Compliance , Health & Safety Compliance, IP Laws Pioneer for Data Encryption, Global Entrepreneur, Global Sales and Social Media Networking, Global Vending, Attributed Use for all Global Resellers of BlackBerry Products and Services, Digital Content, Patent, Global Promotion for BlackBerry Apps Development and the Foundation for a Raving Tigers BlackBerry Business Solutions as per stipulations and agreements on policies and rights over use , print and distribution to re-distribution over corporations of Global Merchandising of Communication Devices that pioneers data encryption and Social Hubs as attributions to the hallmarks of BlackBerry Dev Alpha C into the market release version of the BlackBerry Z10 and BlackBerry Q10 as separate and treated as one unit of manufactured programming,from its concept to approval which must meet Blackberry standard for its release and hacked for its vulnerability on CrackBerry exclusive to both "Gods" and Demons" of this world of the Fruit-wares, called BlackBerry and these could be coded as well. Z10 and Q10. Written by: Althea Elfleda Tolentino McGregor, Blackberry Dev Alpha A to C, 2012 to present and 10% only addicted, for the love of GOD! No mercy until I get my millions and a private jet, a school or an intellectual law institution or many. I am the Pioneer of WORK IN MOTION FOR my Raving Tigers Business Solutions which is for micro/macro economic developments and dependent on consumerism as well as the provision of scholarships to increase revenues for BlackBerry in the deliverance of its goal for mobilisation of these technologies, as an integral part of the backbone of every struggling small business owners who only needs one device, a BlackBerry. © 2013 Research In Motion Limited, 295 Phillip St., Waterloo, Ontario, Canada, N2L 3W8. All rights reserved. BlackBerry®, RIM®, Research In Motion® and related trademarks, names and logos are the property of RIM and are registered and/or used in the U.S. and countries around the world.

the matrix factorlonewolf multimedia publishinsblackberry
Design Systems
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Architecture of a Modern Web App
Architecture of a Modern Web AppArchitecture of a Modern Web App
Architecture of a Modern Web App

The document discusses the evolution of web application architecture from static HTML pages to modern single-page applications. It describes early technologies like CGI and JavaScript that introduced dynamic content. Modern applications use JavaScript frameworks on the client-side to provide rich user interfaces while delegating data access and processing to RESTful services on the backend. The document advocates for a messaging-based architecture with modularized and tested client-side code, simplified views, and embracing both client and server responsibilities.

cujojscujospring
Blogging
BloggingBlogging
Blogging

The document discusses various topics related to blogging, including common blogging platforms like WordPress, Blogger, and Tumblr. It covers whether a blog should be for profit or not-for-profit, and whether it is better to have a hosted or non-hosted platform. The document also discusses using RSS feeds and how to market a blog, including focusing on objectives, creating a content calendar, and optimizing for search engines. Overall, the document provides an overview of fundamental aspects of planning and running a blog.

#mrk634wordpresshow-to
JavaScript
JavaScriptJavaScript
JavaScript

This document provides an overview of JavaScript, including what it is, why it's used, who created it, its components and objects. JavaScript is a scripting language used primarily for client-side web page interactions. It allows adding dynamic and interactive elements to web pages. Some key points covered include: - JavaScript is used to specify webpage behavior and enable user interaction/effects. - It was created by Brendan Eich at Mozilla and allows both client-side and server-side scripting. - Common JavaScript objects include Document, Window, Math, Date and String. - Events, functions, variables and tags like <script> are JavaScript components. - The Document and Window

javascriptintroductionbeginners
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010

The document provides an overview of web designing and internet marketing topics that will be covered in training sessions. Section A discusses web designing topics like internet infrastructure, HTML overview, web page editors, and creating web pages. Section B covers internet marketing topics such as digital communication, marketing through the internet, internet transactions, and new product development for the internet. The document lists learning objectives and basic reference texts for each session.

web integrated technologiesweb designing & internet marketing. internet infrastructure
Master SocialOPM Presentation from eAccountable
Master SocialOPM Presentation from eAccountableMaster SocialOPM Presentation from eAccountable
Master SocialOPM Presentation from eAccountable

The document describes social media marketing services from eAccountableInteractive. It discusses managing messaging across multiple online channels like Facebook, Pinterest, Twitter, LinkedIn, blogs and videos. The services include optimizing profiles, posting engaging content, running contests and managing interactions. Clients benefit from increased social signals, sales and customer relationships. Services are performance based and easy to use through a centralized management system.

social media marketingsocial media managementsocial media
PureFormulas.com- SocialOPM Presentation
PureFormulas.com- SocialOPM PresentationPureFormulas.com- SocialOPM Presentation
PureFormulas.com- SocialOPM Presentation

The document describes social media marketing services from eAccountableInteractive. It outlines their services including optimizing profiles on Facebook, Pinterest, LinkedIn, Twitter, Google+, and YouTube. They write blog posts and distribute content across multiple channels. Services also include offer management tools, contests, infographics, and video testimonials. The goal is to build followers, drive traffic to websites, and enhance consumer relationships through an easy to use and measurable social media strategy.

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Jquery mobile
Jquery mobileJquery mobile
Jquery mobile

This document provides information on jQuery Mobile, a JavaScript mobile development framework. It discusses some key characteristics of jQuery Mobile including being optimized for touchscreens, being cross-platform, lightweight, and using HTML5 and CSS3 standards. It also covers various jQuery Mobile components like pages, content containers, buttons, checkboxes and how to structure a basic jQuery Mobile page with headers, footers, and content sections.

mobilewebhybrid applicationjquerymobile
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere

The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes. It recommends taking a mobile-first approach, using fluid layouts and media queries to make content responsive. Key tips include starting small and resizing the browser, using Chrome's device mode to emulate different devices, and the matchMedia API to bind JavaScript to breakpoints. The overall goal is to provide an optimal viewing experience across all devices.

responsive web designhtml5mobile web
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013

Presented with Christian Ståhl Everyone is talking about responsive design. But are you really ready to bring SharePoint to mobile and tablets? While you may have an idea of what your site will look like when finished, there are many basic concepts and pitfalls that aren’t always outlined in the “How To’s”. In this session, we will go through foundational steps to planning a responsive SharePoint site including how to handle a hybrid content scenario that uses publishing and team sites. You will learn what tools and templates can make your life easier during design, build and testing. If you are excited about the capability of bringing SharePoint to any device but not sure where to start, check out this session to get the foundational understanding of the concept, best practices and examples to get you started.

responsive designrwdmicrosoft sharepoint
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Ap Ams Bill
Ap Ams BillAp Ams Bill
Ap Ams Bill

Jesse James Garrett: http://www.jjg.net/elements/ Bill Scott: http://looksgoodworkswell.blogspot.com/ UX design and Ajax design patterns gurus JJ Garrett and Bill Scott (Copyrights from Garret/ Adaptive Path and Scott/ Yahoo, 2003) Courtesy of Garrett and Scott, 2005.

Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern age

In the age of new trends in web design and CSS technologies like Flexbox and Grids, what do we need to think about when it comes to accessibility and CSS?

Smash.wordpress
Smash.wordpressSmash.wordpress
Smash.wordpress

This document provides an introduction to building a website using WordPress. It begins with introductions and explaining why WordPress is a good platform. It then covers choosing a domain name and hosting, installing WordPress, choosing and installing themes, and the anatomy of a website including sitemaps and wireframes. It also discusses blogs versus websites, setting up pages like the homepage, using plugins, basic HTML and CSS, and getting help. The document is a beginner's guide that aims to explain all of the essential steps for designing and building a basic WordPress website.

wordpressweb
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.

media queriesweb developmentcss3
Patacs wp.com slides_oct_2018_final3
Patacs wp.com slides_oct_2018_final3Patacs wp.com slides_oct_2018_final3
Patacs wp.com slides_oct_2018_final3

WordPress Websites for Everyone provides an overview of WordPress and how to build basic WordPress websites. WordPress is an open-source content management system that powers over 30% of websites and offers over 50,000 plugins and themes. The presentation discusses the WordPress.com model for getting started easily with a free website and recommends WordPress.com for beginners due to its simple dashboard and support community. It also covers basic steps for creating pages, posts, and designing the layout of a WordPress.com site. Upcoming changes to the WordPress editor called Gutenberg are mentioned, which aims to provide a simpler interface for building websites.

wordpresswordpress.comwebsite design
Jet Cooper: UX In Real Life
Jet Cooper: UX In Real LifeJet Cooper: UX In Real Life
Jet Cooper: UX In Real Life

The document discusses user experience (UX) design and provides examples of how UX can be applied. It outlines goals, actions, and states of mind to consider from a user's perspective. The document then gives tips on making experiences more intuitive through affordance, color, wayfinding, proximity and placement, and confirmation. Additional tips are provided for making things more simple, such as keeping designs light and unobtrusive, consistent, subtracting or concealing unnecessary elements, organizing content effectively, and considering aesthetic usability. It emphasizes that understanding UX allows one to see its influence everywhere.

yorkville media centreverne hosatish kanwar
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

WCSD-UI
WCSD-UIWCSD-UI
WCSD-UI

This document discusses the importance of user interface (UI), user experience (UX), and usability. It defines each term and explains that UI focuses on how a user interacts with a system, UX focuses on why the interaction is designed a certain way, and usability ensures the system can be used easily without training. The document then provides tips for developing a poor user interface and common UI mistakes to avoid such as inconsistent layout, fonts, and navigation. It also outlines best practices for developing a good UI like asking questions of users and being open to feedback.

Nice UX
Nice UXNice UX
Nice UX

This document discusses elements of nice user experience (UX) design. It is organized into four sections - solving problems, providing feedback, adding value, and creating unforgettable experiences. Each section provides multiple examples from companies like Google, Amazon, Twitter, and others that exemplify these UX principles through small but impactful design features and interactions. The overall message is that nice UX is achieved through addressing users' needs, keeping them informed, adding usefulness, and crafting memorable experiences.

smalluxdesign
What is a user experience designer
What is a user experience designerWhat is a user experience designer
What is a user experience designer

A user experience designer is part detective, observing how people use products; part creative, thinking of solutions and prototyping ideas; and part engineer, figuring out how to build digital products. They work on multidisciplinary teams including psychologists, designers, and developers to understand people's needs and create intuitive, enjoyable products and games.

user experience designuser experienceux
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Patty Toland, FilamentGroup, “Design Consistency for RWD”, https://t.co/Tb0q1gMwQS
Responsive Considerations
• Components



Flexible grid

Typography

Navigation

Accessible form controls

Carousels

Tabbed navigation

Responsive tables

Accordions

Media lists

Drop-downs

Pagination

Data tables

Buttons

Icon fonts 

• Strategy

Responsive images

Responsive typography

Accessibility architecture

Legacy browser support

i18n/l10n tolerance

Performance budget

Interaction/Animations

Responsive advertising 

• Strategy

Responsive images

Responsive typography

Accessibility architecture

Legacy browser support

i18n/l10n tolerance

Performance budget

Interaction/Animations

Responsive advertising 

• Layouts

Homepage layout

Subpage layout

Article index layout

Article layout

Product index layout

Product detail layout

Sign up flow

Checkout flow
• Components



Flexible grid

Typography

Navigation

Accessible form controls

Carousels

Tabbed navigation

Responsive tables

Accordions

Media lists

Drop-downs

Pagination

Data tables

Buttons

Icon fonts 


Recommended for you

There is no 'i' in UX.
There is no 'i' in UX.There is no 'i' in UX.
There is no 'i' in UX.

I thought I would share the slides from a UX presentation I did based on the Kano model, how it applies to UX principles and how the ownership of UX in any company can't be owned by one person called a UX designer.

user experienceproduct design.ux
UX Is Everywhere
UX Is EverywhereUX Is Everywhere
UX Is Everywhere

Our Senior User Experience Designer - Ahmed Saber discusses how UX designing is affecting everyday choices in our life.

web designuxgraphic design
What is UX?
What is UX?What is UX?
What is UX?

An introduction to UX - User Experience. Where does UX come from, what are the benefits of using it, and how can it be applied to day to day agency work? Understanding the User Centred Design process and how UX is an integral part of every piece of digital work that is produced.

insightuser experienceinternet
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

The Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI DesignThe Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI Design

My talk on UI Design at Adobe Flash Platform Summit 2011 in Bangalore. With great power comes great responsibility. This dialog from Spiderman holds true in the context of what developers can do to UI/FE today with the power of RIA technologies like Flex/Air. The User Interface or the Front End realm has been ever evolving. With each step that technology takes towards sexier and delightful experiences, the challenges to create simplistic good user interface experiences seem to be growing exponentially. This session will start by covering the basics of good and bad design experiences and cover how important it is to understand good design principles in the context of RIA technologies like Flex/Air.

user experience designudaymsadobe
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?

2010 年 我發表了搏來客行銷(Inbound marketing),經過五六年的淬鍊,世界又多許多改變,在社群行銷即將成為歷史的時代,我們應該把問題再往前推一步,讓產品與服務自己說話,我認為這是成長駭客行銷的原點,也是所有行銷把戲的原點。 有關我對 成長駭客行銷(growth hacker marketing) 的詮釋,細節可見: http://www.tw-inboundmarketing.com

inbound marketing搏來客行銷growth hacker marketing
UX in Real Life
UX in Real LifeUX in Real Life
UX in Real Life

It has been more than two decades since UX entered the industry as a new frontier; however many of everyday products still highly frustrate us.

mappingsconstraintsdon norman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...

Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Building Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 FrameworkBuilding Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 Framework

For more resources, see http://www.webvanta.com/bootstrap The Bootstrap HTML/CSS/JavaScript framework, originally created by Twitter, provides an outstanding starting point for building a custom website. It is built to modern HTML5 and CSS3 coding standards; it provides a variety of common user interface widgets; it establishes an attractive baseline for typography; and, best of all, it fully supports responsive designs that perform well on phones and tablets, as well as on desktops. In this webinar, Webvanta CEO Michael Slater and senior developer Charity Grace Kirk will explain how the Bootstrap framework works and how to use it as the starting point for your own sites. Topics covered include: Bootstrap's approach to responsive design and mobile support User interface components provided by the Boostrap CSS, including buttons, navigation bars, and responsive images The grid system, and how to use it to create optimized designs for all screen widths How to use Bootstrap's JavaScript library to create tabs, collapsible sections, carousels, alerts, and more without writing a single line of JavaScript code Techniques for customizing Bootstrap to make your site look and behave exactly how you want

twitter bootstrapbootstrapbootstrap 3
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev

This document provides an overview and comparison of WinJS and PhoneGap for developing Windows Store apps. It discusses the key components of WinJS like controls, layouts, animations and styling. It also explains how PhoneGap allows developing Windows Store apps using web technologies by providing access to native device APIs via a native web view. While WinJS and PhoneGap differ in their APIs, the document emphasizes they can both be used to create valid Windows Store apps and developers should choose based on preference and code portability needs. It encourages mixing frameworks freely as long as platform guidelines are followed.

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How

This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.

ryan doddciddsiteworx
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...

Responsive Web design challenges Web designers to adapt a new mindset to their design processes as well as techniques they are using in design and code. 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.

uxresponsive web designmobile
Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparison

This document discusses responsive web design and compares several frameworks that can be used to implement responsive design. It defines responsive web design and explains its benefits. It then describes four frameworks - Twitter Bootstrap, Foundation, Skeleton, and HTML5 Boilerplate. For each framework, it outlines key features and limitations. It concludes by comparing various aspects of the frameworks, such as grids, plugins, licensing, and recommending Twitter Bootstrap for most use cases due to its balance of features and lightweight code.

frameworksresponsive web designgrids
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation

Presenting the 2012 Station Four web redesign to AIGA's morning leak. The presentation reviews the design, site structure, and technologies involved.

webdesign redesign design branding graphicdesign
KATHY ZHANG_3
KATHY ZHANG_3KATHY ZHANG_3
KATHY ZHANG_3

- Over 6 years of experience as a front-end web developer specializing in UI design using technologies like HTML5, CSS3, JavaScript, jQuery, AngularJS, and Bootstrap. - Extensive portfolio including projects for financial, ecommerce, and banking clients, developing responsive Single Page Applications. - Expertise in UI development, testing, and working with full SDLC processes and version control tools like Git.

OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator

The document discusses two open-source projects from Intel called Rapid Interface Builder (RIB) and Web Simulator that can be used to develop and debug HTML5 apps. RIB allows quick prototyping of web app UX through a drag-and-drop interface. Web Simulator allows debugging mobile web apps in Chromium by simulating device events and APIs. The document also discusses sample HTML5 apps created by Intel to demonstrate new web technologies and Intel's involvement in web standards.

intelhtml5web apps
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Smart URL Design

Recommended for you

Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)

Covers the following contents. Objective of this seminar Backgrounds Issues Google’s Issue Web site Owner’s Issue Mobile SEO Measures

mobile seoseoweb marketing
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.

ethan marcotteresponsive web designhtml
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design

The web has come a long way. One of the great features of the modern web is responsive web design (RWD). RWD allows developers to create a single web client for all devices & platforms. This presentation is an introduction to key concepts developers need to understand in order to start implementing responsive web design.

responsive web designcss3html5
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
http://global.burton.com
/on/demandware.store
/Sites-Burton_GLOBAL-Site
/default
/Home-Show
/index.html
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices

A brief presentation for the Missouri State Digital Media Developer group on cutting through the hype surrounding mobile development and responsive design.

responsive designmomedia query
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season

Retail TouchPoints' 2014 Holiday Connected Consumer Series session presented by Instart Logic #HolidayCCS

instart logicretail touchpointsmobile shopper
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom Robertshaw

Responsive design has been around for a few years in terms of the rest of the web but it is only recently pervading eCommerce. We will confirm to you why it’s so important in the expanding omni-channel world. We will then proceed to share our techniques and experiences for building responsively designed stores as standard

magentoweb designresponsive
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
What fascinates me are a few things:
how something that got its roots in late
19th century over a course of the
century turned into something as
established as Teletext. What does it
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Eureko frameworks
Eureko frameworksEureko frameworks
Eureko frameworks

This document provides an overview and comparison of popular front-end frameworks including Angular, React, and Vue. It discusses what front-end and back-end development entail. It then covers Single Page Apps versus Multiple Page Apps. The document outlines pros and cons of each framework as well as considerations for when to use each one. Key factors include project complexity, team expertise, performance needs, and time constraints.

webfrontendsoftware development
Responsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at ScaleResponsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at Scale

Scott Jehl of Filament Group discussed building responsive and responsible websites. He advocated for a layered approach using progressive enhancement. This involves a basic mobile-first experience enhanced for newer browsers. Images and layout adapt to different screensizes using responsive design principles. Accessibility, performance, and usability were highlighted as key areas of responsibility.

responsive designboston globefilament group
Delightful UX
Delightful UXDelightful UX
Delightful UX

The document discusses responsive design and user experience best practices. It covers topics like content choreography, designing for all screen sizes and devices, optimizing performance through techniques like optimistic interfaces, designing for extremes rather than averages, and creating delightful user experiences. It also provides examples of responsive newsletters and lessons from redesigns like the UK government website Gov.uk. Key takeaways include considering all types of users, prioritizing content over design, faking performance to improve perception, and integrating small kindnesses to keep users engaged.

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)

Responsive Design is the buzz in design, but as we all know, design is only part of the story. With the arrival of the HTML5, CSS3 and javascript triumvirate we can no make truly immersive mobile and desktop browser experiences. Coupled with modern PHP web application practices, your web app will feel and act closer to a native app, at a fraction of the cost. In this presentation, we'll dive into designing your modern web application to take advantage of as much of the platforms' limitations and advantages. Sure, you can't use the camera, but in many cases can use the accelerometer, and it'll always be granted to look right, any angle you look at it! These days, there's no excuse for not having a "mobile version" when all you need is one site that can transform itself to suit the device!

responsive designweb design and development
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx

The document outlines a summer training presentation for a Disney Plus Hotstar clone project using HTML, CSS, and JavaScript. It includes an introduction to key topics like web programming, HTML, CSS, JavaScript, and GitHub. It then describes the Disney Plus Hotstar clone project, which recreates the website homepage using a navbar, search box, sliding content carousel, movie cards with hover effects, and video playback on hover. The document concludes with references used in the project research.

Marc Fonteijn - How we tackle the future
Marc Fonteijn - How we tackle the futureMarc Fonteijn - How we tackle the future
Marc Fonteijn - How we tackle the future

Currently we’re experiencing the consequences of what happens when solutions are put into the world without first thinking about the implications for society. As a design community we are all deeply involved in this process. Which means that we have the big responsibility to design a better world for our future generations. With new disruptive technologies quickly entering our daily lives we can choose to continue being bystanders or to take the lead this time. When we decide to lead it’s not going to be the tools or methods that help us design solutions that stand the test of time. It’s our proven set of values and approach. In this talk you’ll see practical examples of how these values and approach play out in the world of service design. Designing solutions for a better world isn’t rocket science, it’s actually quite simple. You just have to be human.

#design#wudrome2019#wudrome
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Progressive Reduction
“
Your proficiency in a product
will decay over time without
usage. As such, this proficiency
is reflected in experience decays
over time. These decays should
be avoided at all costs.






— Allan Grinshtein
Progressive Reduction
• Usability is a moving target; users get

smarter at a product as they keep using it.
• An interface should adapt and enable users

to become more efficient at using it.
• Idea: change the UI as the user moves
through different stages of proficiency.

Recommended for you

Marilia Moita - What if smart cities were people centered
Marilia Moita - What if smart cities were people centeredMarilia Moita - What if smart cities were people centered
Marilia Moita - What if smart cities were people centered

Smart cities will be the standard of urban living, according to the United Nations… but are your needs, as a citizen, being considered? In this talk, we will reflect, together, on: Why do smart cities need to become people centered? What is really being transformed in the city? How can people become the center of this transformation? Imagine yourself, living in a city, in 20 years from now… – Where more than half of the world’s population shifted from rural to urban areas… …and you will live among them. – Where hundreds of trillions of dollars/euros have been spent on revolutionary initiatives to change infrastructure, digital technology and interconnected intelligent networks… …and your data will be its fuel. – Where smart cities are the standard of urban living… …and your needs were not considered? These first part of the statements are not product of your imagination, they are the top three projections from the United Nations for urban living by 2050, so it is important to think about them (or start taking some action).

#design#wudrome2019#wudrome
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humansMaria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans

Lavoriamo a SoftHand Pro, una mano robotica per uso protesico progettata dall’Istituto Italiano di Tecnologia e dal Centro “E. Piaggio” (UNIPI). In che modo l’usabilità ha a che fare con la progettazione di una protesi? Spiegherò il mio lavoro di designer all’interno di un team di ingegneri. Il mio approccio considera gli aspetti estetici ed ermeneutici che si trasformano in linee guida di progettazione per tutto ciò che concerne l’aspetto manuale. Facciamo test ed esperimenti al fine di migliorare la soddisfazione dell’utente, senza tralasciare gli aspetti ergonomici. Anche per questo gareggiamo al Cybathlon, la manifestazione organizzata dal Politecnico federale (ETH) di Zurigo. Infine, ma non di minore importanza, va detto che teniamo conto anche del mercato e -attualmente- SoftHand Pro è la più robusta, leggera ed economica mano robotica mai progettata!

#design#wudrome2019#wudrome
Charlotte Davies - Researching Voice UX
Charlotte Davies - Researching Voice UXCharlotte Davies - Researching Voice UX
Charlotte Davies - Researching Voice UX

This document discusses UX design research for voice assistants. It provides examples of techniques used for testing voice assistants like Alexa and Google Home including Wizard of Oz testing, late stage usability testing, and contextual research. Wizard of Oz testing involves understanding what users will say and do without a functional prototype. Late stage usability testing identifies issues with misheard utterances, timing, and technical behavior. Contextual research explores the context of use and user behavior over time. The document advocates applying design principles for voice like asking clear questions and providing a limited number of responses.

#design#wudrome2019#wudrome
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Progressive Reduction
• Every UI regresses without usage. For major
features, track and observe their usage.
• Create a proficiency profile for every user;

as a feature is used more, start reducing the
“hand-holding” in a series of levels.
Progressive Reduction
• Assign a proficiency level to each feature and
design its variations for each level.
• If a user doesn’t use a feature for a long time,
UI regresses back to level 1.
• If a user uses a feature more, UI keeps
increasing levels to the “advanced” mode.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Filippo Perlini - From Real to Unreal and Viceversa
Filippo Perlini - From Real to Unreal and ViceversaFilippo Perlini - From Real to Unreal and Viceversa
Filippo Perlini - From Real to Unreal and Viceversa

Oggi molte aziende sono alla ricerca della giusta formula per l’innovazione, una soluzione preferibile per guardare al futuro. Ci sono molti modi per arrivare a soluzioni ma come disse Carveth Read: “È meglio avere vagamente ragione che essere perfettamente in torto”. Questa è la ragione per cui abbiamo deciso di affrontare questa corsa verso l’innovazione, ispirandoci a metodi non convenzionali come il Fictional, Critical e Speculative Design. Secondo noi, anche quando i clienti sono alla ricerca di innovazioni dirompenti, abbiamo notato che spesso è difficile per loro staccarsi dalla loro realtà attuale e dai vincoli di sviluppo. Perciò abbiamo deciso di provare un approccio speculativo per allontanarli da un’attitudine legata al compito da eseguire per abbracciare l’ignoto. In questo talk vogliamo condividere il modo in cui, a Digital Entity, stiamo iniziando a usare le metodologie legate allo Speculative Design, per ispirare e provocare i nostri clienti a confrontarsi con il futuro in modo diverso affinché siano ideatori di un mondo in cui le persone vorrebbero vivere.

#design#wudrome2019#wudrome
Nadia Piet - Design Thinking for AI
Nadia Piet - Design Thinking for AINadia Piet - Design Thinking for AI
Nadia Piet - Design Thinking for AI

Questo talk è un invito a designer e innovators di tutto il mondo a partecipare, sfruttando le opportunità e affrontando le sfide dell’intelligenza artificiale per creare human(ity)-centered applications e significative user experiences. Partiremo con un corso intensivo sull’intelligenza artificiale e il machine learning, poi ci interrogheremo sul ruolo dei designer, esplorando alcuni aspetti critici della progettazione, su come applicare le nostre competenze di designer per avvicinare l’IA a valori sociali, economici e per l’utente. Infine presenteremo una panoramica pratica di come utilizzare il design thinking process che conosciamo e condurlo a quello meno familiare dell’intelligenza artificiale. E allora scopriamo, definiamo e progettiamo futuri desiderabili per l’intelligenza artificiale!

#design#wudrome#wudrome2019
Roberta Tassi - Future Skill sets
Roberta Tassi - Future Skill setsRoberta Tassi - Future Skill sets
Roberta Tassi - Future Skill sets

Per affrontare le sfide di oggi e di domani (dai cambiamenti climatici all’instabilità economica, politica e sociale), i designer devono acquisire nuove competenze per gestire tutte le possibili variabili. Così come negli ultimi vent’anni abbiamo imparato a gestire l’innovazione con un approccio Human-centered, diventando esperti nella prototipazione e nello sviluppo di nuovi servizi ed esperienze digitali, ora ci viene chiesto di andare oltre. Nel talk Roberta contestualizzerà, ed esplorerà, alcune di queste nuove competenze come il system thinking, la machine empathy, la behavioural psychology e il dramaturgy e organizational design. Si discuterà la teoria e la pratica (abilità necessarie e la loro applicazione pratica all’interno di casi reali). Ad ispirare il talk è il suo libro recente #servicedesigner, che parla delle competenze che un service designer dovrebbe avere e inizia a volgere lo sguardo verso gli sviluppi futuri.

#design#wudrome#wudrome2019
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Dee Scarano - Creating Better Products, Faster with Design Sprints
Dee Scarano - Creating Better Products, Faster with Design SprintsDee Scarano - Creating Better Products, Faster with Design Sprints
Dee Scarano - Creating Better Products, Faster with Design Sprints

Speech of Dee Scarano, Product designer and lead Design sprint for AJ&Smart, at World Usability Day Rome 2018. An introduction of Design Sprint methodology.

design thinkingaj&smartusability
Carlo Frinolli - Welcome #WUDRome2018
Carlo Frinolli - Welcome #WUDRome2018Carlo Frinolli - Welcome #WUDRome2018
Carlo Frinolli - Welcome #WUDRome2018

The document discusses the Fifth Edition of World Usability Day Rome (WUDRome) on November 8-9, 2018. It thanks sponsors and participants for their contributions in making WUDRome possible. Several slides focus on basic usability principles like effectiveness, efficiency, and satisfaction. Other slides discuss the importance of understanding user needs, creating trust in relationships, and how design is a political act that can generate change.

designdesign thinkingusability
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...

Tra le tante “user experience” che è possibile progettare oggi in Italia, una più di altre necessita di un intervento di design forte: quella della salute. “Sanità” e “Salute” sono ai due poli di un sistema entro cui si muovono elementi molto alti e distanti dall’utente, così come alcuni lui molto più vicini, alle volte personali. Questo sistema è intricato, stratificato, alle volte inutilmente burocratizzato e ingiustamente povero di risorse. Nonostante questo, la sua incredibile capacità attrattiva muove numerose e affascinanti competenze che non appartengono più solo ed esclusivamente alla medicina, ma spaziano fino ad incontrare il Design. E nonostante tra gli addetti ai lavori vi siano figure dalle abilità infinitamente complesse, è proprio al Designer che viene sempre rivolta la stessa identica domanda: ma quindi che fai? “Fare” è la risposta, che non vuol dire solo “progettare”, bensì prima attivarsi per creare attorno a sè quelle condizioni di fertilità che gli permettano di essere accolto, e quindi di stare e arricchire il clima culturale di un settore in cui il suo contributo è cosa nuova, mai vista. Qualcuno ha colto la sfida, come il Centro Medico Santagostino, presente sul territorio milanese con una rete di poliambulatori specialistici, che nel 2016 ha deciso di creare da zero di un dipartimento di Design con l’obiettivo di migliorare l’esperienza di salute dei suoi utenti, trasformandola in una relazione di fiducia. Fanno seguito strutture più complesse, come l’Istituto Clinico Humanitas o il San Raffaele, sempre a Milano. Il momento è adesso: al designer che vuole affrontare oggi il mondo della sanità è richiesto di osservare dinamiche sociali, economiche, politiche, e scientifiche e di sapersi relazionare con esse in modo etico, per poter davvero progettare una migliore qualità di vita.

uxuihuman centered design
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Designing for Extremes
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
“
We have clients come to us and
say, “We know our average
customer. She’s female, 34 years
old, with 2.3 kids…” But what we
really need to do to design well,
is to look at the extremes…






— Dan Formosa, “Smart Design”

Recommended for you

Vincenzo Di Maria - User friendly & abuser unfriendly
Vincenzo Di Maria - User friendly & abuser unfriendly Vincenzo Di Maria - User friendly & abuser unfriendly
Vincenzo Di Maria - User friendly & abuser unfriendly

Where does the responsibility of a designer end? When does the freedom of users, misusers and abusers begin? Can we design safer digital environments that enable people, allow to be hacked but not to be cracked by criminal intentions? Is cyber-bullism a design problem? Lessons learned working at Design Against Crime Research Centre in London. Exploring the dark side of creativity and the power of design in encouraging behaviours and preventing criminal activity.

uxuihuman centered design
Simone Borsci - Deceptive design, user experience and trust
Simone Borsci - Deceptive design, user experience and trustSimone Borsci - Deceptive design, user experience and trust
Simone Borsci - Deceptive design, user experience and trust

Practitioners suggest that trust toward systems (TTS) could be shaped by design. For instance: - a product that appears (even before the usage) usable and useful is expected to generate a high level of post-use TTS; - aesthetically pleasing products may affect people pre-use TTS – i.e., people tend to trust aesthetically designed product more than less pleasant product. Manufacturers may design trust as part of the experience with a product even before end-users commence using their technology or service by strategically communicating, and make visible and recognizable certain features or elements of the design over others (less appealing) characteristics. Literature suggests that TTS: - is a measurable set of beliefs; - is built throughout the relationship between people and systems; - depends on the cumulative experience with specific systems; - correlates with the perceived qualities of a product; - affects people expectations of use toward a large spectrum of systems. People often use their experientially acquired heuristics and expectations to take decisions in a ‘quick and dirty’ way, and this may bring to adaptive misbeliefs i.e. decision taken on false or biased presumptions. Concurrently, manufacturers apply design and communication techniques to highlight certain, very appealing, characteristics and information whilst hiding other, less appealing, characteristics, thus providing a set of design-driven presumptions to the end users. This may affect a person’s decision to trust a technology and end-users may decide to buy or use a piece of technology which could appear more trustworthy than it actually warrants. As a consequence of the design and communication techniques, users may be attracted to buy a product before its use because they believe that the system is well designed, reliable and is provided with features in line with their needs, even when this system is not trustworthy. This dark side of trust will be the focus of this talk. By rely on the current studies on trust a definition of TTS to bridge the concept of trust and experience will be proposed. Moreover, preliminary data on an ongoing international study on trust toward healthcare device for home use will be presented to highlight the importance of trust before the use of high risk tools selected and handled by lay users.

uxhuman centered designui
Pietro Gregorini - Solo in Cartolina: creativity for change
Pietro Gregorini - Solo in Cartolina: creativity for changePietro Gregorini - Solo in Cartolina: creativity for change
Pietro Gregorini - Solo in Cartolina: creativity for change

“Solo in cartolina” nasce all’inizio dell’estate 2018 da una chiacchiera da bar e in pochi mesi diventa una campagna nazionale, un contest e un’azione di advocacy che chiama alle arti i creativi italiani per prendere posizione sul tema sbarchi e naufragi nel Mediterraneo. “Le ONG che vogliono salvare i migranti in mare vedranno l’Italia solo in cartolina” diceva a luglio il Ministro dell’Interno. Con 10.000 cartoline gli hanno risposto i designer e gli artisti di tutta Italia, inondando la buca delle lettere del Viminale con il loro dissenso. Da un grande (o piccolo) portfolio deriva una grande responsabilità, soprattutto in tempi come questi, in cui forme di espressione e protesta creativa sono rari punti di luce all’orizzonte.

uxhuman centered designui
“
...the weakest, or the person with
arthritis, or the athlete, or the
strongest or the fastest person.
Because if we really understand
what the extremes are, the
middle will take care of itself.






— Dan Formosa, “Smart Design”
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Matteo Cadeddu - Change.org: human centered change
Matteo Cadeddu - Change.org: human centered changeMatteo Cadeddu - Change.org: human centered change
Matteo Cadeddu - Change.org: human centered change

Change.org, con oltre 8 milioni di utenti in Italia, è la più grande piattaforma di attivismo online del nostro paese e nel mondo. Ogni giorno persone da tutto il pianeta si mobilitano per provare a cambiare quello che gli sta a cuore. E Change.org lavora per mantenere in piedi il ponte più facilmente percorribile tra chi ha piccoli e grandi cambiamenti da proporre e chi ha il potere di realizzarli. Siamo riusciti a rendere libero e gratuito un prodotto e un servizio globale, senza impattare o limitare l’esperienza dell’utente che non può o non vuole contribuire economicamente. Ma come fa Change.org, in un mondo in cui sta aumentando la polarizzazione delle idee, a rimanere aperta e indipendente? Chi sono veramente i buoni e i cattivi? La piattaforma è pensata per dare voce a tutti, partendo da chi non ne ha. Quando le persone si uniscono per una causa, non c’è niente che non possa essere realizzato.

uxhuman centered designui
Lorenzo Fabbri - Le parole sono importanti
Lorenzo Fabbri - Le parole sono importantiLorenzo Fabbri - Le parole sono importanti
Lorenzo Fabbri - Le parole sono importanti

Non c’è bisogno di attendere la diffusione delle interfacce conversazionali per riconoscere l’importanza del linguaggio verbale nel design di un servizio. Ecco cosa possono fare gli ux writer, i tech writer e i content designer per arginare il diluvio di scorrettezze, ingenuità, cattive traduzioni, duplicazioni dannose, arcaismi e inutili complicazioni linguistiche da cui siamo sommersi ogni giorno. Ed ecco i vantaggi di integrare efficacemente il linguaggio verbale all’interno di un design system. Perché, come diceva qualcuno: “Le parole sono importanti”.

uxhuman centered designui
Katy Arnold - Building trust in public service delivery with human centered d...
Katy Arnold - Building trust in public service delivery with human centered d...Katy Arnold - Building trust in public service delivery with human centered d...
Katy Arnold - Building trust in public service delivery with human centered d...

Over the last few years, the UK government has been modernising service delivery using human centred design. We’ve learned what happens when services are not designed from the users perspective and we’ve seen the impact this has on people’s lives. For those of us working to redesign government services we know have an opportunity to design well, to design for good. Part of that involves giving large complex organisations the tools they need to manage services which are used by millions of people. Mostly it involves building trust and transparency, and re-setting our relationship with the public because good services, are efficient as well as humane.

uxhuman centered designui
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Designing for Extremes
• Average user is an artificial, static
representation of users that don’t exist.
• Real users change constantly, reaching
different positions, roles and contexts.
• Idea: optimize for edge cases first, then
converge towards more common cases.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...
Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...
Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...

Nel 2016 Federica Fragapane ha intervistato un gruppo di richiedenti asilo arrivati in Italia, raccogliendo informazioni e dati sul loro viaggio, con l’obiettivo di visualizzare e condividere le loro esperienze su «The Stories Behind a Line», una narrativa visuale sulle rotte dei sei migranti. Il talk si focalizzerà sul processo dietro al progetto, una combinazione di visual storytelling e data visualization finalizzato a riportare le storie personali legate all’argomento. L’inizio e l’evoluzione del progetto saranno affrontati nell’ottica di capire come visualizzare piccoli dati personali può fornire un punto di vista dal quale provare a riflettere sul tema migrazione e che può generare comprensione e empatia.

uxhuman centered designui
Cennydd Bowles - Future Ethics
Cennydd Bowles - Future EthicsCennydd Bowles - Future Ethics
Cennydd Bowles - Future Ethics

Technology is never neutral: it has inevitable social, political, and moral impact. The coming era of connected smart technologies, such as AI, autonomous vehicles, and the Internet of Things, demands trust: trust the tech industry has yet to fully earn. This session will illuminate the ethical questions of emerging technologies and challenge designers and engineers to create more thoughtful, positive products for future generations.

uxhuman centered designui
Alessandra Petromilli - VUI: Design Patterns and Challenges
Alessandra Petromilli - VUI: Design Patterns and ChallengesAlessandra Petromilli - VUI: Design Patterns and Challenges
Alessandra Petromilli - VUI: Design Patterns and Challenges

Le Voice user interfaces hanno sempre più impatto sulla nostra vita quotidiana: sui nostri cellulari, nelle nostre case e negli uffici. In tutto il mondo le persone si stanno abituando a parlare con: Siri, Google Assistant, Google Home, Alexa, Cortana e Bixby. Le tecniche e le metafore proprie delle graphical user interfaces non si applicano al mondo del voice. Il VUI design deve essere basato sulla “conversazione”, il primo sistema di comunicazione che abbiamo imparato e anche quello che conosciamo meglio. Come si può quindi progettare “for good”? Alessandra ci racconterà quali siano le sfide legate al design di interfacce conversazionali e quali siano le metodologie da adottare quando ci si approccia a questo mondo.

uxhuman centered designui
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Skeleton Screens
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...
Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...
Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...

We’re used to think we need to design devices or interfaces that help the user achieve a goal without any friction. Under this “Don’t make me think” motto, even if we call it a Human Centred Design, sometimes we forget to take into consideration how the human brain really works. When we perceive that a user is thinking differently than we expected we call it a bias. So bias has become another word for error, but a kind of error which existence we are often not willing to accept and, moreover, an existence we unconsciously deny. The real error, though, lies in this negation and we cannot have a true Human Centred Design until we acknowledge such behaviours as normal, good and not evil.

uxhuman centered designui
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdfHill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf

A book on strategy design.

strategy
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe

Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Skeleton Screens
• Good feedback focuses on the progress;

keeps updating current state to ease anxiety.
• Blank screens are user experience gaps that
disrupt user experience. Progress bars focus on
the waiting; focus on the progress instead.
• Idea: minimize gaps to reduce friction with
“seamless” transitionsand skeleton screens.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe

Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe

2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708

はがき

Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf

A visual identity is the heart and soul of a place, embodying its unique character and heritage. By carefully preserving this essence, we can ensure that new elements blend seamlessly, honoring the past while embracing the future.

designarchitectureresearch
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .

在美洲杯投注网站,你会发现数之不尽的在线博彩机会,包括世界各地的精彩体育赛事以及绝佳的赔率。此外,美洲杯投注网站还会为你提供诸如赌场、宾果和扑克等在线游戏以及各种各样的奖金优惠,包括美洲杯投注网站的免费投注。无论你是忠实的足球迷,或者是二十一点的专业玩家,在这里都可以找到你最感兴趣的投注市场或游戏。 [博彩app]http://www.khznoise.net [澳门新葡京博彩]http://www.tjbcsongshui.com [利记]http://www.block-crypto-trader.com [yzc888亚洲城]http://www.f-tkn.net [威廉希尔中国]http://www.lifewithlambo.net [欧洲杯小组赛赔率]https://medium.com/@arcosarturo900/%E5%8D%81%E5%A4%A7%E6%AC%A7%E6%B4%B2%E6%9D%AF%E5%B0%8F%E7%BB%84%E8%B5%9B%E8%B5%94%E7%8E%87%E5%B9%B3%E5%8F%B0-%E5%85%A8%E7%90%83%E5%8D%81%E5%A4%A7%E6%AC%A7%E6%B4%B2%E6%9D%AF%E5%B0%8F%E7%BB%84%E8%B5%9B%E8%B5%94%E7%8E%87%E6%AD%A3%E8%A7%84%E5%B9%B3%E5%8F%B0-3965d8f0b6a1 [欧洲杯买球正规平台]https://ouzhoubeimaiqiuzhengguipingtaiouzhoubeimaiqiu.quora.com [欧宝体育]https://medium.com/@ereklejerson856/%E6%AC%A7%E5%AE%9D%E4%BD%93%E8%82%B2-%E6%AC%A7%E5%AE%9D%E4%BD%93%E8%82%B2%E5%9C%A8%E5%93%AA%E9%87%8C%E6%8A%BC%E6%B3%A8-%E6%AC%A7%E5%AE%9D%E4%BD%93%E8%82%B2%E5%9C%A8%E5%93%AA%E9%87%8C%E6%8A%95%E6%B3%A8-%E7%BD%91%E5%9D%80-ac44-net-23cf9c5159f6 [美洲杯比赛投注官网]https://vimeo.com/966321078 [2024欧洲杯竞猜]https://vimeo.com/964352335

美洲杯投注网站
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)

“Fear and Faith” contrasts the different effect of each of these, showing the quality of faith as opposed to the emotion of fear.

inspirationalslideshows
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design IdeologiesGender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies

This PowerPoint presentation offers a comparative analysis between a female and a male architect, focusing on their ideologies, approaches, concepts, and interpretations for a mixed-use building project. This study prompts a reconsideration of architectural inspiration and priorities, advocating for gender equity and cultural anthropology in architectural design.

gender equity in architecturecultural anthropologyarchitectural priorities
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG

The Ukrainian and German journalist Rostyslav Kasyanenko has dedicated himself to genealogical research and heraldry. Originally Ukrainian, now living in Munich (Bavaria) he working in Ukrainian Free University (Est. 1921) as archivist. Curator of Heraldic Teams, Member of Ukrainian Heraldry Society (UHS) R.Kasyanenko is Deviser of the Family and Municipal Coat of Arms and Author of the exhibition concept project: “Maritime flags and arms of the Black Sea countries vs. Mediterranean: what has changed in 175 years?” Author of scientific articles (2023-24): Parallels between the meaning of Symbol and Myth according to Hryhorii Skovoroda and heraldic systems Heraldry as a marker of evolution of national identity in Ukraine and Slovakia: from the Princely era to the "Spring of Nations" (XI-XIX centuries) Historical parallels in the formation of national awareness in Ukraine and Slovakia in modern times (1848-1992) Proto-heraldry of Kievan Rus': dynastic symbols of the Princely era, and how does the Palatine Lion relate to this? Symbols of the House of Romanovyches: the Bavarian influence in Ukrainian heraldry Participant of Scientific Conferences (2023-24): - XXХІІІ Heraldic Conference of the Ukrainian Heraldry Society, October 13, 2023, Lviv - International Conference “Slovak-Ukrainian Relations in the Field of Language, Literature, and Culture in Slovakia and the Central European Space”, University of Prešov, Institute of Ukrainian Studies, Faculty of Arts, 18-20.10.2023 - International Conference „The Past, Present, and Future of Heraldry: Universality and Interdisciplinarity“, Vilnius, 12-13.06.24 - International Conference "Coats of Arms as Weapons – Heraldic Symbols in Political, Dynastic, Military, and Legal Conflicts of the Middle Ages and Early Modern Period”, Alfried Krupp Wissenschaftskolleg Greifswald. According to the heraldist, he has worked with many heraldic artists over the years. However, he developed the ideas for all the coats of arms himself, except for his own. The case of the Kasyanenko (from the Shovkoplias clan) family coat of arms — featuring an audacious Cossack riding a rhinoceros — deserves special attention. "After all, one could talk about one's own crest, just like one's ancestors, for an eternity," he says.

coat of armsheraldrywappen
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...

"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.

Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe

Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Performance Strategy
“
There is no difference for the user
between a site being down and a
site being inaccessible due to
loading issues caused by blocking
resources or slow networks.


— Andy Hume

“Real-Life Responsive Redesign”, SmashingConf 2013

Recommended for you

Product Showcase Presentation |slides sample.pptx
Product Showcase Presentation |slides sample.pptxProduct Showcase Presentation |slides sample.pptx
Product Showcase Presentation |slides sample.pptx

This PowerPoint presentation demonstrates my beginner skills in creating product showcases. It provides an overview of a specific product, showing my ability to gather key information and present it clearly. The presentation highlights my efforts to organize content logically and use basic visual aids effectively.

Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design

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

designcreativityinnovation
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeSouth Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe

South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
• T-Mobile roaming charges for loading the

full front page of Vogue.co.uk, in Moscow: €93,13
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理

原件一模一样【微信:WP101A】【(ual毕业证书)伦敦艺术大学毕业证书学位证成绩单】【微信:WP101A】(留信学历认证永久存档查询)采用学校原版纸张、特殊工艺完全按照原版一比一制作(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:WP101A】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:WP101A】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:WP101A】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 办理(ual毕业证书)伦敦艺术大学毕业证学位证)学位证【微信:WP101A 】外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理(ual毕业证书)伦敦艺术大学毕业证学位证)学位证【微信:WP101A 】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理(ual毕业证书)伦敦艺术大学毕业证学位证)学位证【微信:WP101A 】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理(ual毕业证书)伦敦艺术大学毕业证学位证)学位证【微信:WP101A 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

ual毕业证书
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmpDoc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp

ok i have upload

AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdfAI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf

04.07.2024 slide deck for a virtual event

ux
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability

A Green City is an urban area that prioritizes sustainability in its development, operation, and maintenance.

designresearcharchitecture
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model SafeDwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe

Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe

Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe

Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
The Guardian Redesign (2013)
• Project goals focused on mobile experience:
• Tackle dropping print circulation with mobile,
• Replace the slow, rigid mobile/desktop sites,
• Solution: a mobile-first “stealth” redesign with a
strong focus on progressive enhancement.
• First focus on “mobile” experience,
• Long term: new RWD client-side architecture,
• Ultimate goal: one code base, one responsive site.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
“
“Core HTML content first” with
“Core CSS styles first” is a simple
corollary of the good ol’ progressive
enhancement.


— Andy Hume

“Real-Life Responsive Redesign”, SmashingConf 2013

Recommended for you

The Guardian Redesign
• Priority lists for content and styles to define “core”:
• Core content doesn’t rely on JavaScript,
• Only one main feature image considered “core”,
• No Ajax support for ratings, comments and live scores,
• “Cutting the mustard” to “buckle” browsers,
• Web fonts aren’t loaded by default (prevent FOUT).
The Guardian’s Modular Load
• Consider at least three types of page content:
• Core content

(essential HTML+CSS, usable non-JS enhanced experience);
• Enhancement

(JS, Geolocation, touch, enhanced CSS, Web fonts, widgets);
• Leftovers

(analytics, advertising, third-party content).
• Idea: load Core content first, then Enhancement
on DOMContentReady, then Leftovers on Load.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
The Guardian’s Modular Load
• Load JS into a browser asynchronously.

While JS is being downloaded, browser still

can parse the document and show content.
• HTML/JS (for modern browsers):

@if(isModernBrowser) {

<script src="enhanced.js" async defer></script>

}

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
BBC’s isModernBrowser( )
• We can use server-side device detection using UA
strings with DeviceAtlas, WURFL etc.
• We can use client-side feature detection to split
browsers into groups “HTML4” / “HTML5”.
• JS:

if (

'querySelector' in document &&

'localStorage' in window &&

'addEventListener' in window ) {

// HTML5 browser detected; load the JS app

}

BBC’s isModernBrowser( )
• JS:

if (

'querySelector' in document &&

'localStorage' in window &&

'addEventListener' in window ) {

// HTML5 browser detected; load the JS app

}

• HTML5 Browsers:

IE9+, FF 3.5+, Opera 9+,

Safari 4+, Chrome 1+, iOS1+,

Android phone and tablets 2.1+,

Blackberry OS6+, Win 7.5+,

Mobile Firefox, Opera Mobile
• HTML4 Browsers:

IE8-, Blackberry OS5-,

Nokia S60 v6-, Nokia S40,

Symbian, Windows 7 Phone
(pre-Mango), a plethora of
legacy devices.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
• A median start render time for an uncached page:

0.798 seconds (iPhone 4, 3G, 1.6Mps, 300ms RTT).
• Guardian users need to successfully complete

1 HTTP-request to start reading the news.
• Median time for an uncached page to start

displaying: 0.727 seconds (stable networks).
• With enhanced JS loaded, front page has 35
images on “desktop”, 67 requests, 657 Kb.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
SmashingMag’s Refactoring
• Drawbacks prompted a focus on performance:
• Independent sections with separate WP-installs,
• Accessing content was difficult on slow connections,
• Question: (once we clean up the front-end), how
fast can we be, rather than how fast should we be?
• Decoupling JS dependencies (also with ads),
• Dealing with annoying Web fonts loading.
• Ultimate goal: one code base, one responsive site.
“
So how fast ist fast enough? A
Speed Index of under 1000. And
for professionals that get there,
they should shoot for delivering
the critical-path view (above the
fold) in the first 14Kb of the page.


— Paul Irish
Performance Strategies
• Average page load (onLoad) doesn’t say much
about the quality of performance. Metrics:
• Visual comparison (against competitors)

• Interface response times (<=100ms)
• Start render time within 1s on a suboptimal 3G

(“above-the-fold” optimization),
• Monitor perf. with a private instance of WebPageTest,
• Run code against performant budget (Grunt-task).

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
SmashingMag’s Modular Load
• Consider three types of page content:
• Core content

(essential HTML+CSS, usable non-JS enhanced experience);
• Enhancement

(JS, syntax highlighter, full CSS, Web fonts, comments);
• Leftovers

(analytics, advertising, Gravatar images).
• Idea: load Core content first, then Enhancement
on DOMContentReady, then Leftovers on Load.

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
SmashingMag’s Optimization
• Minor optimizations based on a simple
principle: optimize content, defer the rest.
• Load critical CSS inline and full CSS on load,
• Avoid JavaScript libraries (jQuery → JavaScript),
• Store Web fonts in localStorage + cookies,
• Defer advertising, tracking and all non-critical CSS/JS,
• Replaced Respond.js with IE8 stylesheet (fixed-width).
• Optimize the critical rendering path for content delivery.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

An Ongoing Battle
• Minor optimizations prompted us to review
and adjust our editorial workflow:
• Using srcset and sizes for images in articles,
• Using grunt-perfbudget to track performance,
• Measuring changes in traffic and ad impressions,
• Reviewing articles for performance before publishing,
• PageSpeed >= 98 both on mobile and desktop as a goal.
• Next: WebViews issues, “jumps” to comments,
defer Gravatars, move to new servers, <picture>.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
HTTP/1.1
• HTTP was designed for connections and
bandwidth much different from today.
• Single request per connection,
• Browsers can use max. 6 connections per domain,
• Exclusively client-initiated requests,
• Uncompressed request and response headers,
• Redundant headers,
• Optional data compression,
• HTTP is slow, HTTPS is even slower.

Recommended for you

Delivering The Goods, Paul Irish, https://www.youtube.com/watch?v=R8W_6xWphtw
SPDY / HTTP/2.0
• SPDY, the core of HTTP/2.0, promises speed
improvement and decreased network latency.
• 64% reductions in page load times,
• 23% mean page load time improvement on mobile,
• Unlimited number of parallel requests per connection,
• Quicker slow start and better compression,
• Developers can prioritize resources,
• Always requires SSL/TLS for security,
• Extension of HTTP/1.1; as such, falls back to HTTP/1.1.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
• Requires server-side and client-side implementations.
• Available for Apache 2.2 (mod_spdy),

Nginx (ngx_http_spdy_module).

Recommended for you

• Requires server-side and client-side implementations.
• Available for IE 11+ (Win 8.1), Chrome 4+, Firefox 13+,
Opera 12.1+, Amazon Sink, Android, not Safari.
• Used by Google (Gmail), WordPress.com, CloudFlare,
Facebook, Twitter. Different browsers support different
versions of SPDY.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

“
SmashingMag is the only site I
can read on an EDGE connection
when commuting in São Paulo,
every day. It makes me think why
other sites aren’t optimizing for
slow connections, too.


— a reader from Brazil
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman
Thank you.
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

Recommended for you

More Related Content

What's hot

Drupal: Northeastern University Libraries website
Drupal: Northeastern University Libraries websiteDrupal: Northeastern University Libraries website
Drupal: Northeastern University Libraries website
iFactory
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
Joakim Kemeny
 
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Sara Rosso
 
Mini-training: Personalization & Recommendation Demystified
Mini-training: Personalization & Recommendation DemystifiedMini-training: Personalization & Recommendation Demystified
Mini-training: Personalization & Recommendation Demystified
Betclic Everest Group Tech Team
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
Maximiliano Firtman
 
Webdev battacherjee
Webdev battacherjeeWebdev battacherjee
Webdev battacherjee
RavingTiger
 
Architecture of a Modern Web App
Architecture of a Modern Web AppArchitecture of a Modern Web App
Architecture of a Modern Web App
scothis
 
Blogging
BloggingBlogging
Blogging
michaelaccardi
 
JavaScript
JavaScriptJavaScript
JavaScript
Vidyut Singhania
 
Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010
Mahesh Panchal
 
Master SocialOPM Presentation from eAccountable
Master SocialOPM Presentation from eAccountableMaster SocialOPM Presentation from eAccountable
Master SocialOPM Presentation from eAccountable
durkprice
 
PureFormulas.com- SocialOPM Presentation
PureFormulas.com- SocialOPM PresentationPureFormulas.com- SocialOPM Presentation
PureFormulas.com- SocialOPM Presentation
durkprice
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
Predhin Sapru
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
Marc D Anderson
 
Ap Ams Bill
Ap Ams BillAp Ams Bill
Ap Ams Bill
Mediality
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern age
shwetank
 
Smash.wordpress
Smash.wordpressSmash.wordpress
Smash.wordpress
Ashley Thompson
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
jameswillweb
 
Patacs wp.com slides_oct_2018_final3
Patacs wp.com slides_oct_2018_final3Patacs wp.com slides_oct_2018_final3
Patacs wp.com slides_oct_2018_final3
gvaughan
 

What's hot (20)

Drupal: Northeastern University Libraries website
Drupal: Northeastern University Libraries websiteDrupal: Northeastern University Libraries website
Drupal: Northeastern University Libraries website
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
 
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.
 
Mini-training: Personalization & Recommendation Demystified
Mini-training: Personalization & Recommendation DemystifiedMini-training: Personalization & Recommendation Demystified
Mini-training: Personalization & Recommendation Demystified
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Webdev battacherjee
Webdev battacherjeeWebdev battacherjee
Webdev battacherjee
 
Architecture of a Modern Web App
Architecture of a Modern Web AppArchitecture of a Modern Web App
Architecture of a Modern Web App
 
Blogging
BloggingBlogging
Blogging
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010
 
Master SocialOPM Presentation from eAccountable
Master SocialOPM Presentation from eAccountableMaster SocialOPM Presentation from eAccountable
Master SocialOPM Presentation from eAccountable
 
PureFormulas.com- SocialOPM Presentation
PureFormulas.com- SocialOPM PresentationPureFormulas.com- SocialOPM Presentation
PureFormulas.com- SocialOPM Presentation
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Ap Ams Bill
Ap Ams BillAp Ams Bill
Ap Ams Bill
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern age
 
Smash.wordpress
Smash.wordpressSmash.wordpress
Smash.wordpress
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Patacs wp.com slides_oct_2018_final3
Patacs wp.com slides_oct_2018_final3Patacs wp.com slides_oct_2018_final3
Patacs wp.com slides_oct_2018_final3
 

Viewers also liked

Jet Cooper: UX In Real Life
Jet Cooper: UX In Real LifeJet Cooper: UX In Real Life
Jet Cooper: UX In Real Life
theymc
 
WCSD-UI
WCSD-UIWCSD-UI
WCSD-UI
Steve Zehngut
 
Nice UX
Nice UXNice UX
Nice UX
Leonid Jack
 
What is a user experience designer
What is a user experience designerWhat is a user experience designer
What is a user experience designer
John Whalen
 
There is no 'i' in UX.
There is no 'i' in UX.There is no 'i' in UX.
There is no 'i' in UX.
Anton Moulder
 
UX Is Everywhere
UX Is EverywhereUX Is Everywhere
What is UX?
What is UX?What is UX?
What is UX?
Peter van Lanschot
 
The Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI DesignThe Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI Design
Uday Shankar
 
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?
Taiwan Inbound Marketing Envangelist
 
UX in Real Life
UX in Real LifeUX in Real Life
UX in Real Life
Narek Kozmoyan
 

Viewers also liked (10)

Jet Cooper: UX In Real Life
Jet Cooper: UX In Real LifeJet Cooper: UX In Real Life
Jet Cooper: UX In Real Life
 
WCSD-UI
WCSD-UIWCSD-UI
WCSD-UI
 
Nice UX
Nice UXNice UX
Nice UX
 
What is a user experience designer
What is a user experience designerWhat is a user experience designer
What is a user experience designer
 
There is no 'i' in UX.
There is no 'i' in UX.There is no 'i' in UX.
There is no 'i' in UX.
 
UX Is Everywhere
UX Is EverywhereUX Is Everywhere
UX Is Everywhere
 
What is UX?
What is UX?What is UX?
What is UX?
 
The Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI DesignThe Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI Design
 
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?
如何從搏來客行銷(Inbound marketing) 進化到成長駭客行銷(growth hacker marketing)?
 
UX in Real Life
UX in Real LifeUX in Real Life
UX in Real Life
 

Similar to WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
Building Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 FrameworkBuilding Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 Framework
Webvanta
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Mihail Mateev
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
Judi Wunderlich
 
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
UX Riga
 
Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparison
DhrubaJyoti Dey
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
colberding
 
KATHY ZHANG_3
KATHY ZHANG_3KATHY ZHANG_3
KATHY ZHANG_3
kathy Zhang
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
Gail Frederick
 
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)
ssuserd60633
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Frédéric Harper
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
Chris Love
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
mintersam
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
G3 Communications
 
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom Robertshaw
Meet Magento Spain
 
Eureko frameworks
Eureko frameworksEureko frameworks
Eureko frameworks
Görkem Sazara
 
Responsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at ScaleResponsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at Scale
scottjehl
 
Delightful UX
Delightful UXDelightful UX
Delightful UX
FDConf
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Kevin Bruce
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
NishchaiyaBayla1
 

Similar to WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman (20)

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Building Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 FrameworkBuilding Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 Framework
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
 
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
 
Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparison
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
 
KATHY ZHANG_3
KATHY ZHANG_3KATHY ZHANG_3
KATHY ZHANG_3
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
 
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
 
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom Robertshaw
 
Eureko frameworks
Eureko frameworksEureko frameworks
Eureko frameworks
 
Responsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at ScaleResponsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at Scale
 
Delightful UX
Delightful UXDelightful UX
Delightful UX
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 

More from nois3

Marc Fonteijn - How we tackle the future
Marc Fonteijn - How we tackle the futureMarc Fonteijn - How we tackle the future
Marc Fonteijn - How we tackle the future
nois3
 
Marilia Moita - What if smart cities were people centered
Marilia Moita - What if smart cities were people centeredMarilia Moita - What if smart cities were people centered
Marilia Moita - What if smart cities were people centered
nois3
 
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humansMaria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans
nois3
 
Charlotte Davies - Researching Voice UX
Charlotte Davies - Researching Voice UXCharlotte Davies - Researching Voice UX
Charlotte Davies - Researching Voice UX
nois3
 
Filippo Perlini - From Real to Unreal and Viceversa
Filippo Perlini - From Real to Unreal and ViceversaFilippo Perlini - From Real to Unreal and Viceversa
Filippo Perlini - From Real to Unreal and Viceversa
nois3
 
Nadia Piet - Design Thinking for AI
Nadia Piet - Design Thinking for AINadia Piet - Design Thinking for AI
Nadia Piet - Design Thinking for AI
nois3
 
Roberta Tassi - Future Skill sets
Roberta Tassi - Future Skill setsRoberta Tassi - Future Skill sets
Roberta Tassi - Future Skill sets
nois3
 
Dee Scarano - Creating Better Products, Faster with Design Sprints
Dee Scarano - Creating Better Products, Faster with Design SprintsDee Scarano - Creating Better Products, Faster with Design Sprints
Dee Scarano - Creating Better Products, Faster with Design Sprints
nois3
 
Carlo Frinolli - Welcome #WUDRome2018
Carlo Frinolli - Welcome #WUDRome2018Carlo Frinolli - Welcome #WUDRome2018
Carlo Frinolli - Welcome #WUDRome2018
nois3
 
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...
nois3
 
Vincenzo Di Maria - User friendly & abuser unfriendly
Vincenzo Di Maria - User friendly & abuser unfriendly Vincenzo Di Maria - User friendly & abuser unfriendly
Vincenzo Di Maria - User friendly & abuser unfriendly
nois3
 
Simone Borsci - Deceptive design, user experience and trust
Simone Borsci - Deceptive design, user experience and trustSimone Borsci - Deceptive design, user experience and trust
Simone Borsci - Deceptive design, user experience and trust
nois3
 
Pietro Gregorini - Solo in Cartolina: creativity for change
Pietro Gregorini - Solo in Cartolina: creativity for changePietro Gregorini - Solo in Cartolina: creativity for change
Pietro Gregorini - Solo in Cartolina: creativity for change
nois3
 
Matteo Cadeddu - Change.org: human centered change
Matteo Cadeddu - Change.org: human centered changeMatteo Cadeddu - Change.org: human centered change
Matteo Cadeddu - Change.org: human centered change
nois3
 
Lorenzo Fabbri - Le parole sono importanti
Lorenzo Fabbri - Le parole sono importantiLorenzo Fabbri - Le parole sono importanti
Lorenzo Fabbri - Le parole sono importanti
nois3
 
Katy Arnold - Building trust in public service delivery with human centered d...
Katy Arnold - Building trust in public service delivery with human centered d...Katy Arnold - Building trust in public service delivery with human centered d...
Katy Arnold - Building trust in public service delivery with human centered d...
nois3
 
Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...
Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...
Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...
nois3
 
Cennydd Bowles - Future Ethics
Cennydd Bowles - Future EthicsCennydd Bowles - Future Ethics
Cennydd Bowles - Future Ethics
nois3
 
Alessandra Petromilli - VUI: Design Patterns and Challenges
Alessandra Petromilli - VUI: Design Patterns and ChallengesAlessandra Petromilli - VUI: Design Patterns and Challenges
Alessandra Petromilli - VUI: Design Patterns and Challenges
nois3
 
Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...
Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...
Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...
nois3
 

More from nois3 (20)

Marc Fonteijn - How we tackle the future
Marc Fonteijn - How we tackle the futureMarc Fonteijn - How we tackle the future
Marc Fonteijn - How we tackle the future
 
Marilia Moita - What if smart cities were people centered
Marilia Moita - What if smart cities were people centeredMarilia Moita - What if smart cities were people centered
Marilia Moita - What if smart cities were people centered
 
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humansMaria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans
Maria Rosanna Fossati - Robotics, intelligent machines, prosthetics… and humans
 
Charlotte Davies - Researching Voice UX
Charlotte Davies - Researching Voice UXCharlotte Davies - Researching Voice UX
Charlotte Davies - Researching Voice UX
 
Filippo Perlini - From Real to Unreal and Viceversa
Filippo Perlini - From Real to Unreal and ViceversaFilippo Perlini - From Real to Unreal and Viceversa
Filippo Perlini - From Real to Unreal and Viceversa
 
Nadia Piet - Design Thinking for AI
Nadia Piet - Design Thinking for AINadia Piet - Design Thinking for AI
Nadia Piet - Design Thinking for AI
 
Roberta Tassi - Future Skill sets
Roberta Tassi - Future Skill setsRoberta Tassi - Future Skill sets
Roberta Tassi - Future Skill sets
 
Dee Scarano - Creating Better Products, Faster with Design Sprints
Dee Scarano - Creating Better Products, Faster with Design SprintsDee Scarano - Creating Better Products, Faster with Design Sprints
Dee Scarano - Creating Better Products, Faster with Design Sprints
 
Carlo Frinolli - Welcome #WUDRome2018
Carlo Frinolli - Welcome #WUDRome2018Carlo Frinolli - Welcome #WUDRome2018
Carlo Frinolli - Welcome #WUDRome2018
 
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...
Daniela Petrillo - Progettare una salute accessibile: l'eterna lotta tra la r...
 
Vincenzo Di Maria - User friendly & abuser unfriendly
Vincenzo Di Maria - User friendly & abuser unfriendly Vincenzo Di Maria - User friendly & abuser unfriendly
Vincenzo Di Maria - User friendly & abuser unfriendly
 
Simone Borsci - Deceptive design, user experience and trust
Simone Borsci - Deceptive design, user experience and trustSimone Borsci - Deceptive design, user experience and trust
Simone Borsci - Deceptive design, user experience and trust
 
Pietro Gregorini - Solo in Cartolina: creativity for change
Pietro Gregorini - Solo in Cartolina: creativity for changePietro Gregorini - Solo in Cartolina: creativity for change
Pietro Gregorini - Solo in Cartolina: creativity for change
 
Matteo Cadeddu - Change.org: human centered change
Matteo Cadeddu - Change.org: human centered changeMatteo Cadeddu - Change.org: human centered change
Matteo Cadeddu - Change.org: human centered change
 
Lorenzo Fabbri - Le parole sono importanti
Lorenzo Fabbri - Le parole sono importantiLorenzo Fabbri - Le parole sono importanti
Lorenzo Fabbri - Le parole sono importanti
 
Katy Arnold - Building trust in public service delivery with human centered d...
Katy Arnold - Building trust in public service delivery with human centered d...Katy Arnold - Building trust in public service delivery with human centered d...
Katy Arnold - Building trust in public service delivery with human centered d...
 
Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...
Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...
Federica Fragapane - The Stories Behind a Line. Una narrazione visiva del via...
 
Cennydd Bowles - Future Ethics
Cennydd Bowles - Future EthicsCennydd Bowles - Future Ethics
Cennydd Bowles - Future Ethics
 
Alessandra Petromilli - VUI: Design Patterns and Challenges
Alessandra Petromilli - VUI: Design Patterns and ChallengesAlessandra Petromilli - VUI: Design Patterns and Challenges
Alessandra Petromilli - VUI: Design Patterns and Challenges
 
Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...
Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...
Donatella Ruggeri - Moral Centered Design. Siamo pronti a progettare esperien...
 

Recently uploaded

Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdfHill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Vasu283735
 
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
kumkum tuteja$A17
 
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
hina ojha$A17
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
kousato1
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
telchlarzelere270
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
Kal-el Shows
 
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design IdeologiesGender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
Aditi Sh.
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Rostyslav Kasyanenko
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
rightchoicelandscapi
 
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
pawankumar98845
 
Product Showcase Presentation |slides sample.pptx
Product Showcase Presentation |slides sample.pptxProduct Showcase Presentation |slides sample.pptx
Product Showcase Presentation |slides sample.pptx
wojakmodern
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
Pieter van Langen
 
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeSouth Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
nikhilkumarji0156
 
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
ijk38lw
 
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmpDoc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Dhio3
 
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdfAI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
taranenkovictoria
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
Mostafa Abd Elrahman
 
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model SafeDwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Jinni singh$A17
 
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
tarun sharma$A17
 

Recently uploaded (20)

Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdfHill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
 
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
 
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
 
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design IdeologiesGender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
 
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
 
Product Showcase Presentation |slides sample.pptx
Product Showcase Presentation |slides sample.pptxProduct Showcase Presentation |slides sample.pptx
Product Showcase Presentation |slides sample.pptx
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
 
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeSouth Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
 
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
 
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmpDoc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
 
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdfAI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
 
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model SafeDwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
 
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
 

WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman

  • 2. Real-Life Responsive Web Design Vitaly Friedman 13/11/2014 • Rome, Italy
  • 3. Vitaly Friedman, editor-in-chief
 and co-founder of SmashingMag
  • 30. Patty Toland, FilamentGroup, “Design Consistency for RWD”, https://t.co/Tb0q1gMwQS
  • 31. Responsive Considerations • Components
 
 Flexible grid
 Typography
 Navigation
 Accessible form controls
 Carousels
 Tabbed navigation
 Responsive tables
 Accordions
 Media lists
 Drop-downs
 Pagination
 Data tables
 Buttons
 Icon fonts 
 • Strategy
 Responsive images
 Responsive typography
 Accessibility architecture
 Legacy browser support
 i18n/l10n tolerance
 Performance budget
 Interaction/Animations
 Responsive advertising 

  • 32. • Strategy
 Responsive images
 Responsive typography
 Accessibility architecture
 Legacy browser support
 i18n/l10n tolerance
 Performance budget
 Interaction/Animations
 Responsive advertising 
 • Layouts
 Homepage layout
 Subpage layout
 Article index layout
 Article layout
 Product index layout
 Product detail layout
 Sign up flow
 Checkout flow • Components
 
 Flexible grid
 Typography
 Navigation
 Accessible form controls
 Carousels
 Tabbed navigation
 Responsive tables
 Accordions
 Media lists
 Drop-downs
 Pagination
 Data tables
 Buttons
 Icon fonts 

  • 58. What fascinates me are a few things: how something that got its roots in late 19th century over a course of the century turned into something as established as Teletext. What does it
  • 67. “ Your proficiency in a product will decay over time without usage. As such, this proficiency is reflected in experience decays over time. These decays should be avoided at all costs. 
 
 
 — Allan Grinshtein
  • 68. Progressive Reduction • Usability is a moving target; users get
 smarter at a product as they keep using it. • An interface should adapt and enable users
 to become more efficient at using it. • Idea: change the UI as the user moves through different stages of proficiency.
  • 70. Progressive Reduction • Every UI regresses without usage. For major features, track and observe their usage. • Create a proficiency profile for every user;
 as a feature is used more, start reducing the “hand-holding” in a series of levels.
  • 71. Progressive Reduction • Assign a proficiency level to each feature and design its variations for each level. • If a user doesn’t use a feature for a long time, UI regresses back to level 1. • If a user uses a feature more, UI keeps increasing levels to the “advanced” mode.
  • 80. “ We have clients come to us and say, “We know our average customer. She’s female, 34 years old, with 2.3 kids…” But what we really need to do to design well, is to look at the extremes… 
 
 
 — Dan Formosa, “Smart Design”
  • 81. “ ...the weakest, or the person with arthritis, or the athlete, or the strongest or the fastest person. Because if we really understand what the extremes are, the middle will take care of itself. 
 
 
 — Dan Formosa, “Smart Design”
  • 86. Designing for Extremes • Average user is an artificial, static representation of users that don’t exist. • Real users change constantly, reaching different positions, roles and contexts. • Idea: optimize for edge cases first, then converge towards more common cases.
  • 94. Skeleton Screens • Good feedback focuses on the progress;
 keeps updating current state to ease anxiety. • Blank screens are user experience gaps that disrupt user experience. Progress bars focus on the waiting; focus on the progress instead. • Idea: minimize gaps to reduce friction with “seamless” transitionsand skeleton screens.
  • 108. “ There is no difference for the user between a site being down and a site being inaccessible due to loading issues caused by blocking resources or slow networks. 
 — Andy Hume
 “Real-Life Responsive Redesign”, SmashingConf 2013
  • 111. • T-Mobile roaming charges for loading the
 full front page of Vogue.co.uk, in Moscow: €93,13
  • 118. The Guardian Redesign (2013) • Project goals focused on mobile experience: • Tackle dropping print circulation with mobile, • Replace the slow, rigid mobile/desktop sites, • Solution: a mobile-first “stealth” redesign with a strong focus on progressive enhancement. • First focus on “mobile” experience, • Long term: new RWD client-side architecture, • Ultimate goal: one code base, one responsive site.
  • 120. “ “Core HTML content first” with “Core CSS styles first” is a simple corollary of the good ol’ progressive enhancement. 
 — Andy Hume
 “Real-Life Responsive Redesign”, SmashingConf 2013
  • 121. The Guardian Redesign • Priority lists for content and styles to define “core”: • Core content doesn’t rely on JavaScript, • Only one main feature image considered “core”, • No Ajax support for ratings, comments and live scores, • “Cutting the mustard” to “buckle” browsers, • Web fonts aren’t loaded by default (prevent FOUT).
  • 122. The Guardian’s Modular Load • Consider at least three types of page content: • Core content
 (essential HTML+CSS, usable non-JS enhanced experience); • Enhancement
 (JS, Geolocation, touch, enhanced CSS, Web fonts, widgets); • Leftovers
 (analytics, advertising, third-party content). • Idea: load Core content first, then Enhancement on DOMContentReady, then Leftovers on Load.
  • 128. The Guardian’s Modular Load • Load JS into a browser asynchronously.
 While JS is being downloaded, browser still
 can parse the document and show content. • HTML/JS (for modern browsers):
 @if(isModernBrowser) {
 <script src="enhanced.js" async defer></script>
 }
  • 130. BBC’s isModernBrowser( ) • We can use server-side device detection using UA strings with DeviceAtlas, WURFL etc. • We can use client-side feature detection to split browsers into groups “HTML4” / “HTML5”. • JS:
 if (
 'querySelector' in document &&
 'localStorage' in window &&
 'addEventListener' in window ) {
 // HTML5 browser detected; load the JS app
 }

  • 131. BBC’s isModernBrowser( ) • JS:
 if (
 'querySelector' in document &&
 'localStorage' in window &&
 'addEventListener' in window ) {
 // HTML5 browser detected; load the JS app
 }
 • HTML5 Browsers:
 IE9+, FF 3.5+, Opera 9+,
 Safari 4+, Chrome 1+, iOS1+,
 Android phone and tablets 2.1+,
 Blackberry OS6+, Win 7.5+,
 Mobile Firefox, Opera Mobile • HTML4 Browsers:
 IE8-, Blackberry OS5-,
 Nokia S60 v6-, Nokia S40,
 Symbian, Windows 7 Phone (pre-Mango), a plethora of legacy devices.
  • 134. • A median start render time for an uncached page:
 0.798 seconds (iPhone 4, 3G, 1.6Mps, 300ms RTT). • Guardian users need to successfully complete
 1 HTTP-request to start reading the news.
  • 135. • Median time for an uncached page to start
 displaying: 0.727 seconds (stable networks). • With enhanced JS loaded, front page has 35 images on “desktop”, 67 requests, 657 Kb.
  • 142. SmashingMag’s Refactoring • Drawbacks prompted a focus on performance: • Independent sections with separate WP-installs, • Accessing content was difficult on slow connections, • Question: (once we clean up the front-end), how fast can we be, rather than how fast should we be? • Decoupling JS dependencies (also with ads), • Dealing with annoying Web fonts loading. • Ultimate goal: one code base, one responsive site.
  • 143. “ So how fast ist fast enough? A Speed Index of under 1000. And for professionals that get there, they should shoot for delivering the critical-path view (above the fold) in the first 14Kb of the page. 
 — Paul Irish
  • 144. Performance Strategies • Average page load (onLoad) doesn’t say much about the quality of performance. Metrics: • Visual comparison (against competitors)
 • Interface response times (<=100ms) • Start render time within 1s on a suboptimal 3G
 (“above-the-fold” optimization), • Monitor perf. with a private instance of WebPageTest, • Run code against performant budget (Grunt-task).
  • 148. SmashingMag’s Modular Load • Consider three types of page content: • Core content
 (essential HTML+CSS, usable non-JS enhanced experience); • Enhancement
 (JS, syntax highlighter, full CSS, Web fonts, comments); • Leftovers
 (analytics, advertising, Gravatar images). • Idea: load Core content first, then Enhancement on DOMContentReady, then Leftovers on Load.
  • 150. SmashingMag’s Optimization • Minor optimizations based on a simple principle: optimize content, defer the rest. • Load critical CSS inline and full CSS on load, • Avoid JavaScript libraries (jQuery → JavaScript), • Store Web fonts in localStorage + cookies, • Defer advertising, tracking and all non-critical CSS/JS, • Replaced Respond.js with IE8 stylesheet (fixed-width). • Optimize the critical rendering path for content delivery.
  • 157. An Ongoing Battle • Minor optimizations prompted us to review and adjust our editorial workflow: • Using srcset and sizes for images in articles, • Using grunt-perfbudget to track performance, • Measuring changes in traffic and ad impressions, • Reviewing articles for performance before publishing, • PageSpeed >= 98 both on mobile and desktop as a goal. • Next: WebViews issues, “jumps” to comments, defer Gravatars, move to new servers, <picture>.
  • 164. HTTP/1.1 • HTTP was designed for connections and bandwidth much different from today. • Single request per connection, • Browsers can use max. 6 connections per domain, • Exclusively client-initiated requests, • Uncompressed request and response headers, • Redundant headers, • Optional data compression, • HTTP is slow, HTTPS is even slower.
  • 165. Delivering The Goods, Paul Irish, https://www.youtube.com/watch?v=R8W_6xWphtw
  • 166. SPDY / HTTP/2.0 • SPDY, the core of HTTP/2.0, promises speed improvement and decreased network latency. • 64% reductions in page load times, • 23% mean page load time improvement on mobile, • Unlimited number of parallel requests per connection, • Quicker slow start and better compression, • Developers can prioritize resources, • Always requires SSL/TLS for security, • Extension of HTTP/1.1; as such, falls back to HTTP/1.1.
  • 168. • Requires server-side and client-side implementations. • Available for Apache 2.2 (mod_spdy),
 Nginx (ngx_http_spdy_module).
  • 169. • Requires server-side and client-side implementations. • Available for IE 11+ (Win 8.1), Chrome 4+, Firefox 13+, Opera 12.1+, Amazon Sink, Android, not Safari.
  • 170. • Used by Google (Gmail), WordPress.com, CloudFlare, Facebook, Twitter. Different browsers support different versions of SPDY.
  • 173. “ SmashingMag is the only site I can read on an EDGE connection when commuting in São Paulo, every day. It makes me think why other sites aren’t optimizing for slow connections, too. 
 — a reader from Brazil