tarasis
/
old_tarasis.net
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweaked the process document a little. Changed attribution link color to yellow. Temp broken mobile version (not sure why)

This commit is contained in:
Robert McGovern 2020-09-05 20:26:01 +01:00
parent 8bd12b25cb
commit be7a73d2b9
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
FrontendMentor/huddle-landing-page-with-single-introductory-section-master/css/style.css
View File

@ -100,7 +100,7 @@ h1 {
} }
.attribution { font-size: 11px; text-align: center; } .attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); } .attribution a { color: hsl(63, 100%, 65%); }
/* Formating for Mobile devices. Sample to match is 375z800 */ /* Formating for Mobile devices. Sample to match is 375z800 */
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {

35
FrontendMentor/huddle-landing-page-with-single-introductory-section-master/work-through/myProcess.md
View File

@ -56,20 +56,21 @@ Couple of days later
1 Comment on Slack 1 Comment on Slack
2 responses on Twitter. 2 responses on Twitter.
less than I hoped but some useful information to take on board less than I hoped but some useful information to take on board
First: Don't worry about it being so exact(!!), being a little off/up/down/font off doesn't really matter ... ALTHOUGH it CAN pay off to be exact. Theoretically you are hired to implement the required design, so best to be as exact as possible.
Second: Link color in the attribution is impossible to read. My fault for not making any changes to it. * First: Don't worry about it being so exact(!!), being a little off/up/down/font off doesn't really matter ... ALTHOUGH it CAN pay off to be exact. Theoretically you are hired to implement the required design, so best to be as exact as possible.
Third: mobile design - make icon size 13x13, that will fix centering * ~~Second: Link color in the attribution is impossible to read. My fault for not making any changes to it.~~
Fourth: mobile design - the hit box for the link is off from the image/circle * Third: mobile design - make icon size 13x13, that will fix centering
fifth: look at stacked icons on font awesome https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons * Fourth: mobile design - the hit box for the link is off from the image/circle
sixth: hover state for social icons not a good color. Aim for a lighter violet. Aim to stay in color scheme (important for accessibility) * fifth: look at stacked icons on font awesome https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
seventh: good not used too much css, nor complex structure * sixth: hover state for social icons not a good color. Aim for a lighter violet. Aim to stay in color scheme (important for accessibility)
eighth: "personal pet peeve" html button is only valid in an html form, otherwise use a anchor styled as a button because a button has no href. -- Not sure which way to go with this because its not clear what would happen on the button press. Does it go to a new page, or reveal a email submission box * seventh: good not used too much css, nor complex structure
ninth: "personally I would have wrapped the social icons and the footer links in a combined foot section just because that makes them easier to move later if doing a whole site". Mixed on this, attribution link at bottom was not part of the original design, but was part of the base files, and is something that was deletable. * eighth: "personal pet peeve" html button is only valid in an html form, otherwise use a anchor styled as a button because a button has no href. -- Not sure which way to go with this because its not clear what would happen on the button press. Does it go to a new page, or reveal a email submission box
tenth: (overall people though I did a good/awesome job) * ninth: "personally I would have wrapped the social icons and the footer links in a combined foot section just because that makes them easier to move later if doing a whole site". Mixed on this, attribution link at bottom was not part of the original design, but was part of the base files, and is something that was deletable.
eleventh: was told to check out PerfectPixel extension for Chrome/Firefox. Similar job to diffchecker, can use to add a design image as a layer and you can see how off you are from the design ... being by opacity or there is a difference view * tenth: (overall people though I did a good/awesome job)
twelfth: documenting the process was apparently helpful ("its something not everyone does, but should") * eleventh: was told to check out PerfectPixel extension for Chrome/Firefox. Similar job to diffchecker, can use to add a design image as a layer and you can see how off you are from the design ... being by opacity or there is a difference view
thirteenth: Design probably means in wide formats that the page should cover all the screen. Both in height and width. That is more powerful than image should be at X/Y, should be this tall. Text should also be at X/Y and be a certain size, with certain spacing between letters/lines. * twelfth: documenting the process was apparently helpful ("its something not everyone does, but should")
fourteenth: Limit the width of the components, and contain them to the center of your screen. * thirteenth: Design probably means in wide formats that the page should cover all the screen. Both in height and width. That is more powerful than image should be at X/Y, should be this tall. Text should also be at X/Y and be a certain size, with certain spacing between letters/lines.
fifteenth: At present if you go really wide on the page, the text will appear in only one line. It totally loses its expected design. Use a main container to hold everything inside it. Limit its size and automatically center it. * fourteenth: Limit the width of the components, and contain them to the center of your screen.
sixteenth: I've used flexbox but some of the child elements are not restricted in the size they can take. This si useful to maintain proportions at different sizes. (Good example is the mockup image, which takes up more space than it should in the sizes between roughly 500-800px) * fifteenth: At present if you go really wide on the page, the text will appear in only one line. It totally loses its expected design. Use a main container to hold everything inside it. Limit its size and automatically center it.
seventeenth: Basically ... try not to restrict your designs to two resolutions. Make it work for in-between widths. * sixteenth: I've used flexbox but some of the child elements are not restricted in the size they can take. This si useful to maintain proportions at different sizes. (Good example is the mockup image, which takes up more space than it should in the sizes between roughly 500-800px)
* seventeenth: Basically ... try not to restrict your designs to two resolutions. Make it work for in-between widths.