SlideShare a Scribd company logo
1 of 84
Download to read offline
Your Browser is the
New Photoshop

Matt Puchlerz & Jon Buda
The typical
scenario:
The first comp.
A few more...
A few more...
Your Browser Is The New Photoshop
What’s wrong with
this approach?
“   We aren’t designing copies of
    web pages, we’re designing web
    pages.


    — Andy Clarke via Quotes on Design
Page interaction?
Scrolling?
Resizing the browser?
The font stack?
Liquid layouts?
Browser
inconsistencies?
Fake interaction.
Fake interaction.
Fake interaction.
Fake interaction.
Fake interaction.
What about other
applications?
Illustrator?
InDesign?
“   Working on a book in InDesign
    makes it even more obvious how
    ill-suited Photoshop is for web
    design.

    — Jason Santa Maria via Twitter
Fireworks?
We’re still
designing copies.
What do you
propose?
HTML
Browser
HTML

       CSS
Like popular apps,
designing in the
browser offers:
Text & object styles.
Externally linked files.
“Master” templates.
Designing in the
browser also offers:
Page interaction.
Scrolling.
Resizing the browser.
The font stack.
Liquid layouts.
Browser
inconsistencies.
What about the
“designy” stuff?
There’s a CSS for that.
border-radius:
gradient()
rgba()
box-shadow:
text-shadow:
transition:
mask:
transform: scale()
       rotate()
       translate()
       skew()
@font-face {}
Helpful Tools:
Firebug.
Web Inspector.
What about IE?
Do websites need to
look exactly the same
in every browser?
Your Browser Is The New Photoshop
Rely on graceful
degradation.
Universal IE6
stylesheet.
Chrome Frame!
How does this
help me?
Increased efficiency.
Concurrent editing
& versioning.
Develop better content
hierarchy and order of
importance.
Less time wasted on
pure “decoration.”
Encourages progressive
enhancement.
Easier transition from
development to
production.
How does this
help my client?
Why would you sign-off
on static mockups?
Pixel-perfection sets
the wrong expectation.
Focusing on function
rather than form.
Receive relevant
feedback, sooner.
Sketch when needed.
“   And don’t forget, the next step
    isn’t a polished wireframe. It’s
    code you can click on!


    — Ryan Singer via Signal vs. Noise
Greater agility.
Know your
responsibilities.
Your design will affect
development.
Development will affect
your design.
Work together from
the beginning.
Be wary of too much
specialization.
Provide the best
experience possible.
Be a “webmaster.”
A craftsman.
Use the correct tool
for the job.
The browser is all
you need.
Thanks!
Any questions?
Matt Puchlerz              Jon Buda
@mattpuchlerz              @jonbuda
http://matt.puchlerz.com   http://jonbuda.com

More Related Content

What's hot

How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018Noor Muhammad Khan
 
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpoint
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpointGsc awd 1_web_developmentlifecyclefrombegtoendpowerpoint
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpointetikmsc2004
 
Frugal Web Development
Frugal Web DevelopmentFrugal Web Development
Frugal Web Developmenttcottrill
 
Past couple days of work
Past couple days of workPast couple days of work
Past couple days of workDaniel Thompson
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspectiveeginni
 
Heat Up Your Emails: How to Make Your Emails Sizzle
Heat Up Your Emails: How to Make Your Emails Sizzle Heat Up Your Emails: How to Make Your Emails Sizzle
Heat Up Your Emails: How to Make Your Emails Sizzle HighRoad Solution
 
6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web DesignClippingimages
 
Example
ExampleExample
Exampletara
 
On-Page SEO for Mobile
On-Page SEO for MobileOn-Page SEO for Mobile
On-Page SEO for MobileRaven Tools
 
15 Ways to Improve Your Website's Conversion Rate
15 Ways to Improve Your Website's Conversion Rate15 Ways to Improve Your Website's Conversion Rate
15 Ways to Improve Your Website's Conversion RateWSI WebAnalys
 
