Making the Web Easy

Feb 24, 201651 likes23,850 views

Your website's users want to get stuff done, and you probably aren't making it easy for them. When users encounter forms with unnecessary steps, content that requires too many clicks to access, or things that just don't make sense, they often give up. In this talk, you��ll see some practical examples of sites that do a good job of making interactions and content easy to follow and understand, and you'll learn how to help your users get to where they want to be without annoying them on the way there. Presented in 2016 at ConFoo.

Photo credit: Jeremy Brooks via Creative Commons
Making the Web
@clarissa

Photo credit:The Adventures of Kristin & Adam via Creative Commons

Photo credit: Simone Bosotti via Creative Commons

Photo credit: Jeff Turner via Creative Commons

Photo credit: Paul Swansen via Creative Commons

Photo credit:Aaron Fulkerson via Creative Commons

Photo credit:Thomas Link via Creative Commons

https://twitter.com/halvorson/status/686569663761891328

<input'type="text"'name="username">
Text

<input'type="date"'name="birthday">
Date

<input'type="time"'name="start5time">
Time

<input'type="email"'name="email5address">
Email

<input'type="number"'name="amount">
Number

<input'type="tel"'name="phone5number">
Telephone

<label>
First'Name'<span>(required)</span>
<input'type="email"'
name="email5address"'required'
aria5required="true">
</label>

input[required]'{border:'1px'
dashed'#f00;}'
or
input:required'{border:'1px'
dashed'#f00;}

<label>
Email'Address
<input'type="email"'name="email5
address"'placeholder='
"name@domain.com">
</label>

