Karteikarten
website development
Karten in diesem Stapel (24)
- 1Our ideas and tools needed to change: We needed to design websites that could somehow change to fit different sized screens on different types of devices used for different purposes We needed to think ‘content-first’ – isn’t that what people come to our websites for? We needed to design for both fat fingers and tiny mouse pointers We needed to realise complex layout is optional, hierarchy is not We needed to find a name for this new approach.One definition of responsive web design:
‘Responsive design is not about “designing for mobile.” But it’s not about “designing for the desktop” either. Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web’
- Ethan Marcotte, Responsive Web Design. - 2A definition of responsive web design 2: According to Ethan Marcotte, the first person to try and define what responsive web design meant, there are three main strategies for making a responsive site: A fluid grid Flexible images ‘Media queries’: a way of expressing the way we want the site to change as the viewport (browser window) changesA definition of responsive web design 3:
A workflow and process which incorporates software that allows you to develop and decide quickly if a design will work responsively, which allows you to preview your design on multiple devices, and takes care of the boring jobs you need to do to create sites that work well for all devices
Workflows result in design patterns – little bits of pages that go together to create entire pages but exist independently of each other.
To find if a site is responsive. Modify the viewport or browser window. - 3No need to re-learn HTML : Responsive sites need this meta tag in the HTML to work as expected The tag also asks the browser to show the page’s content at the browser’s actual screen width and not to zoom it in or out initially. We need flexible layouts that can change to fit the infinite number of screen sizes out there and the unpredictable amount of content that can be created
We need to be able to control things like images that inherently have a fixed size
Ideally, we need a way of swopping out layouts or modifying them based on the size of the screen
We create small bits of code (CSS and HTML) that could exist independently and join them together
This is called ‘Atomic design’ and creates ‘Design Patterns’. - 4Classes and IDs Classes are reusable on the same page: very useful if you’re making use of the same layouts in different places (as we are) IDs are not reusable but they have some useful properties We’re using the IDs to ‘jump’ down the page. { border:1px solid red; }Typography is four things working together:
Font choice
Font size
Line height
Line length
These are all interconnected to make the job of reading your content easier for the user. If one isn’t right, the others can’t make up for it.
Line height doesn’t need a unit like pixel or em: it’s worked out as a multiple of the font-size. - 5Margins, padding, box model… Width + padding + border = actual width div { width: 330px; padding: 20px; border:10px solid red; } A new box model for your stylesheet
html { box-sizing: border-box; }
*,
*:before,
*:after { box-sizing: inherit; }
What does that do?
Padding and borders are no longer added to the width of your box!
Margins will still affect layout as they are outside the box. - 6Creating a responsive column of content We are now talking about code and design working together Our code is pretty simple. First, add padding: .container-content { padding: 10px; } Responsive column of content: calculating the width Does the width we choose create a good reading experience? Is it responsive? What happens at small sizes? .container-content { margin-left: auto; margin-right: auto; width: 500px; }Responsive column of content
We now have two problems
One we can fix with code. Use max-width and no more horizontal scrollbar!
width: 500px;
max-width: 500px;
Responsive column of content
We now have one problem:
The other we can fix with our eyes
max-width: (pixel width where we get 65 characters across including spaces);
Ideally we want 65 characters maximum
for a good reading experience.
This will depend on your typeface size. - 7Using margin to centre things margin-left: auto; margin-right: auto; Translates as ’work out the width of this box. Then whatever space is surrounding it, put half on the left and half on the right’. This will push the box into the centre once the browser has calculated the width.Responsive column of content
.container-content { padding: [some number]px;
margin-left: auto;
margin-right: auto;
max-width: [some number] px;} - 8Responsive images: a start img { max-width: 100%; height: auto; /* keeps the height in proportion to the width */ }Web Accessibility
- 9Perceivable For most users, perceivable content is visual. Your visitors view video clips, see images of your products, and read your descriptive texts. Perceivable content applies to the visual aspect of your website. But other aspects include providing a version of your content that is available for users who require other modes of sensing it. That sounds complex, but all it really requires is that information be provided in a machine- readable text format. Computers can easily and efficiently take text and convert it into Braille or audio, but they can't work with graphics, video, or audio in nearly as effectivelyOperability
Can everybody use the tools and mechanisms required to operate your website?
Every control, every link, and every button on your site is a potential point of failure for operability.
Without appropriate consideration for the disabled, you run the risk that disabled users will be unable to access your site. - 10Understandability The understandability of text is crucial to web accessibility. At broad levels, this means specifying text languages, explaining the meanings of jargon or idioms, and expanding abbreviations to clarify text. It's not just text that can present a barrier to accessibility, however. A lack of organizational predictability or proper error management can greatly decrease the accessibility of any website.Robustness
Robustness, future-proofing, user-agent independence, accessibility-supported: All are terms that suggest the same basic idea that your documents should follow standard, supported models for web document types.
In many ways, this is the simplest and most testable requirement of the WCAG, but the details can be quite complicated.
The entire text of this principle collapses down to “validate your HTML,” if you look at it in the simplest manner. From a practical perspective, it requires site authors to compose documents according to standard specifications and validate them. - 11Conformance Level Level A: For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided. Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided. Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.Colour contrast
Success Criterion 1.4.3 of WCAG 2.0 requires the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Don't ask someone to select something based on colour only - 12Screen readers "Refreshable braille displays are electronic devices used to read text tactually that is typically displayed visually on a computer monitor. The refreshable braille display is connected to the computer by a serial or USB cable and produces braille output (with small plastic or metal pins that move up and down to display the braille characters) for the reader." American foundation for the blind. Navigate via links Navigate via Headings Text - as links Problems in screen reader links listings Too many links to navigate through Link text doesn’t match topic of linked page Link text is vague Same text repeated for multiple links Vague & repeated?Hearing
Video should be captioned.
Captioning can sometimes be too difficult/expensive for small companies/budgets.
Transcripts – also an SEO benefit. - 13Skip links Skip to content Skip to navigation & content Use of ‘skip links’ Text for ‘skip links’ Skip links - How? Skip to content ….Images - alt text
Image as a link
Describe the item to which the image is linked.
alt=“Manchester Metropolitan University homepage”
alt=“MMU homepage”
alt=“MMU Logo with link to homepage”
And if it isn’t a link?
Manchester Metropolitan University
MMU logo
Photograph
A brief description of the content
alt=“Photo of Ricky Gervais”
alt=“Photograph of Ricky Gervais”
alt=“Portrait of Ricky Gervais” - 14Web design process “The web is the ultimate customer-empowering environment. He or she who clicks the mouse gets to decide everything. It is easy to go elsewhere; all the competitors in the world are but a mouse click away.”Use existing concepts
Graphical User Interface (GUI),
Human, Computer Interaction (HCI)
Art & Design concepts (Typography, fonts etc.)
Journalism
Learn from existing mediums (print, tv)
New standards, new principles/conventions - 15Web Design - evolving Text, then images, then media Tables based layout Flash for animation and interaction Pearl, .asp, .net, PHP, SQL, JavaScript CSS3, HTML5, Semantics Git, SASS, BEM, GULP Responsive, AdaptiveWeb Design - Legal & ethical issues
Legal responsibilities
Accessibility
Copyright
Defamation
Privacy
Data protection
Ethical responsibilities
Design for all
Accessibility
Copyright
Defamation
Privacy
Data protection - 16Usability Definition of Usability Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process. "[Usability refers to] the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of user.”Definition: What is user experience?
All aspects of the end-user’s interaction with the company, its services, and its products. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use.....to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design. - 17Design at the core “Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible” Donald A. Norman The Design of Everyday Things “Most people make the mistake of thinking design is what it looks like… That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” Steve JobsDefinition: User Centred Design
UCD is based upon an explicit understanding of users, tasks, and environments; is driven and refined by user-centered evaluation; and addresses the whole user experience. The process involves users throughout the design and development process and it is iterative.
Usability.gov - 18Good Usability is… Functionally correct efficient to use easy to learn easy to remember error tolerant subjectively pleasingFunctionally correct
Does what it says on the box
Does what we expect
Performs the functions the user requires
May need to meet a number of (sometimes conflicting) design goals
Efficient to use
How many hoops?
Able to perform tasks?
Time or actions required to perform tasks - measurable
Too many clicks?
Efficient = faster?
Easy to learn
Effort required to learn to perform a task
First time users
Repeat users
Less steps / easier to learn
Again, how many hoops
Easy to remember
How easy?
As I navigate the site
When I return to the site
Do I need prompts / clues?
Error tolerant
How well are errors presented?
How easy are errors detected when they do occur?
How easily errors are corrected once identified?
Subjectively pleasing
All that hard work and the user still fails to use your site because you used the wrong ‘shade of grey’.
Part of a bigger picture - 19Competitor analysis, Personas, happy path Competitors: offline Competitors: online Gather data: qualitative User opinions Gather data: quantitative Server stats Are there any industry standards? For example, all Uni web sites have an online prospectus.Content
Content informs design, not the other way around.
Content is the body beneath a well-tailored suit: the cloth adapts to and complements the figure; it doesn’t bind it in place. - 20Content creates tone Clients often have a very hard time expressing what they want in a site. Creating content first provides answers to many questions: What’s the best way to communicate the site’s calls to action? Is the associated writing style light, airy and friendly, or robust and formal? What images best complement that communication style? Are we ensuring that voice and tone remain consistent throughout?Content sets scope
Once you have content, you can make decisions of how it will best be presented.
What user interface patterns work?
How many pages will be required?
What does the site’s navigation have to cover?
Without content, any answers to these questions are uninformed guesses, at best.
Designs built without content are great exercises in imagination, but they often fail to create effective results. It takes discipline and patience to build a site in a content-first process: most designers will buck and champ at the bit in every step. But the result is always a better-informed, more communicative site. - 21CONTENT DEVELOPMENT Content strategy Content strategy focuses on the planning, creation, delivery, and governance of content. Content not only includes the words on the page but also the images and multimedia that are used. Ensuring that you have useful and usable content, that is well structured, and easily found is vital to improving the user experience of a website. Usability.gov No matter what (or who’s) definition you may subscribe to, it seems widely accepted that content strategy helps provide either traditional “editorial guidance,” pillars for communication or contributes to information management, “findability” and the practice of information architecture. Taking that into account, it follows that content strategy should provide the buyer with improved SEO, usable, useful content and a plan for maintaining that material over time.Basic Principals of a content strategy:
Good content is appropriate:
Right for the user (and the context)
Helps them accomplish their goals
"Content is perfectly appropriate for users when it makes them feel like geniuses on critically important missions, offering them precisely what they need, exactly when they need it, in just the right form." Erin Kissane
Right for the business (when it helps accomplish the goals of business)
"What hurts your users hurts you." Erin Kissane
Context:
"Content is something we connect to emotionally, converse about or learn from … but content without context is useless."
Daniel Eizans
Good content is useful:
"Define a clear, specific purpose for each piece of content; evaluate content against this purpose" Erin Kissane
Do you know what each item of content on your site is trying to achieve?
Once you know, you can ask 'Does it accomplish this task'?
Good content is user-centred:
It works. It communicates. The light gets through.
Speaks in the language the user understands.
Erin Kissane
Good content is consistent:
Consistency of language
Cons - 22Good content is concise: Cut the crap Mission statements Press releases Long, unreadable legal pages Endless feature lists Redundant (repeated) documentation Audiovisual dust bunnies Erin KissaneGood content is supported
Publish no content without a support plan"
Erin Kissane
This content is live
A content lifecycle - 23design and designers Designers are influenced by other designers working at the same time and designers that worked before them. It’s a conversation. brand colours why we use colours process to use colourGrid layout
Do grids make everything look the same?
NO
What’s all this got to do with the web?
Grid was incredibly successful. It still influences most print designers.
New disciplines have to build on the old.
Layout in CSS? Absolute positioning Floats display:table
Grid can describe the layout of an entire page in CSS for the first time - 24So let’s sort out the basics before we give it a go. We specify – Rows and columns – Grid gap (gutters) based on the kinds of content we have to work with. Then ‘pin’ our content to the grid boxes created. Content can ‘span’ more than one box. CSS grid goes ‘one level down’ like flexbox ← display:grid . ← display:grid Bits are missing Like flexbox, it goes one level down, which means we need to flatten out our HTML Accessibilty: source order vs visual order? Display: subgrid isn’t supported What about things that go 100% width? No baseline grid support (eh?)
Informationen
- Beschreibung
- information and communications Karteikarten am website development, erstellt von Numan Ahmed am 02/05/2018.
- Erstellt von
- Numan Ahmed
- Aufrufe
- 2
- Bewertung