Content Strategy: It's Not All Greek
Content Strategy: It's Not All GreekContent Strategy: It's Not All Greek
Content Strategy: It's Not All GreekGretchen Thomas
 
Custom programming
Custom programmingCustom programming
Custom programmingnfoohoh
 
#Techmeetupkz Askhat Murzabayev
#Techmeetupkz Askhat Murzabayev#Techmeetupkz Askhat Murzabayev
#Techmeetupkz Askhat MurzabayevBerik Dossayev
 
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...BayUX
 
"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017
"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017
"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017Blend Interactive
 
6 Reasons Your Website Isn't Working for You
6 Reasons Your Website Isn't Working for You6 Reasons Your Website Isn't Working for You
6 Reasons Your Website Isn't Working for YouReal Time Web Marketing
 

What's hot (17)

How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018
 
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpoint
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpointGsc awd 1_web_developmentlifecyclefrombegtoendpowerpoint
Gsc awd 1_web_developmentlifecyclefrombegtoendpowerpoint
 
Frugal Web Development
Frugal Web DevelopmentFrugal Web Development
Frugal Web Development
 
Past couple days of work
Past couple days of workPast couple days of work
Past couple days of work
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspective
 
Heat Up Your Emails: How to Make Your Emails Sizzle
Heat Up Your Emails: How to Make Your Emails Sizzle Heat Up Your Emails: How to Make Your Emails Sizzle
Heat Up Your Emails: How to Make Your Emails Sizzle
 
6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design
 
Example
ExampleExample
Example
 
On-Page SEO for Mobile
On-Page SEO for MobileOn-Page SEO for Mobile
On-Page SEO for Mobile
 
15 Ways to Improve Your Website's Conversion Rate
15 Ways to Improve Your Website's Conversion Rate15 Ways to Improve Your Website's Conversion Rate
15 Ways to Improve Your Website's Conversion Rate
 
Content Strategy: It's Not All Greek
Content Strategy: It's Not All GreekContent Strategy: It's Not All Greek
Content Strategy: It's Not All Greek
 
Custom programming
Custom programmingCustom programming
Custom programming
 
#Techmeetupkz Askhat Murzabayev
#Techmeetupkz Askhat Murzabayev#Techmeetupkz Askhat Murzabayev
#Techmeetupkz Askhat Murzabayev
 
Good/Bad Web Design
Good/Bad Web DesignGood/Bad Web Design
Good/Bad Web Design
 
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
64 UX Design Interview Questions at Google, Facebook, Amazon, Microsoft, Sale...
 
"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017
"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017
"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017
 
6 Reasons Your Website Isn't Working for You
6 Reasons Your Website Isn't Working for You6 Reasons Your Website Isn't Working for You
6 Reasons Your Website Isn't Working for You
 

Viewers also liked

Digital Techniques
Digital  TechniquesDigital  Techniques
Digital Techniqueslozg88
 
Introduction to photoshop (By:Shujaat abbas)
Introduction to photoshop (By:Shujaat abbas)Introduction to photoshop (By:Shujaat abbas)
Introduction to photoshop (By:Shujaat abbas)Shujaat Abbas
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe PhotoshopBui Huynh
 
Enjoy editing pictures using adobe photoshop
Enjoy editing pictures using adobe photoshopEnjoy editing pictures using adobe photoshop
Enjoy editing pictures using adobe photoshopamd-dxb
 
Introduction- The Basics of Photoshop CS6
Introduction- The Basics of Photoshop CS6Introduction- The Basics of Photoshop CS6
Introduction- The Basics of Photoshop CS6Crest TechnoSoft
 
Session 2.2 photoshop interface
Session 2.2   photoshop interfaceSession 2.2   photoshop interface
Session 2.2 photoshop interfaceJohn Josef Jimenez
 
How To Install Photoshop Cs3
How To Install Photoshop Cs3How To Install Photoshop Cs3
How To Install Photoshop Cs3hayden0103
 
