Slides from my presentation as part of the Typecast webinar 'Designing for maximum reach.' The full video of our webinar will be available here: http://typecast.com/seminars/rwd
Beautiful (& Responsive) Web Typography: Designing for Readability and Meanin...Future Insights
Jason Pamental's talk from Future Insights Live 2014 in Las Vegas: "Responsive web design is one of the most significant advances in web design. But what about your type? We have to look at screen size, relative proportion, device norms and compatibility in order to best present our design and convey its meaning and intent across devices and screen sizes."
Miss Jason's talk? Join us at a future show: www.futureofwebdesign.com. Sign up for our newsletter at futureinsights.com and get 15% off your next conference.
Check out Jason's book on Responsive Typography here: http://bit.ly/rwtbook
Type, Responsively: A more modern approach to type on the webJason Pamental
The document discusses responsive web typography and how designers need to adapt their typographic approaches for different screen sizes and devices. It emphasizes that responsive typography is about conveying meaning through relationships and proportion across a variety of contexts. Designers must consider type choices, fallback fonts, line length proportions appropriate for different devices, and testing fonts on different screens. The overall message is that responsive typography requires an adaptive mindset and approach to work effectively across a range of technologies.
Type, Responsively: Design for Readability & Meaning on Any ScreenJason Pamental
- The document is a presentation about responsive web typography given by Jason Pamental at DrupalCon Austin.
- It discusses the need for typography to adapt to different screen sizes and devices through responsive design.
- It provides tips for implementing responsive typography, including considering performance, progressive enhancement, proportional scaling, and polish.
Type, Responsively: A More Modern Approach to Typography on the WebJason Pamental
The document discusses responsive typography for web design. It defines responsive typography as designing type that is performant, progressive, proportional, and polished for different screen sizes and devices. It provides tips for improving type performance, progressively enhancing type, using proportional type scaling across devices, and polishing type details. The presentation encourages testing type across different environments and platforms, and using techniques like modular scaling, web fonts, and OpenType features to create responsive typography.
Designing with Web Fonts: Type, Responsively (PVD)Jason Pamental
Slides from my updated talk at ARTIFACT Providence on designing with web fonts. (You can also download sample code from here: http://bit.ly/jpartifactpvd)
Responsive Design is a Victory, but the Campaign Must Go Farther Than Ourselves
My keynote address at the New England HighEdWeb conference on 25th April, 2014.
Designing with Web Fonts: Type, ResponsivelyJason Pamental
The document summarizes Jason Pamental's presentation on designing with web fonts. Some key points include:
- He discussed the history of web fonts from early techniques like GIFs and Cufon to modern approaches using @font-face, services like Typekit, and formats like WOFF.
- Topics covered how to choose, host, and implement web fonts, addressing browser compatibility issues and techniques to prevent visual interruptions during loading.
- Responsive design considerations for web fonts like using relative units and scaling approaches were presented.
- Advanced features of web fonts like OpenType layouts, ligatures, and icon fonts were demonstrated.
- Tools, services, and resources for
The document discusses alternatives to estimates in software development called "#NoEstimates". It argues that estimates are unreliable due to uncertainty and human biases. Estimates promote cost-focused mindsets that hinder adaptation. Instead, the document advocates for iterative development styles that involve continuous feedback, slicing work into small increments, and technical excellence. It promotes agile practices like story mapping, tight feedback loops, and refactoring to support responsive, collaborative development aligned with customer needs over rigid pre-planning.
The document discusses important questions to consider before designing a website, such as the goal of the site, intended audience, how often the site will need to be updated, and accessibility requirements. Key questions include what outcomes the site aims to achieve, who it is trying to please or reach, how people will find and interact with the site, and what level of maintenance can be afforded. Understanding limitations is also important to setting appropriate expectations for the site design.
This document provides advice for pitching a business idea or product to investors in a concise elevator pitch format. It recommends focusing on the problem being solved, how the idea or product will heal the world and make money doing so, and why the company is best positioned to succeed. Key advice includes keeping the pitch brief, using visualizations instead of long lists of text, endorsing the vision, and engaging with the audience.
This document provides tips and tools for creating and using visuals effectively in presentations. It discusses finding and using existing visuals such as photos, graphics and videos. It also provides tips for creating visuals using tools like online chart builders and photo editors. Guidelines are given for designing visuals with considerations for layout, color, font and keeping the visuals simple and clear. The document also discusses using visuals appropriately for different audiences and topics. Overall presentation tips are provided such as including an agenda, title slide and contact information.
This document provides guidance on creating effective poster advertisements. It discusses poster advertisements as an affordable alternative to more expensive advertising methods like TV and billboard ads. Key points include choosing a clear objective for the poster, using large readable text, limiting colors and fonts, including essential details like time/location, and obtaining permission before posting in public spaces. Tips are provided on design, layout, proofreading and following assignment requirements. The goal is to simply and clearly communicate the main message in an eye-catching visual format.
The document provides information about the role and responsibilities of a graphic designer. It states that graphic designers are responsible for creating visual design solutions that have a high visual impact by developing creative ideas and concepts to meet clients' objectives. They work as part of a team and are required to keep their design skills up to date. The document also lists some post-secondary programs for graphic design and notes potential benefits and drawbacks of working as a graphic designer.
From Post to Podcast: PodCamp Toronto 2019Andy McIlwain
The document discusses how to take a written blog post and transform it into other content formats like visuals, presentations, videos, and podcasts. It recommends starting with a written post, then creating supporting visuals like slides and images. These materials can then be used for an in-person presentation, recorded video, or podcast episode. The goal is to take one piece of content and distribute it across multiple mediums to expand reach and bring audiences back to the original written post.
Flow. The official worst software development approach in historySander Hoogendoorn
As presented as opening keynote to SDD 2019 in London, together with Kim van Wilgen, customer director at Schuberg Philis. Ever since we started writing code in the fifties of the previous century, managers and project managers have tried to discipline and structure the way we work. However, no matter how many consultants and coaches are hired to implement increasingly complex process frameworks and methodologies, developers and testers always come up with new simplistic approaches.
During this talk, Kim and Sander will feal with Flow: the worst software development methodology in the history ever, taking inspiration from the worst principles and practices from methodologies such as waterfall, RUP, Scrum, Kanban, Lean, BDD, LeSS , SAFe, Spotify and of course everything continuous. Don't let project failure take you by surprise, be certain!
This document provides an overview of the Global Service Jam 2014 event in San Francisco. It introduces the volunteer facilitators and outlines the schedule and activities for the jam, including brainstorming service ideas on Friday and developing focus statements in teams. Participants are instructed on developing team pages and sharing their focus statements before beginning work on Saturday to explore improving existing services or creating new ones. The facilitators emphasize tools for service design like journey mapping and prototyping and encourage participants to collaborate and have fun over the weekend jam event.
The document discusses how to transition a startup into a design-driven company by focusing on user needs and problem-solving through design. It notes that design-driven companies have significantly outperformed the market, but that most startups do not utilize design thinking effectively. The document provides advice on gaining support for design, defining what constitutes good design, and building a strategy around a company's roadmap to establish design-driven practices. The key is taking time to understand user problems before implementing new features and evaluating progress regularly to ensure design remains focused on care for users.
Web design has changed by leaps and bounds in the last decade. In this presentation we discuss the evolution of website design, show compelling examples of modern site design, then explore examples of how these designs could be achieved in iMIS RiSE content management system.
Presented at the 2019 iMIS iNNOVATIONS conference.
Slides from talk at Confab2011, May 2011, Minneapolis, MN. About web content as conversation, based on Letting Go of the Words -- Writing Web Content that Works.
Similar to Responsive Typography: Design for meaning, not for screen size (20)
What we have to say has always been intimately intertwined with how we say it. Design is about communicating those ideas and influencing users’ behavior, so it follows that influence is imparted largely by how we design. For all our intellectual complexity, our brains are still wired to make near-instant judgements about the value and importance of the message we are receiving based on how that message appears.
Thankfully, most of us are still familiar enough with actual books to remember the feel of paper under our fingers, the smell of the ink, the elegant transitions from one idea to the next – all in service of the story. While pixels remain odorless, there’s much more we can do than just deliver a digital message. Practiced typography transforms that message into a compelling experience. Let’s take a journey forward through time and see where typography can take us.
We'll look at examples of ways type has been used to impact user experience throughout history, and how typography has evolved to work with varying screens and content. It's a fundamental change in what it means to practice typography, and critical to understand how it impacts how we design. We'll also explore a few of the technical considerations and capabilities available to help create better typographic systems that will work well into the future.
The latest version of my talk about better design process and client interaction. The premise is to create more smaller interactions and iteration cycles that increase client engagement and deepen the team's understanding of the challenges at hand.
This document summarizes Jason Pamental's presentation on designing experiences across connected devices. Some key points from the presentation include:
- UX is about designing cohesive experiences across an "experience continuum" of connected devices rather than focusing on individual platforms.
- Typography plays an important role in tying together experiences and maintaining a consistent brand identity.
- Researching user needs, reasoned design processes, and beautiful execution are important for creating good user experiences.
Designing the Experience Continuum: Typography in the Age of the Connected Ev...Jason Pamental
With the explosion of small-form-factor, low-cost connected devices like fitness trackers, medical devices and ‘smart dashboards’, the spectrum across which we communicate has gotten broader than ever. When thinking about using a wearable fitness tracker with a small screen, how it connects from a design perspective to the ‘connected app’, to the desktop health tracker portal and even to TV/print advertising for that product—there are very few elements that translate across all those screens and devices to tie the experience together.
The type we use plays an increasingly important role in conveying critical information in a consistent and ‘glance-able’ way, and in getting across brand voice and creating emotional connection between user and device and organization. This talk will explore how new developments in technology and cognitive science extend the reach of our design landscape from the smallest to the biggest of screens.
A look at the history of the smallest element of text content: the paragraph. Where did it come from, how has typography been used to represent it and further our understanding of the content itself, and how can we translate that to the web. (This is a slightly evolved version of the talk being presented at FITC Toronto & CreateUpstate)
The document discusses the history and evolution of the <p> tag from Ancient Greek to modern web design. It explores how paragraph styles have changed over time and the implications of those styles on readability. Examples are provided of how CSS can be used to style paragraphs in different ways. The document advocates designing typography and layouts based on the content and considering how the <p> tag can impact the user experience.
Death, Taxes & Viewport Chrome: Designing for UncertaintyJason Pamental
Some things are certain: death, taxes, and–if you’re a web professional–the inability to know the capabilities, access speed, and dimensions of the viewport through which your design is viewed. As a designer, you must know how your content and design will be consumed before you can prepare its presentation. Web CMS’s can deliver on the technology and content management, but you must know how to design and create buildable, sustainable designs that move and scale from the smallest screens to the largest. Remember: you’re designing a responsive system of visual hierarchy, not simply a page.
Some things in life are certain: death, taxes, and – if you’re a web professional – the inability to know the capabilities, access speed and dimensions of the viewport through which your design is viewed. Welcome to your future. As a designer, it’s essential to know how your content and design will be consumed (or perceived) before you can prepare its presentation. These days, that means the involvement of a Content Management System, or CMS. Getting to know one – such as WordPress, Drupal, Joomla or Expression Engine – can exponentially increase your capabilities as a designer without feeling trapped by the technology. To the contrary – becoming CMS-familiar can lead to greater creative freedom than you could ever have imagined. The tools are better than ever and their capabilities are just amazing. All just waiting for you.
Step up and take charge. The future IS the CMS.
Web Typography & Drupal: Putting Arial Out to PastureJason Pamental
The document discusses web typography and how to implement web fonts in Drupal sites. It covers how web fonts work, common issues like FOUT, and techniques to mitigate these issues like using WebFont Loader and crafting loading CSS. It emphasizes choosing fonts carefully, testing across browsers, using fallbacks, and providing a good experience during loading. The document also provides resources for learning more about web fonts and hints that following best practices can improve designs, enhance usability and lead to better client work.
Web Strategy: What is it and why we need to careJason Pamental
Jason Pamental gave a presentation on web strategy at the Future of Web Design conference in NYC in 2010. He defined web strategy as using knowledge of a client's business and a fresh perspective to find opportunities to transform the business through the strategic selection and application of technologies with great design. Pamental emphasized that web strategists must understand the client's business, see opportunities the client cannot see, and help clients view new possibilities through design and technology in order to create happier clients and greater opportunities for work. He provided examples of web strategy projects and argued for the need for education in web strategy.
Mastering Web Design: Essential Principles and Techniques for Modern WebsiteswebOdoctor Inc
Dive into the dynamic world of web design with our comprehensive guide that covers everything from foundational principles to advanced techniques. Whether you're a beginner looking to understand the basics or a seasoned designer aiming to refine your skills, this article offers invaluable insights. Explore topics such as responsive design, user experience (UX) optimization, color theory, typography essentials, and the latest trends shaping the digital landscape. Gain practical knowledge and actionable tips to create visually appealing, functional, and user-friendly websites that stand out in today's competitive online environment. Perfect for designers, developers, and anyone passionate about crafting compelling web experiences, this guide equips you with the tools needed to elevate your web design proficiency to new heights.
Black Magic Specialist in Delhi +91 0000//0000 Astrologer In Delhiantxmodels60
Black Magic Specialist in Delhi +91 0000//0000 Astrologer In Delhi
Website For Rent :- ranjeetsinginfo009@gmail.com
Call:- 000000000000
Whatsapp Now: 00000000000
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.
Exploring Writer's Studio Interior Design: A Prototype Case StudyAditi Sh.
This PowerPoint presentation delves into a comprehensive case study and prototype study of a Writer's Studio, focusing on understanding the psychology of the writer through the spaces they use. The study emphasizes the innovative concepts of flexibility and small space optimization tailored specifically for the creative process. By analyzing the spatial dynamics, ergonomic considerations, and aesthetic choices within the studio, the presentation aims to uncover how environment influences creativity and productivity. Through detailed examination and visual documentation, it explores various design strategies employed to enhance functionality without compromising on comfort and inspiration. This presentation is ideal for architects, interior designers, and anyone interested in the intersection of psychology, design, and creative workspaces. It offers insights into designing spaces that foster concentration, creativity, and overall well-being for individuals engaged in intensive writing and creative endeavors.
Astrologer Black Magic Specialist In Delhi {=/+91 0000//0000 /} Call Now for...ranjeetsinginfo009
Astrologer Black Magic Specialist In Delhi {=/+91 0000//0000 /} Call Now for Quick Solution
Website For Rent :- ranjeetsinginfo009@gmail.com
Call:- 000000000000
Whatsapp Now: 00000000000
MATKA GUESSING | SATTA GUESSING | MATKA BOSS OTG | INDIAN MATKA | INDIAN SATTA | INDIA MATKA | INDIA SATTA | MATKA | SATTA BATTA | DP BOSS | INDIA MATKA 786 | FIX FIX FIX SATTA NAMBER | FIX FIX FIX OPEN | MATKA BOSS 440
Satta Matka, Kalyan Matka, Satta , Matka, India Matka ,Satta Matka 420, Satta Matka Guessing, India Satta,Matka Jodi Fix ,Kalyan Satta Guessing, Fix Fix Fix SattaMATKA GUESSING | SATTA GUESSING | MATKA BOSS OTG | INDIAN MATKA | INDIAN SATTA | INDIA MATKA | INDIA SATTA | MATKA | SATTA BATTA | DP BOSS | INDIA MATKA 786 | FIX FIX FIX SATTA NAMBER | FIX FIX FIX OPEN | MATKA BOSS 440
Satta Matka, Kalyan Matka, Satta , Matka, India Matka ,Satta Matka 420, Satta Matka Guessing, India Satta,Matka Jodi Fix ,Kalyan Satta Guessing, Fix Fix Fix SattaMATKA GUESSING | SATTA GUESSING | MATKA BOSS OTG | INDIAN MATKA | INDIAN SATTA | INDIA MATKA | INDIA SATTA | MATKA | SATTA BATTA | DP BOSS | INDIA MATKA 786 | FIX FIX FIX SATTA NAMBER | FIX FIX FIX OPEN | MATKA BOSS 440
Satta Matka, Kalyan Matka, Satta , Matka, India Matka ,Satta Matka 420, Satta Matka Guessing, India Satta,Matka Jodi Fix ,Kalyan Satta Guessing, Fix Fix Fix Satta
In human communication, explanations serve to increase understanding, overcome communication barriers, and build trust. They are, in most cases, dialogues. In computer science, AI explanations (“XAI”) map how an AI system expresses underlying logic, algorithmic processing, and data sources that make up its outputs. One-way communication.
How do we craft designs that "explain" concepts and respond to users’ intent? Can AI identify, elicit and apply relevant user contexts, to help us understand AI outputs? How do explanations become two-way?
We must create experiences with systems that will be required to respect user needs and dynamically explain logic and seek understanding. This is a significant challenge that, at its heart, needs UX leadership. The safety, trust, and understandability of systems we design hinge on the way we craft models for explanation.
AI Explanations as Two-Way Experiences, Led by Users
Responsive Typography: Design for meaning, not for screen size
1. Responsive Typography
hwdesignco.com | @jpamental | Responsive Typography
ARTIFACT PVD
30 September, 2014
Design for Meaning, Not for Screen Size
2. hwdesignco.com | @jpamental | Responsive Typography
What We’ll Cover
+ Lies & deceptions about art & science
+ Understanding the value of hats
+ What is Responsive Typography
+ Practicing the Four P’s
3. hwdesignco.com | @jpamental | Responsive Typography
Art & Science:
A Historical Romance
DaVinci?
That guy would code
Vermeer:
Master or Technician?
Tim Jenison
Artist or Inventor?
4. Is Tim an artist or is Tim an inventor? I think
the problem is not trying to pick one of
these things for Tim to be – the problem is
that we have that distinction
-Penn Jillette in ‘Tim’s Vermeer’
hwdesignco.com | @jpamental | Responsive Typography
5. Art is inherently tied to the
technology we use to create it
No matter how much we try to ignore it
hwdesignco.com | @jpamental | Responsive Typography
9. When is our industry going stop calling it
“web” typography?
@sblakeborough, via twitter
hwdesignco.com | @jpamental | Responsive Typography
10. hwdesignco.com | @jpamental | Responsive Typography
We can’t.
+(Insert Ginger Rogers analogy here)
+ Encompasses all of what you know about type
& its use but
+ Typography on the web requires additional
consideration (art & science)
+ Our canvas is fluid; constantly
expanding & contracting
+ Reading on screens will only increase
11. Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
hwdesignco.com | @jpamental | Responsive Typography
12. Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
hwdesignco.com | @jpamental | Responsive Typography
I love you
13. Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
hwdesignco.com | @jpamental | Responsive Typography
I love you
14. Type Is the Voice of Your Words
hwdesignco.com | @jpamental | Responsive Typography
+Words must first be read
before they can be understood
15. Type Is the Voice of Your Words
hwdesignco.com | @jpamental | Responsive Typography
+Words must first be read
before they can be understood
Four score and seven years ago our fathers brought forth on this
continent, a new nation, conceived in Liberty, and dedicated to the
proposition that all men are created equal.
16. Type Is the Voice of Your Words
hwdesignco.com | @jpamental | Responsive Typography
+Words must first be read
before they can be understood
Four score and seven years ago our fathers brought forth
on this continent, a new nation, conceived in Liberty, and
dedicated to the proposition that all men are created equal.
17. Type Is the Voice of Your Words
+Legible means you can read it
+Readable means you might actually want to
hwdesignco.com | @jpamental | Responsive Typography
18. Type Is the Voice of Your Words
+Legible means you can read it
+Readable means you might actually want to
A tale of a curious affliction
hwdesignco.com | @jpamental | Responsive Typography
19. Type Is the Voice of Your Words
+Legible means you can read it
+Readable means you might actually want to
A tale of a curious affliction
hwdesignco.com | @jpamental | Responsive Typography
20. hwdesignco.com | @jpamental | Responsive Typography
A Design Dilemma:
What We Don’t Know
+ Screen size
+ Device capabilities
+ Concurrent activities
+ Depth of focus
+ Purpose of visit
25. Responsive Typography:
Four Simple Steps
+ Performance: select fonts with care, load
what you need & don’t block the page draw
+ Progressive: plan for failure, tune up the
loading process & fallback fonts to
minimize FOUT
+ Proportion: small screens demand
subtle scale
+ Polish: Design IS the details: OpenType &
then some
hwdesignco.com | @jpamental | Responsive Typography
27. hwdesignco.com | @jpamental | Responsive Typography
Performance Matters
+ Great typography isn’t ‘I used all of them’
+ Load only what you need
Trade Gothic Next LT Pro Bold
this is a typeface this is a font
+Each font has a performance cost,
so budget wisely
34. body { font-family: “Trade Gothic”, helvetica, arial; }
.wf-inactive body { font-family: helvetica, arial; }
hwdesignco.com | @jpamental | Responsive Typography
FOUT is OUR fault
+Use these: .wf-inactive / .wf-active
+This CSS results in a blank screen during load:
+Add this & give them content, then fonts:
+Adjust font-size, line-height, letter-spacing
to avoid jumpiness
+Making it easy since 2010
50. Polish: Don’t Leave Orphans Behind
hwdesignco.com | @jpamental | Responsive Typography
+ Typogrify FTW:
http://bit.ly/rt-tpgrfy
http://bit.ly/drupaltypogrify
http://bit.ly/rt-tpgrfy-ee
http://bit.ly/rt-tpgrfy-wp
+ Also try Widowtamer for
JS drop-in solution:
http://bit.ly/rt-widotamer
+ Seems small, but has
oversized impact to
user & editor
51. A Little in Abundance is a Lot
+ Use max-width on elements to keep text readable
hwdesignco.com | @jpamental | Responsive Typography
@media (min-width: 58em) {
p { max-width: 38em; }
}
+ CSS3 brings character counts, but not universal
(vw & vh, ch & cx)
+ EMs or REMs, but no PX
+ Don’t forget: use real content!
Because Lorem Ipsum is a poser
52. hwdesignco.com | @jpamental | Responsive Typography
New Tricks
+ Emerging attributes:
font-size-adjust & font-smoothing
+ The future is here; it’s just not evenly distributed
+ Try text-rendering engine detection
w/font-smoothing
(http://typerendering.com courtesy of @NiceWebType & @bramstein)
63. Responsive Web Typography
+ Yes, it’s a thing
+ It’s about adapting to screen size, network
speed & device capabilities
+ It’s about designing for what’s next
• Last Winter Olympics: there was no iPad
• The one before? No iPhone either
hwdesignco.com | @jpamental | Responsive Typography
64. Responsive Web Typography
+ Performance
• Stats, Platforms & Screen Tests
+ Progression (It’s the web. Stuff breaks)
• If the font fails, does your design hold up?
+ Proportion
• It’s about composition (think: small paintings)
+ Polish
• Great typography is greater than the sum of its parts
hwdesignco.com | @jpamental | Responsive Typography
65. “Designers Should Code As Much
As Artists Should Mix Paint”
~ Mustafa Kurtuldu (@Mustafa_x)
hwdesignco.com | @jpamental | Responsive Typography
FOWD London