p'{'line5height:'1.3'}
@media'only'screen'and'(min5
width:'30em)'{
''''p'{'line5height:'1.4'}
}
@media'only'screen'and'(min5
width:'60em)'{
''''p'{'line5height:'1.5'}
}

p'{
''''line5height:'1.5;
''''margin5top:'1.5em;
''''margin5bottom:'1.5em;
}

<p>These'stories'are'true.'Although'I'have'
left'<span'class="testing">the'strict'line
of'historical</span>'truth'in'many'places,'
the'animals'in'this'book'were'all'real'
characters.</p>
.testing'{'color:'red;'}

Source: Canadian Literacy and Learning Network
42% of Canadian adults
between 16-65 have low
literacy skills.

If you can't explain it simply,
you don't understand it well
enough.
- possibly Albert Einstein

Before:
When the process of freeing a vehicle that has
been stuck results in ruts or holes, the operator
will ?ll the rut or hole created by such activity
before removing the vehicle from the immediate
area.
After:
If you make a hole while freeing a stuck vehicle,
you must ?ll the hole before you drive away.

Get rid of half the words
on each page, then get rid
of half of what��s left.
- Steve Krug

Top Level Heading
Second Level Heading
Third Level Heading

Credit: Rosenfeld Media via Creative Commons

Credit: thecrazy?lmgirl https://?ic.kr/p/5X3ixX

7/7/2015 Traybaked Keralan fish curry | Jamie Oliver | Food | Jamie Oliver (UK)
Toogle menu Right Menu
Home
Recipes >
Shop
Restaurants
Videos
Discover >
-- Features
-- Galleries
-- News
Foundation
Careers
Help & More
Advertise With Us
< Back
Recipes home
Chicken
Beef
Pasta
Seafood
Rice
Fish
Lamb
Pork
Game
Duck
Vegetables
Chocolate
Bread
Cheese
Eggs
Fruit
Turkey
< Back
Recipes
Videos

<link'rel="stylesheet"'href="styles.css">
<link'rel="stylesheet"'href="printstyles.css"'
media="print">

<a'
href="mailto:test@example.com">
test@example.com</a>

<a'href="tel:15877522555266">
15877'CALL'BMO'(22555266)</a>

Photo credit:Toshiyuki IMAI via Creative Commons

Photo credit: Japanexperterna via Creative Commons

Photo credit: Robert S. Donovan via Creative Commons

<script'type="text/javascript"'defer>
''''...
</script>
<script'async'src=/slideshow/making-the-web-easy/58677917/"example.js">
''''...
</script>

Photo credit: Kaz K via Creative Commons

https://developers.google.com/speed/pagespeed/

Photo credit: GotCredit.com
via Creative Commons

Clarissa Peterson
clarissapeterson.com
@clarissa

The document is an outline for a presentation about the negative effects of cocaine. It discusses how cocaine is addictive and can have serious health consequences, including sudden death. It also examines the societal impacts of cocaine, such as how it affects families by causing disconnection, and how the drug trade impacts the economy and housing market. Incarceration rates increased dramatically due to the War on Drugs. The presentation aims to raise awareness of these issues and promote solutions like education, drug take-back events, and treatment programs.

How to Add FEEDJIT on Bloggerarbyawa

SydStart 2011 Autumn - BigYah - Alan JonesThe Start Society

The document discusses the importance of storytelling for startups and provides tips for product teams and CEOs. It notes that behind every great startup is a good story and compares the narrative arc of a startup to that of a movie. It then offers brief tips for product teams, such as not adding more features but learning customer needs, and for CEOs, such as great stories making the best investments and doing diligence on term sheets.

Installar desde la_fuente_linux_make_configureJames Jara

How to use G+ hangoutRuby Soho

This document provides instructions for starting a group video conference, or "hangout", over Google+. It is a 5 step process that involves: 1) having a Google+ account and adding contacts to circles, 2) accessing your Google+ profile, 3) accessing the hangouts feature from the sidebar, 4) starting a hangout, and 5) inviting people from your circles to join. The instructions explain how to install any necessary plugins and set up your webcam, microphone, and speakers to participate in the video chat.

Top 10 �ݺ�ߣsDom2319

Checkear si esta_inslatado_un_modulo_en_apacheJames Jara

17 Ways to Design a Presentation People Want to ViewJim MacLeod

10 Color Banner Design InspirationBannersnack

The colours that dresses your brand are playing an important role in how they support this personality that you want to portray. Don��t panic when a colour speaks one thing, but in the relation to the brand it delivers a slightly different response. Check out these examples of how brands used in conveying their message through branding and banner advertisement. Read more http://www.bannersnack.com/blog/color-banner-design-inspiration/

Build Features, Not AppsNatasha Murashev

25 Festive Fonts For Women Oriented Businesses!DesignMantic

How to Design a LogoFiverr

This document provides guidance on how to design an effective logo. It emphasizes that logos should be simple, with 93% of successful logos using a simple design. Logos should use a limited color palette, typically one or two colors that match the company's message. Emerging trends in logo design emphasize minimalism, monoline designs, negative space, and hand-drawn styles. Designers must balance creating original logos with the need to take on multiple projects, avoiding plagiarism.

Visual Design with DataSeth Familian

An immersive workshop at General Assembly, SF. I typically teach this workshop at General Assembly, San Francisco. To see a list of my upcoming classes, visit https://generalassemb.ly/instructors/seth-familian/4813 I also teach this workshop as a private lunch-and-learn or half-day immersive session for corporate clients. To learn more about pricing and availability, please contact me at http://familian1.com

TEDx Manchester: AI & The Future of WorkVolker Hirsch

Typography for [Digital] HumanistsAmy Papaelias

24 Design Tips from Real DesignersEdahn Small

15 Quotes To Nurture Your Creative Soul!DesignMantic

Every now and then, we all crave inspiration to get started. but often times, inspiration is hardest is to find when it is needed the most. but powerful words almost always do the trick. They have power that is undeniable. So for all the creative souls out there, here we share some remarkable sayings from legends to feed your mind and strengthen your design game ... Remember, sharing is caring! :)

Mobile-First SEO - The Marketers Edition #3XEDigitalAleyda Sol��s

The Sketchnote Mini-WorkshopMike Rohde

Design for Startups - Build Better Products, Not More FeaturesVitaly Golomb

Pre-order Vitaly's book "Accelerated Startup �C The New Business School" http://golomb.net/book Apple owes the title of the world��s most valuable company to its genius in design. Good design is never accidental and at the core of a successful product is an elegant solution to a painful problem. Design has earned a very important seat at the table with today��s companies especially in the world of software and apps. In this highly engaging presentation, Vitaly covers principles and business value of good design, design disciplines, how to hire and work with designers, and the design success formula.

Creative Mornings San Diego 2015Anne McColl

Design Thinking: Finding Problems Worth Solving In HealthAdam Connor

Finding Our Happy Place in the Internet of ThingsPamela Pavliscak

In the future, technology will work together and make decisions for us, though it may not truly understand humans. Currently, technology can have negative effects like distracting and isolating people. However, if designed well with a focus on empathy, emotional intelligence, and human well-being, technology could have positive impacts like strengthening relationships and empowering personal growth. Creating technology with emotional sensitivity, transparency, and a wellness model may lead to a more human future.

10 Best Practices of a Best Company to Work ForO.C. Tanner

UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter

1) The document discusses how the University of York Library has used various user experience (UX) techniques like ethnographic observation and interviews to better understand user needs and behaviors. 2) Some changes implemented based on UX findings include installing hot water taps, changing hours, and adding blankets - aimed at improving the small details of user experience. 3) The presentation encourages other libraries, archives and museums to try incorporating UX techniques like behavioral mapping and cognitive interviews to inform design changes that enhance services for users.

3 Things Every Sales Team Needs to Be Thinking About in 2017Drift

UX Strategy - the secret sauce that defines the pixie dustEric Reiss

My opening keynote at UX Riga, 2016 UX strategy is about analyzing an organization��s business strategy and outlining what needs to be done from a UX perspective to ensure that the goals of the business strategy are achieved. In brief, UX strategy is the glue that binds the company vision (goals) with the day-to-day UX tactics (execution). Without a clear UX strategy, it is entirely possible to design killer UX concepts, yet fail miserably in the marketplace. That happens a lot. This talk aims to help companies and designers avoid costly yet easily avoidable pitfalls.

Alt Text Is Your SuperpowerClarissa Peterson

Designing for Users: How to Create a Better User ExperienceClarissa Peterson

You can launch the best-looking website ever, but if it��s not easy to use, it��s not going to be successful. Learn to think like a user and uncover usability problems that might not be apparent at first glance. Find out some basic improvements you can implement to make your site more usable and accessible. User experience isn��t just for designers to think about: everyone who works on a website has the opportunity to make the user experience better. Even little changes can make a big difference. Presented at WordCamp Calgary, OpenWest, Web Unleashed, ThunderPlains, and ConFoo Vancouver in 2017. Presented at ConFoo Montreal in 2018.

More Related Content

Viewers also liked (20)

17 Ways to Design a Presentation People Want to ViewJim MacLeod

10 Color Banner Design InspirationBannersnack

Build Features, Not AppsNatasha Murashev

25 Festive Fonts For Women Oriented Businesses!DesignMantic

How to Design a LogoFiverr

Visual Design with DataSeth Familian

TEDx Manchester: AI & The Future of WorkVolker Hirsch

Typography for [Digital] HumanistsAmy Papaelias

24 Design Tips from Real DesignersEdahn Small

15 Quotes To Nurture Your Creative Soul!DesignMantic

Mobile-First SEO - The Marketers Edition #3XEDigitalAleyda Sol��s

The Sketchnote Mini-WorkshopMike Rohde

Design for Startups - Build Better Products, Not More FeaturesVitaly Golomb

Creative Mornings San Diego 2015Anne McColl

Design Thinking: Finding Problems Worth Solving In HealthAdam Connor

Finding Our Happy Place in the Internet of ThingsPamela Pavliscak

10 Best Practices of a Best Company to Work ForO.C. Tanner

UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter

3 Things Every Sales Team Needs to Be Thinking About in 2017Drift

UX Strategy - the secret sauce that defines the pixie dustEric Reiss

17 Ways to Design a Presentation People Want to ViewJim MacLeod

10 Color Banner Design InspirationBannersnack

Build Features, Not AppsNatasha Murashev

25 Festive Fonts For Women Oriented Businesses!DesignMantic

How to Design a LogoFiverr

Visual Design with DataSeth Familian

TEDx Manchester: AI & The Future of WorkVolker Hirsch

Typography for [Digital] HumanistsAmy Papaelias

24 Design Tips from Real DesignersEdahn Small

15 Quotes To Nurture Your Creative Soul!DesignMantic

Mobile-First SEO - The Marketers Edition #3XEDigitalAleyda Sol��s

The Sketchnote Mini-WorkshopMike Rohde

Design for Startups - Build Better Products, Not More FeaturesVitaly Golomb

Creative Mornings San Diego 2015Anne McColl

Design Thinking: Finding Problems Worth Solving In HealthAdam Connor

Finding Our Happy Place in the Internet of ThingsPamela Pavliscak

10 Best Practices of a Best Company to Work ForO.C. Tanner

UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter

3 Things Every Sales Team Needs to Be Thinking About in 2017Drift

UX Strategy - the secret sauce that defines the pixie dustEric Reiss

More from Clarissa Peterson (19)

Alt Text Is Your SuperpowerClarissa Peterson

Designing for Users: How to Create a Better User ExperienceClarissa Peterson

Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson

Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages �� but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens. Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.

Responsive ColorClarissa Peterson

Color is one of the first things we learn how to do in CSS �� and yet many of us don't ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website. And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically. Presented in 2015 & 2016 at Amazon's WebDevCon, ConFoo, Breaking Development, Mobile+Web Dev Conference, Code Fellows Seattle, CascadiaFest, CSS Summit, CSS Brigade Vancouver, CSS Day Amsterdam, Future Insights Live, WebVisions NYC, and Albany UX.

Responsive Design WorkshopClarissa Peterson

UX & Responsive DesignClarissa Peterson

Designing Responsive WebsitesClarissa Peterson

Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process��and how to change their workflow to create a great responsive site. Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.

Responsive Typography IIClarissa Peterson

Your content is the most important feature of your website, so it's important to make sure that the text looks good and is easy to read no matter what device type or screen size it's being viewed on. One size does not fit all when it comes to typography, but you can use media queries to adjust type qualities such as size, line height, column width, margins, hyphenation, and even typeface depending on the viewport size.?Learn how you can use CSS to apply design rules that will make your typography look better and perform better across devices.?You'll also find out how typography affects the loading time of your website, and what you can do to improve performance. Presented in 2015 at ConFoo and Albany UX. Presented in 2014 at WebVisions Chicago, Blend Conference, Frontend Conference Zurich, Refresh Ottawa, Mobile+Web Dev Conference, STC Summit, Bmoresponsive, ConvergeSE, and Girl Geeks Montreal.

Responsive Design in the Real WorldClarissa Peterson

Responsive Design EssentialsClarissa Peterson

Responsive Design Tools & ResourcesClarissa Peterson

The document summarizes topics covered in a responsive design meetup, including an overview of responsive frameworks like Foundation and Bootstrap, common navigation patterns, the use of preprocessors like Sass and Less, responsive images, and polyfills like Picturefill. Breakpoints, media queries, flexible grids, and responsive typography, buttons and forms are some techniques discussed for building responsive websites.

Content Strategy for Responsive WebsitesClarissa Peterson

UX & Responsive DesignClarissa Peterson

The document discusses optimizing user experience across devices through responsive design. It explains that responsive design allows a single website to be accessed from any device by adjusting the layout. The key aspects of responsive design are flexibility and adjustability. It emphasizes starting with content and designing for the context of use through small-screen first approaches and testing on actual devices. Frameworks like Foundation can help with responsive design, and style tiles help communicate visual designs. The goal is to provide equal access to content on any device.

Responsive Design Clarissa Peterson

Responsive Design Tools & ResourcesClarissa Peterson

Optimizing User Experience with Responsive Web DesignClarissa Peterson

Responsive web design allows a single website to be accessed from any device by dynamically adjusting the layout depending on screen size. The content remains the same across devices but is formatted appropriately for each screen width through techniques like adjusting column numbers and widths. Designing first for mobile forces focus on essential content and ensures parity across devices. Examples demonstrate how navigation, images and text restructure seamlessly for an optimized experience on any device.

Responsive Design Heaven & HellClarissa Peterson

Introduction to Responsive Design v.2Clarissa Peterson

Introduction to Responsive Web DesignClarissa Peterson

Alt Text Is Your SuperpowerClarissa Peterson

Designing for Users: How to Create a Better User ExperienceClarissa Peterson

Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson

Responsive ColorClarissa Peterson

Responsive Design WorkshopClarissa Peterson

UX & Responsive DesignClarissa Peterson

Designing Responsive WebsitesClarissa Peterson

Responsive Typography IIClarissa Peterson

Responsive Design in the Real WorldClarissa Peterson

Responsive Design EssentialsClarissa Peterson

Responsive Design Tools & ResourcesClarissa Peterson

Content Strategy for Responsive WebsitesClarissa Peterson

UX & Responsive DesignClarissa Peterson

Responsive Design Clarissa Peterson

Responsive Design Tools & ResourcesClarissa Peterson

Optimizing User Experience with Responsive Web DesignClarissa Peterson

Responsive Design Heaven & HellClarissa Peterson

Introduction to Responsive Design v.2Clarissa Peterson

Introduction to Responsive Web DesignClarissa Peterson

Recently uploaded (20)

Prospectus_2023_(13-01-2023) (1).pdfhhhhhabduljaleelbaat48

Ch6-CuttingTools power point presentaiio2024ht56524

Habilidad vs Certificaciones en revit.pdfFranciscoLopez913660

Promoting Sustainable Development of Hill Areas --Issues and OptionsJIT KUMAR GUPTA

Managing and Rationalising India��s Hill Areas Growth and Development ; Hill areas are known to be different and distinct from plain areas of any country, because of its unique diversity, physiography, structure, topography, morphology, flora, fauna, herbs, fruits, vegetation, bio-diversity, climate, culture, heritage, fragility, vulnerability, nature, natural resource, views, quality of life, lakes, glaciers, mobility, infrastructure, built structures etc. Occupying 17% geographical areas and housing 11% national population, hill areas occupy unique space and importance in the growth story of India, as a nation. Despite distinct character, role , relevance and importance of rational planned development of hill areas, its overall / integrated development and management has been marginalized. With priority and resources going to the plain areas of the country, hill areas are being subjected to large unplanned, irrational and sub-standard growth and development. Accordingly, hill areas are fast becoming hotbeds of vulnerability, both natural and manmade, facing large number of challenges in terms of earthquakes, landslides and flooding, leading to massive loss of human life, animals, infrastructure, built environment and property. Current scenario of irrational, unplanned and haphazard development in hill areas can be, primarily and essentially, attributed to the absence of adequately trained manpower in the art and science of planning, development and management of the hill areas and giving low priority to rationalising development of hill areas. Having special and specific features, hill areas pose different/unique challenges in planning and development and accordingly need different skill-sets, understanding, expertise and approach to its planning and development. Unfortunately, despite having large area and housing large population, no institution in the country offers specialized course in the planning, development , construction and management of hill areas. It is time for Government of India and hill states of India, to ask all IITs/Nits/SPAs and other private universities, located in the hill states to run dedicate specialized courses for the planning, development and management of hill areas. In addition, Government of India, must enact a law and Constitute a High Powered National, Hill Area Planning and Development Authority , on the pattern of NCR Delhi , comprising of representatives of Government of India, hill states and experts from the related fields, under the overall Chairmanship of Minister-in Charge Hill States with Ministers of hill states, Chief Secretaries of Hill States as members , to define the agenda and roadmap for the integrated growth and development of hill states of the country. The Authority should be mandated to prepare the Regional plan of the entire Himalayan Region and provide framework for the states to draw its own Regional Plan. This would help in not only ensuring integrated growth

Gears, their types description and pictures.pptxkmfprepclub

Grade 7 powerpoint for HTML and CSS introductionChristopherPurcia1

Futuristic Background Infographics by me .100ravbhu

89_Theories_ of Child_ Development.pptxhhhhNoorien3

cookie-templaterrrrrrrrrrrrrrrrrrrrrrrrrmahojav906

Introduction_to_Verilog (1).pptxzhdYfzhfzyhereshmurugan007

Tongue_Disease_Detection_Presentation_v2.pptxdnsr8465

Justice.pdfmmmmmmmmmmmmmmmmmmmkjhhhhhhjgshraddhaborade3186

OLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdfDimejiFakorede

NWP Power Point for Energy Audit Report.pptxnavakadhammavaro

A BRIEF EXPLANATION ABOUT HTML ELEMENTS AND USESxdrillz3

Download Adobe After Effects Crack Latest Version [Updated]muhaamadalhan

Supply chain design working and flexibleDikshaGupta189

Today what does K means in ABC segmentation of product for demand forecasting In ABC segmentation for demand forecasting, the addition of K represents the incorporation of Kraljic's Matrix principles. Kraljic's Matrix is a procurement strategy tool used to categorize products based on supply risk and impact on business profitability. When applied to ABC segmentation, the "K" factors in supply-side considerations alongside demand patterns. Here��s a brief overview: A-category items (high-priority): Products with high demand and significant revenue contribution. They might also be strategic in terms of procurement and could fall under strategic items in Kraljic's Matrix. B-category items (medium-priority): Moderate demand and revenue impact. Typically classified as leverage or bottleneck items in Kraljic's Matrix. C-category items (low-priority): Low demand and revenue contribution. These often overlap with routine items in the matrix. Integrating the "K" concept ensures that both demand patterns and supply risk are optimized, leading to better forecasting and inventory decisions. It's particularly useful in industries with fluctuating supply chain dynamics. Does this concept align with what you're exploring in your preparations? for which kind of product to check forecast accuracy we should use MSE not MAPE in demand planning Mean Squared Error (MSE) is preferred over Mean Absolute Percentage Error (MAPE) for products with low or intermittent demand2. Here's why: MAPE can become unreliable when actual demand values are close to zero, as it calculates errors in percentage terms. For example, if the forecast predicts 2 units but actual demand is 1 unit, the error percentage becomes disproportionately high. MSE, on the other hand, focuses on the magnitude of errors without scaling them to percentages. It is particularly useful for products with sporadic or unpredictable demand patterns, where absolute error values provide a clearer picture of forecast accuracy. This approach ensures that forecasting models remain robust even for niche or irregularly sold items. Does this align with your experience in demand planning? mape formula The formula for Mean Absolute Percentage Error (MAPE) is: ? ? ? ? = 1 ? �� O Actual ? Forecast Actual �O �� 100 Where: Actual = Observed or real value Forecast = Predicted value n = Total number of observations. It calculates the average percentage error between forecasts and actual values, making it a widely used metric in demand planning. It works best when actual values are not close to zero, as the percentage can become skewed in such cases. Does this help clarify its usage in your analysis? difference between BIAS and MAPE BIAS and MAPE are both metrics used to evaluate forecast accuracy, but they serve distinct purposes: BIAS: Definition: Measures the tendency of forecasts to consistently over-predict or under-predict demand. Formula: ? ? ? ? = �� ( Forecast ? Actual ) Key Insight: Positi

Dropbox Sharing Methods: Real-World Applicationsjpopulimroch

Architecture student model-making imagesmumtahatabassum1842

AKoblitz - Design Strategy - workshop - Apr2025.pdfAriana Koblitz

Prospectus_2023_(13-01-2023) (1).pdfhhhhhabduljaleelbaat48

Ch6-CuttingTools power point presentaiio2024ht56524

Habilidad vs Certificaciones en revit.pdfFranciscoLopez913660

Promoting Sustainable Development of Hill Areas --Issues and OptionsJIT KUMAR GUPTA

Gears, their types description and pictures.pptxkmfprepclub

Grade 7 powerpoint for HTML and CSS introductionChristopherPurcia1

Futuristic Background Infographics by me .100ravbhu

89_Theories_ of Child_ Development.pptxhhhhNoorien3

cookie-templaterrrrrrrrrrrrrrrrrrrrrrrrrmahojav906

Introduction_to_Verilog (1).pptxzhdYfzhfzyhereshmurugan007

Tongue_Disease_Detection_Presentation_v2.pptxdnsr8465

Justice.pdfmmmmmmmmmmmmmmmmmmmkjhhhhhhjgshraddhaborade3186

OLADIMEJI FAKOREDE DESIGN REALISATION REPORT.pdfDimejiFakorede

NWP Power Point for Energy Audit Report.pptxnavakadhammavaro

A BRIEF EXPLANATION ABOUT HTML ELEMENTS AND USESxdrillz3

Download Adobe After Effects Crack Latest Version [Updated]muhaamadalhan

Supply chain design working and flexibleDikshaGupta189

Dropbox Sharing Methods: Real-World Applicationsjpopulimroch

Architecture student model-making imagesmumtahatabassum1842

AKoblitz - Design Strategy - workshop - Apr2025.pdfAriana Koblitz

Making the Web Easy

1. Photo credit: Jeremy Brooks via Creative Commons Making the Web @clarissa

3. Photo credit:The Adventures of Kristin & Adam via Creative Commons

4. Photo credit: Simone Bosotti via Creative Commons

5. Photo credit: Jeff Turner via Creative Commons

6. Photo credit: Paul Swansen via Creative Commons

7. Photo credit:Aaron Fulkerson via Creative Commons

8. Photo credit:Thomas Link via Creative Commons

9. https://twitter.com/halvorson/status/686569663761891328

10. What Is This Website?

19. The One Piece of Information

25. Don't Hide Things

30. Splash Screens? Almost Never

31. No

35. Start Here

41. Form Fields

42. <input'type="text"'name="username"> Text

43. <input'type="date"'name="birthday"> Date

44. <input'type="time"'name="start5time"> Time

45. <input'type="email"'name="email5address"> Email

46. <input'type="url"'name="website"> URL

47. <input'type="number"'name="amount"> Number

48. <input'type="tel"'name="phone5number"> Telephone

49. De?ne What's Needed

55. Show Password

58. Avoid Drop-downs For Short Lists

62. Ask For Less

67. Show Which Fields Are Required

70. <label> First'Name'<span>(required)</span> <input'type="email"' name="email5address"'required' aria5required="true"> </label>

71. input[required]'{border:'1px' dashed'#f00;}' or input:required'{border:'1px' dashed'#f00;}

72. Validate Immediately

75. Use Placeholders

77. <label> Email'Address <input'type="email"'name="email5 address"'placeholder=' "name@domain.com"> </label>

78. Line Height (Leading)

80. p'{'line5height:'1;'}

81. p'{'line5height:'2;'}

82. p'{'line5height:'1.4;'}

83. p'{'line5height:'1.3'} @media'only'screen'and'(min5 width:'30em)'{ ''''p'{'line5height:'1.4'} } @media'only'screen'and'(min5 width:'60em)'{ ''''p'{'line5height:'1.5'} }

84. Vertical Margins

85. p'{ ''''line5height:'1.5; ''''margin5top:'1.5em; ''''margin5bottom:'1.5em; }

86. Line Length (Measure)

90. 45-75 Characters

91. 65 58 65 73 68 67 66 74 72 69 69

92. <p>These'stories'are'true.'Although'I'have' left'<span'class="testing">the'strict'line of'historical</span>'truth'in'many'places,' the'animals'in'this'book'were'all'real' characters.</p> .testing'{'color:'red;'}

93. <p>These'stories'are'true.'Although'I'have' left'<span'class="testing">the'strict'line of'historical</span>'truth'in'many'places,' the'animals'in'this'book'were'all'real' characters.</p> .testing'{'color:'red;'}

94. http://codepen.io/chriscoyier/pen/atebf

95. Plain Language

96. Source: Canadian Literacy and Learning Network 42% of Canadian adults between 16-65 have low literacy skills.

97. If you can't explain it simply, you don't understand it well enough. - possibly Albert Einstein

98. Before: When the process of freeing a vehicle that has been stuck results in ruts or holes, the operator will ?ll the rut or hole created by such activity before removing the vehicle from the immediate area. After: If you make a hole while freeing a stuck vehicle, you must ?ll the hole before you drive away.

99. Page Structure

100. Get rid of half the words on each page, then get rid of half of what��s left. - Steve Krug

101. Top Level Heading Second Level Heading Third Level Heading

103. Credit: Rosenfeld Media via Creative Commons

105. Search Results

117. Colour Blindness

118. Normal Deuteranope Protanope Tritanope

121. Credit: thecrazy?lmgirl https://?ic.kr/p/5X3ixX

125. Credit: Rosenfeld Media via Creative Commons

126. Print It

127. 7/7/2015 Traybaked Keralan fish curry | Jamie Oliver | Food | Jamie Oliver (UK) Toogle menu Right Menu Home Recipes > Shop Restaurants Videos Discover > -- Features -- Galleries -- News Foundation Careers Help & More Advertise With Us < Back Recipes home Chicken Beef Pasta Seafood Rice Fish Lamb Pork Game Duck Vegetables Chocolate Bread Cheese Eggs Fruit Turkey < Back Recipes Videos

128. <link'rel="stylesheet"'href="styles.css"> <link'rel="stylesheet"'href="printstyles.css"' media="print">

129. Make It Responsive

134. Links

137. <a' href="mailto:test@example.com"> test@example.com</a>

141. <a'href="tel:15877522555266"> 15877'CALL'BMO'(22555266)</a>

142. Tap Targets

143. Photo credit:Toshiyuki IMAI via Creative Commons

144. Photo credit: Japanexperterna via Creative Commons

145. Testing

146. Photo credit: Robert S. Donovan via Creative Commons

147. Performance

148. Photo: Bortzmeyer via Creative Commons