Adobe Photoshop history -Image Editing Software
Adobe Photoshop history -Image Editing SoftwareAdobe Photoshop history -Image Editing Software
Adobe Photoshop history -Image Editing SoftwareImage Solutions India
 
Sesion 2.1 introduction to photoshop (basic)
Sesion 2.1   introduction to photoshop (basic)Sesion 2.1   introduction to photoshop (basic)
Sesion 2.1 introduction to photoshop (basic)John Josef Jimenez
 
Photoshop training ppt
Photoshop training pptPhotoshop training ppt
Photoshop training pptBrandy Shelton
 
Basic Photoshop Tutorial
Basic Photoshop TutorialBasic Photoshop Tutorial
Basic Photoshop TutorialMarc Dy
 
Presentation on Adobe Photoshop
Presentation on Adobe PhotoshopPresentation on Adobe Photoshop
Presentation on Adobe PhotoshopMohak Jain
 
Introduction to Motherboard
Introduction to Motherboard Introduction to Motherboard
Introduction to Motherboard Makrand Patil
 
Adobe photoshop cs6 basic tutorials presentation
Adobe photoshop cs6 basic tutorials   presentationAdobe photoshop cs6 basic tutorials   presentation
Adobe photoshop cs6 basic tutorials presentationRishi Shah
 
Presentation on adobe photoshop® tools
Presentation on adobe photoshop® toolsPresentation on adobe photoshop® tools
Presentation on adobe photoshop® toolsHarshit Dave
 
Presentation 1
Presentation 1Presentation 1
Presentation 1Marsavi
 

Viewers also liked (20)

Digital Techniques
Digital  TechniquesDigital  Techniques
Digital Techniques
 
Introduction to photoshop (By:Shujaat abbas)
Introduction to photoshop (By:Shujaat abbas)Introduction to photoshop (By:Shujaat abbas)
Introduction to photoshop (By:Shujaat abbas)
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
 
Enjoy editing pictures using adobe photoshop
Enjoy editing pictures using adobe photoshopEnjoy editing pictures using adobe photoshop
Enjoy editing pictures using adobe photoshop
 
Introduction- The Basics of Photoshop CS6
Introduction- The Basics of Photoshop CS6Introduction- The Basics of Photoshop CS6
Introduction- The Basics of Photoshop CS6
 
Session 2.2 photoshop interface
Session 2.2   photoshop interfaceSession 2.2   photoshop interface
Session 2.2 photoshop interface
 
How To Install Photoshop Cs3
How To Install Photoshop Cs3How To Install Photoshop Cs3
How To Install Photoshop Cs3
 
Adobe Photoshop history -Image Editing Software
Adobe Photoshop history -Image Editing SoftwareAdobe Photoshop history -Image Editing Software
Adobe Photoshop history -Image Editing Software
 
Sesion 2.1 introduction to photoshop (basic)
Sesion 2.1   introduction to photoshop (basic)Sesion 2.1   introduction to photoshop (basic)
Sesion 2.1 introduction to photoshop (basic)
 
Introduction To Photoshop
Introduction To PhotoshopIntroduction To Photoshop
Introduction To Photoshop
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
 
Photoshop Elements
Photoshop ElementsPhotoshop Elements
Photoshop Elements
 
Photoshop training ppt
Photoshop training pptPhotoshop training ppt
Photoshop training ppt
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
 
Basic Photoshop Tutorial
Basic Photoshop TutorialBasic Photoshop Tutorial
Basic Photoshop Tutorial
 
Presentation on Adobe Photoshop
Presentation on Adobe PhotoshopPresentation on Adobe Photoshop
Presentation on Adobe Photoshop
 
Introduction to Motherboard
Introduction to Motherboard Introduction to Motherboard
Introduction to Motherboard
 
