{"action":"created","issue":{"url":"https://api.github.com/repos/FreeCodeCamp/freecodecamp/issues/1728","labels_url":"https://api.github.com/repos/FreeCodeCamp/freecodecamp/issues/1728/labels{/name}","comments_url":"https://api.github.com/repos/FreeCodeCamp/freecodecamp/issues/1728/comments","events_url":"https://api.github.com/repos/FreeCodeCamp/freecodecamp/issues/1728/events","html_url":"https://github.com/FreeCodeCamp/freecodecamp/issues/1728","id":100419858,"number":1728,"title":"design feedback of index page on beta site","user":{"login":"gingerkitty","id":2711654,"avatar_url":"https://avatars.githubusercontent.com/u/2711654?v=3","gravatar_id":"","url":"https://api.github.com/users/gingerkitty","html_url":"https://github.com/gingerkitty","followers_url":"https://api.github.com/users/gingerkitty/followers","following_url":"https://api.github.com/users/gingerkitty/following{/other_user}","gists_url":"https://api.github.com/users/gingerkitty/gists{/gist_id}","starred_url":"https://api.github.com/users/gingerkitty/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gingerkitty/subscriptions","organizations_url":"https://api.github.com/users/gingerkitty/orgs","repos_url":"https://api.github.com/users/gingerkitty/repos","events_url":"https://api.github.com/users/gingerkitty/events{/privacy}","received_events_url":"https://api.github.com/users/gingerkitty/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-11T21:50:43Z","updated_at":"2015-08-11T21:59:09Z","closed_at":null,"body":"_Warning: The bullet points are the issues... the rest is my need to need be overly verbose (which in the past has caused some excellent technical documentation)_ \r\n\r\nI have some visual design issues with the first page of the beta site that are something to consider when following best practices. For context purposes, I'm viewing this page from a new iMac 5120 x 2880 Retina display and realize I may just need to beat back since it currently only affects a small % of viewers, please let me know if this is the case.\r\n\r\nNote: image examples below may need a min to load & reach top speed:\r\n\r\n*  the landing page is too long, probably because the images are too large for the page and diminishes the textual content they relate to. But they are not quite large enough for those who are vision impaired and/or have older eyes. Consider making them smaller on the page, with a click to overlay a much larger image container or full screen option so one doesn't have to leave the current page... \r\n\r\n![image](https://s3.amazonaws.com/freecodecamp/keep-chat-open.gif)\r\n\r\n*  It's neat that the animated images are running through the steps and screens relating to your text below them as you scroll down, but they are _moving **waaaaay** too fast_. Whether or not it's this way on purpose, for me it's the equivalent of blinking banner ads, or scrolling text, and stock prices ticker taping across my screen..   it causes alot of visual confusion and a level of irritation that may cause people to leave the page, it's what I did ... \r\n\r\n*  When my browser is full sized I can see 3 or more of these rapidly moving images at a time, not only does it obscure the text below it (which should be be a touch larger and a few lines lower), but creates an impulse to scroll down further to get away, only to find I'm barraged with more of the same... it makes me want to hack your code to make it work for me, which will be a time sink if I didn't know how. It also risks my losing interest after leaving the planned teaching path you've set out before me.\r\n\r\n![image](https://cloud.githubusercontent.com/assets/2711654/9209335/c2ea34b8-402a-11e5-8e65-31da71bbd452.png)\r\n\r\n* Consider using a contrasting color or size for headings for the text below the images. I thought the headings were dead links, until I saw the example below. I think the colors are too similar unless the text is larger, then it may be more visible, but realize that **blue** (or a variation of it) has been the default link color since the beginning of web browsing.\r\n\r\n![image](https://cloud.githubusercontent.com/assets/2711654/9209959/4aa86e9e-402e-11e5-809d-8f0e304a9234.png)\r\n\r\nNow for the kudos... fabulous work everyone! I'm so delighted to have found this FREE!!! resource a few months ago.... (thanks GitHub) and am especially excited to know your plan to craft new lessons that formerly went off-site. I was laid off last summer from a 7 year stint, it has turned out to be both a blessing and a curse. The blessing is the overwhelming amount of free resources generous programmers, like you folks, provide to the world to make the hard stuff easier and available at will. The curse for me was my body of work as a web designer for the last 15+ yrs had either vanished from the interwebs or been replaced, leaving me nothing viable, by modern standards, to show for myself in my online portfolio. \r\n\r\nThanks soooo very for helping me get my career back up to speed. You've payed oodles forward and stirred my deep obligation to give back to your efforts if I can. In fact, I can gladly help your beta site in the \"look and feel\" department, but don't get me wrong, I think your site very charming and nicely accessible across all cultures, I just believe it could even better. I loved the html lessons, but had trouble seeing all the components at the same time, like when instructions were expanded, it moves you away from seeing the code area create live changes as you typed... I would arrange the components with the code and phone centered next to each other filing most of the browser real estate, and instead of having the instructions sliding down when expanding, try popping it out into a text box the can be resized as needed, copied and saved easily or having the text framed either of side of the screen, to maybe scroll, or be spoken if your OS is capable... I know your idea was to only reveal more instruction if it was needed, but the reveal felt clunky and distracted from the experience because I had read it over and over to create continuity and full meaning.\r\n\r\nI wish the idea of the \"web designer\" was not so passe, it's what I've always done best. Just ask any marketing professional how much value there is in landing on a pleasant looking page without any immediate wonder or brain strain. Its a tremendous skill to display text heavy pages of important information in a pleasing way (think first mortgages or filing your taxes). I hope you found my feedback helpful and not taken as criticism, I really just want to help you promote the invaluable resources you've given freely to this digital world full of future coders, leading by example and showing us how to fill up our tanks with good karma... phew!"},"comment":{"url":"https://api.github.com/repos/FreeCodeCamp/freecodecamp/issues/comments/130090570","html_url":"https://github.com/FreeCodeCamp/freecodecamp/issues/1728#issuecomment-130090570","issue_url":"https://api.github.com/repos/FreeCodeCamp/freecodecamp/issues/1728","id":130090570,"user":{"login":"BerkeleyTrue","id":6775919,"avatar_url":"https://avatars.githubusercontent.com/u/6775919?v=3","gravatar_id":"","url":"https://api.github.com/users/BerkeleyTrue","html_url":"https://github.com/BerkeleyTrue","followers_url":"https://api.github.com/users/BerkeleyTrue/followers","following_url":"https://api.github.com/users/BerkeleyTrue/following{/other_user}","gists_url":"https://api.github.com/users/BerkeleyTrue/gists{/gist_id}","starred_url":"https://api.github.com/users/BerkeleyTrue/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BerkeleyTrue/subscriptions","organizations_url":"https://api.github.com/users/BerkeleyTrue/orgs","repos_url":"https://api.github.com/users/BerkeleyTrue/repos","events_url":"https://api.github.com/users/BerkeleyTrue/events{/privacy}","received_events_url":"https://api.github.com/users/BerkeleyTrue/received_events","type":"User","site_admin":false},"created_at":"2015-08-11T21:59:09Z","updated_at":"2015-08-11T21:59:09Z","body":"> he landing page is too long, probably because the images are too large for the page and diminishes the textual content they relate to. But they are not quite large enough for those who are vision impaired and/or have older eyes. Consider making them smaller on the page, with a click to overlay a much larger image container or full screen option so one doesn't have to leave the current page...\r\n\r\nThis is in the works (I believe there is an issue somewhere if not I will open one.)\r\n\r\n> It's neat that the animated images are running through the steps and screens relating to your text below them as you scroll down, but they are moving waaaaay too fast. Whether or not it's this way on purpose, for me it's the equivalent of blinking banner ads, or scrolling text, and stock prices ticker taping across my screen.. it causes alot of visual confusion and a level of irritation that may cause people to leave the page, it's what I did ...\r\n\r\nDefinitely needs to be addressed\r\n\r\n> When my browser is full sized I can see 3 or more of the...\r\n\r\nThis could be addressed by making this step through instead of scrolling down.\r\n\r\n\r\n___ \r\n\r\nThanks for all the kind words :blush: \r\n\r\nWe are working our hardest to ensure that (FCC) Free Code Camp is not only the best resource online to learn to code, but also foster a great community that will make FCC long \r\n\r\ncc @QuincyLarson \r\n\r\n\r\n"}}