a bit hacky... but fixes a ux problem
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
.parallax{
background-attachment: fixed;
/* fixed is NOT supported on ios devices */
}
}
usability testing. Doing some usability testing for an application we are working on to help students develop their transversal / soft skills. Please check out the app, then reply to the questionnaire.
test on mobile or at least using developer tools (incognito?) application
This incorporates the UI / UX evaluations we have done for project 1 in UI/UX.
project 2: UI/UX project
Create a web application with a focus on UI/UX backed by a relational db, using PHP, mySQLi, fetch API & JSON. Using your description, tech plan and UI/UX plan, present your site as a case study.
deliverables:
project 2 final site presentation: 50% (2024/01/10)
application can be practically with the following attributes:
allows for user input / interaction
backed by a relational db using php & mySQLi
used the fetch API & JSON
project 2 case study: 50% (2024/01/17)
present your site in the form of a case study that includes:
a description of your site adapted from ex2.1
your tech plan adapted from ex2.2
your ui/ux plan adapted from ex2.3
wrapped in common accoutrements such as object, challenge / problem, solution, takeaways
plus add some feedback from after your final site presentation
Keep the case study concise and digestible for potential clients / stage hosts / employers.
Resdesign an existing user experience to improve both the UI & UX, each according to the evaluation criteria we have established. The experience could be a web site, an application, a platform, a system or whatever you think is appropriate.
Deliverables:
25%: analysis of existing UI/UX with supporting visuals (photos, videos, sketches).
25%: 3 user personas (quick protos are fine)
25%: improvement plan including what you will improve, how and why, why, why, why, why
25%: a final improved "document" normally a Figma prototype, website or app. But it could take another form depending on your target UX.
Your project should be presented as a web page in the form of a case study you can use in your portfolio. Keep it concise and digestible for potential clients / stage hosts / employers.
due: Nov. 15 (presentation) / Nov. 22 final after improvements
responsiveness & feedback: very nice for intensity feedback. All good except in intensity button feel
possible planned coding tutorials
grid
responsive design
grid-template-columns
@media queries
minmax
repeat
clamp
modals
localStorage
intersection observer
css animation
transitions
2d / 3d transform
@keyframe animations
js animate api
event delegation
original list
Sharing this list of common UI / UX coding techniques.
While not really techniques, first & foremost should be sites that are mobile-first & repsonsive, accessible, progressively enhanced and degrade gracefully.