Adobe photoshop cs6 basic tutorials presentation
Adobe photoshop cs6 basic tutorials   presentationAdobe photoshop cs6 basic tutorials   presentation
Adobe photoshop cs6 basic tutorials presentation
 
Presentation on adobe photoshop® tools
Presentation on adobe photoshop® toolsPresentation on adobe photoshop® tools
Presentation on adobe photoshop® tools
 
Presentation 1
Presentation 1Presentation 1
Presentation 1
 

Similar to Your Browser Is The New Photoshop

Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Thinkful
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
 
Design in Browser
Design in BrowserDesign in Browser
Design in BrowserMin Tran
 
Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectationsFrancesco Improta
 
Preprocessing Language
Preprocessing LanguagePreprocessing Language
Preprocessing LanguageNancy Jarjis
 
User Driven Software Architecture
User Driven Software ArchitectureUser Driven Software Architecture
User Driven Software ArchitectureSimon Guest
 
Justin French Web Directions07
Justin French Web Directions07Justin French Web Directions07
Justin French Web Directions07justinfrench
 
Responsive Web Design vs Mobile Web App
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web AppSheeraz Qurban
 
Designing with content-first
Designing with content-firstDesigning with content-first
Designing with content-firstAndy Parker
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - UpdateJohn Yesko
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & CodeMolly Wilson
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipallanchao
 
WebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the WebWebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the WebWebVisions
 
Web 2.0 for IA's
Web 2.0 for IA'sWeb 2.0 for IA's
Web 2.0 for IA'sDave Malouf
 
Choosing the best front end framework for web development 2020
Choosing the best front end framework for web development 2020Choosing the best front end framework for web development 2020
Choosing the best front end framework for web development 2020Katy Slemon
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webJoe Arcuri
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!Jessi Baker
 
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.meetmicah
 

Similar to Your Browser Is The New Photoshop (20)

Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 
Design in Browser
Design in BrowserDesign in Browser
Design in Browser
 
Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectations
 
Preprocessing Language
Preprocessing LanguagePreprocessing Language
Preprocessing Language
 
User Driven Software Architecture
User Driven Software ArchitectureUser Driven Software Architecture
User Driven Software Architecture
 
Justin French Web Directions07
Justin French Web Directions07Justin French Web Directions07
Justin French Web Directions07
 
Responsive Web Design vs Mobile Web App
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web App
 
Designing with content-first
Designing with content-firstDesigning with content-first
Designing with content-first
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & Code
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
WebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the WebWebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the Web
 
Web 2.0 for IA's
Web 2.0 for IA'sWeb 2.0 for IA's
Web 2.0 for IA's
 
Choosing the best front end framework for web development 2020
Choosing the best front end framework for web development 2020Choosing the best front end framework for web development 2020
Choosing the best front end framework for web development 2020
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
 

Recently uploaded

100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 

Recently uploaded (20)

100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 

Your Browser Is The New Photoshop

