Certification criteria
Recreate a site
To complete this task, you’ll analyze a live site and recreate it with Wix Studio as closely as possible. We’ll evaluate your submission and compare each component to the original live site. Here’s what we’re looking for:
01
Responsiveness
-
Make sure all of your elements have the same responsive behavior as they do on the live site, across all breakpoints.
-
Position the elements as closely as possible to those on the live site, considering margins, docking and padding.
02
Layout & structure
-
Use layout tools like Section Grid and Stack to create the same layouts as the live site, across all breakpoints.
-
Include all components from the original live site.
03
Design
-
Use the same elements and media that appear on the live site using the provided library and Media Manager.
-
Apply the same effects featured on the live site, including Animations and Interactions, to your elements and sections.
Take note, you must complete the task independently, without any help or input from others, from beginning to end.
Share your work
Next up, you’ll need to submit an original Wix Studio site. Here’s what we’re looking for:
a.
General Criteria
-
Create a site from a blank canvas, not from a template or wireframe. Make sure you’re the owner of the site you submit, not a contributor, and the site wasn't transferred to you.
-
You must complete the task independently, without any help or input from others, from beginning to end.
-
Start with blank sections, not section presets.
-
Create at least four sections between your header and footer if the site is only one page, or more than one page with at least two sections per page.
-
Upgrade your site to a Premium plan and publish it before submitting.
b.
Responsiveness
-
Make sure the site is fully responsive and functions on every screen size without issues.
c.
Components
Mandatory:
-
Two or more different responsive behaviors
-
Stack
-
Section Grid
-
Menu
Optional:
Use at least four of the following components on your site:
-
Repeater
-
Sticky element
-
Pinned element
-
Animations and/or Interactions
-
Header scroll effects
-
Other layout tools, like flexboxes, slideshow repeaters, accordions, tabs and CSS Grid
d.
Layout & structure
-
Make sure the entire site reflects a logical build using layout tools, responsive behaviors, positioning and usage of components.
-
Use correct heading tags.
e.
Design
-
Devise a coherent design system throughout the site. Use fonts, contrast, media, proportions that complement the content and layout, and colors that align with the accepted color scheme delineation.
-
Make sure the site is easy to navigate, with a functional and intuitive interface.
f.
Performance
Optimize site performance while considering your design and layout needs. Here are some best practices to follow:
-
Use images in JPG format instead of PNG when a transparent background isn't required.
-
Choose videos over GIFs for animated content.
-
Try keeping heavy visual content below the fold and don’t overload your homepage with apps when possible.
-
If you’re adding code to your site, make sure it’s cached. Read more here.
-
Use SVGs for shapes, icons and logos to keep things light, sharp and scalable.
-
Third-party code should ideally run after your page has finished loading. To make that happen, embed scripts with the defer attribute or place them at the end of the body code.
-
Third-party code can slow down your site. Try to limit the number of third-party providers to a minimum.
-
If you’re using custom fonts, try not to have more than three or four, or opt for system fonts instead.
-
Use Wix’s integrated marketing tools, instead of embedding marketing tools manually, and remove any marketing tools that you’re not using.
-
Make sure that the order of elements on your site is identical to the DOM order in the Layers panel in the Studio Editor.
g.
SEO & accessibility
-
Make each page’s title the only H1 per page.
-
Give the site’s textual content a logic and heading structure.
-
Add alt text on all of your images.