Fully responsive two page officelite website using CSS and JS only.

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  This looks great at desktop size so well done. It's fairly responsive down to a smaller size, but at widths below 400px you're getting horizontal overflow, which makes it a bit off on smaller phones.

  Careful with the alignment. In the mobile layout, the pricing cards aren't centered on the page, there's more space on the right than on the left.

  The colours look good except for the call to action buttons. The colours there don't match the design and the contrast between the background and text is too low and fails accessibility checks.

  For your HTML semantics, make sure that you're using heading levels correctly. Your headings should read like a table of contents if you list them out. At the moment you have multiple h1's, and you skip from h1 to h3 to h5. Headings must always be used in the correct order, never skipping a level. You can size them however you want, using CSS.

  The 'get started' call to action is opening in a new tab. Don't do that, prefer remaining in the same tab, otherwise it's very jarring to users.

  On the second page, the form inputs do not have labels, they really should have them. Placeholders are not sufficient for accessibility. The contrast of the text should be increased too.

  It might also be nice if the count-down dynamically changed with javascript. It seems a little strange having something show the number of seconds til an event, but it stays the same.

  This may seem like quite a lot of points, but there's a lot of really great stuff in this solution.

  Marked as helpful

  0