Comments (31)
Based on UX work done in #1073.
from webmaker.org.
blocks #1071
from webmaker.org.
If we're saving the whole page, why not just use goggles for this?
from webmaker.org.
goggles would work technically, but it might be too much tooling for something that we need to keep real simple. Discuss w/ @xmatthewx in #1073 to unlock secrets.
from webmaker.org.
- fake typing in the input box
-
click button to save & move onclick next button to move on -
actual saving of content - join screen w/ preview and "agree" box
- connect to login3 modal
-
landing (logged in) CTA -
show only x-ray goggles in last phase of login modals
from webmaker.org.
blocks #1082
from webmaker.org.
We might need to scale the type based on character count and width of the entry space. Mobile could especially suffer without it.
from webmaker.org.
Assets in dropbox: https://www.dropbox.com/sh/r5o9qvrfbs9nvz4/AACKOzDYfED0e7NMeAv594gua?dl=0
I included the hand-drawn arrow as png and svg. Let me know if you need any adjustments.
from webmaker.org.
Final splash: https://redpen.io/tw577ea2513e0dcdce
Mobile view: https://redpen.io/md1632a6c53a033b86
Final signup: https://redpen.io/dfb517c69e56050443
Mobile view: https://redpen.io/sfdd780957757e331b
from webmaker.org.
@ScottDowne see #1079 (comment) for copy to use.
from webmaker.org.
@ScottDowne see #1073 (comment) for final design.
from webmaker.org.
Sorry. I said that wrong. After the hamburger appears at < 768px we should jump to a wide mobile layout. Let me know if this gives you any trouble.
before break https://redpen.io/cx28905f7923498c99
after the break https://redpen.io/gk383a15c1f32ac43c
from webmaker.org.
- text is misaligned in Chrome + Safari
- text overflow cut off on mobile, text is too big
- heart is pixelated on retina screens
- too much space between heart and 'sharing' (should be even to the distance between I and heart)
Also IMO the typing is too slow
from webmaker.org.
On the signup screen can we change "craft" to "make" to keep our language consistent:
"Now, learn to make and share more of your favorite things on the web."
from webmaker.org.
Ali, here is a pull request that fixes the lings above that Kate listed: #1102
from webmaker.org.
Android 4.4.4
Chrome
Alignment of input field is low (as it is in Chrome Desktop). The line cuts across letters. Ok in Firefox on Android.
from webmaker.org.
- on the sign up screen - the spacing between the button and input box is too tight
- on the sign up screen - the button and input box should be aligned left
- in confirmation modal - the checkbox should either have fill or a check. It should have higher color contrast:
from webmaker.org.
The alignment of the text looks good in all three browsers (Chrome, Firefox and Safari)
Looking at mobile view and it does seems to be fine now.
Heart looking good now with retina
Heart and sharing doesn't have much spacing anymore.
from webmaker.org.
Chrome 39.0 & Firefox Dev
OS X 10.10.1
@media - The arrow points to the wrong place in screen width from 480px to 768px.
- Let's match the layout used for < 480px screen for everything less than 768.
from webmaker.org.
⌚ Is anyone using a watch to view webmaker??? ⌚
The arrow breaks on screens less than 220px. ;)
from webmaker.org.
Also broken on my tamagochi
from webmaker.org.
FF Dev on OS X 10.10
- Field and Button collide
from webmaker.org.
- Blue background loads with delay on second screen. Can we fetch it after first screen loads?
from webmaker.org.
This is what it looks like in IE11:
- next button overhangs on the right side of the screen
- giant x on the right of the text box
- heart doesn't show up at all
from webmaker.org.
Actually the broken link on the image seems to be on all retina screens.
from webmaker.org.
Second screen scales nicely. 👍
Nice job handling long strings. Looks good in thumbnail. 👍
- add limit to 50 characters
from webmaker.org.
True or false: the experience would be nicer if we selected all text onfocus for easier rewrite by the user. Anyone have an opinion?
from webmaker.org.
@xmatthewx 👍 i vote yes
from webmaker.org.
👍 i vote yes as well
from webmaker.org.
Filing issues here: https://github.com/mozilla/webmaker.org/milestones/On-boarding%20Experience%20v1
from webmaker.org.
Done :).
from webmaker.org.
Related Issues (20)
- Homepage: Update link to Teach site (with GA referral code)
- webmaker.org/literacy doesn't get redirected to Teach site
- version in package.json should be bumped
- Update favicon
- Disable current badge application flow HOT 8
- Forward traffic to beta.webmaker.org HOT 6
- Update Webmaker description on Wikipedia
- webmaker.org main page HOT 5
- Triage incoming links to webmaker.org that will break HOT 12
- Prep webmaker.org archive as old.webmaker.org HOT 1
- Add "old" subdomain to webmaker.org SSL certificate HOT 1
- Thimble code correction is broken HOT 1
- Remove redirect from home on old.webmaker.org
- Language switcher flickers and breaks pages on old.webmaker.org HOT 1
- Planet Webmaker Looking Funky
- 'Turn off' Appmaker and Popcorn Maker HOT 4
- Duplicate tags on blog.webmaker.org
- Broken link in StudentAmbassadors/Recognition page HOT 4
- Footer on the Webmaker hompage isn't completely responsive HOT 4
- Did webmaker stop issuing open badges? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webmaker.org.