Editor's Notes

  1. Thank sponsors: - Fuel Collective: food, discounted apps - OfficePort: space to meet Jon - brief overview of the talk. => Matt
  2. Matt - set scene with a real-life project - gathered requirements
  3. Matt - we were both happy with this - direction to continue with
  4. Matt - throw the content into the page skeleton
  5. Matt - throw the content into the page skeleton
  6. Matt - throw the content into the page skeleton
  7. Matt - huge Photoshop file size - split up into 10 different PS files - lots of time required to change common elements - slight header differences led to inconsistent comps => Jon
  8. Jon - clearly this approach has worked - used in most agencies (especially large compartmentalized ones) - so what’s wrong?
  9. Jon - what are copies of web pages? - Andy Clarke quote from An Event Apart Chicago
  10. Jon
  11. Jon
  12. Jon => Matt
  13. Matt
  14. Matt
  15. Matt
  16. Matt => Jon
  17. Matt => Jon
  18. Matt => Jon
  19. Matt => Jon
  20. Matt => Jon
  21. Matt => Jon
  22. Jon -we’ve discussed shortcomings of Photoshop
  23. Jon - handles text styles - externally linked files - vectors make scaling up/down easy
  24. Jon - handle text styles - externally linked files - vectors for resizing - master templates - object styles - simulate float: css => Matt
  25. Matt - best suited tool for layout - not popular, but could it be?
  26. Matt - becoming popular again - externally linked files - nice drawing tools - 1 master template - button states
  27. Matt - process becomes more manageable with other apps - still not working with the end product => Jon
  28. Jon - if none of these “design” tools are great for web design… - what are tools are we proposing you use?
  29. Jon
  30. Jon
  31. Jon
  32. Jon - with CSS - many more options than apps offer
  33. Jon - images, video, stylesheets, etc
  34. Jon - ability to handle master templates - insert chunks of markup - note: may need a simple web framework or template renderer => Matt
  35. Matt
  36. Matt
  37. Matt
  38. Matt
  39. Matt
  40. Matt
  41. Matt => Jon
  42. Jon - extra details, “polish”
  43. Jon => Matt - advanced CSS available to more & more browsers - in turn, means more & more users
  44. Matt => Jon
  45. Jon => Matt
  46. Matt => Jon
  47. Jon - useful for lightboxes / popups => Matt
  48. Matt => Jon
  49. Jon - animate nearly any numeric property => Matt
  50. Matt => Jon
  51. Jon - equivalent to “Free Transform” in Photoshop => Matt
  52. Matt - available since Webkit 3.1, Chrome 3, FF 3.5, Opera 10, IE4 - Typekit, FontSquirrel => Jon
  53. Jon - in addition to manually editing in text editor - there are plugins and built-in features available - edit in-browser - quickly test
  54. Jon - simplified Firebug Lite for other browsers
  55. Jon - all webkit browsers - Webkit nightly features an updated Inspector => Matt
  56. Matt
  57. Matt
  58. Matt - impossible, due to font rendering, supported features - don’t try to force cross-browser perfection - adopt the mindset of inevitable imperfection => Jon
  59. Jon - enhanced experience for “Grade A” browsers -- FF, Safari, Chrome - older browsers, IE: just make sure it’s still functional -- supply HEX alternatives to RGBA() colors -- workable background color instead of gradient() -- it’s okay, consistent to what they’re used to
  60. Jon - IE6 = lowest common denominator - know your audience -- if IE6 is your audience, can’t really drop it entirely - lazily support for IE6 by using the “universal style sheet” - one way to not worry about it but still support it
  61. Jon - forgo IE rendering altogether - provide webkit experience to IE users - used on a previous project (shortcts) - required for IE => Matt
  62. Matt
  63. Matt - working on the end-product - no throwaways
  64. Matt - Adobe Version Cue - Use Git or SVN -- merge changes from different committers => Jon
  65. Jon - focus on developing semantic markup first - and developing the content itself (reference Shay?) - not distracted by the design
  66. Jon - if you have the content to work with, you’re “designing” and not just “decorating” => Matt
  67. Matt - starting with a functional base of plain HTML - don’t start by thinking about a “Javascript image carousel” - enhance the experience for “Grade A” browsers
  68. Matt - already working with end product - “drop in” to production system => Jon
  69. Jon
  70. Jon
  71. Jon - appears like a finished product, but is just a “copy” => Matt
  72. Matt - client sees and judges interactive piece - designers/developers can envision the end product when looking at a comp, client cannot - less for them to have to envision
  73. Matt
  74. Matt - not ashamed to throwaway quick sketches
  75. Matt
  76. Matt - fits right in with agile development methodologies - no waiting for the big design phase - client’s needs and goals will change—inevitable imperfection => Jon
  77. Jon - so we’ve talked about…. - comes down to knowing your responsibilities as a web designer
  78. Jon
  79. Jon
  80. Jon => Matt
  81. Matt
  82. Matt
  83. Matt
  84. Matt
  85. Matt / Jon
  86. .