adminThe right candidate should have professional experience in implementing supplied designs for large brands. The ideal candidate will also understand multi-language front-end considerations including RTL.
Essential Skills
SASS
CSS
Bootstrap framework
jQuery, vanilla JavaScript
Handlebars JS
HTML
Background
MetaLocator creates locator UIs, directories and location pages. Examples of which can be found below:
Locator Software Examples
These demos show examples of what you’ll typically be starting from:
https://www.metalocator.com/demos/
The below examples show examples of previous clients which demonstrate the type of styling work you’ll be responsible for creating, starting with the demos above, and given an approved design in Figma, Sketch, Illustrator or Photoshop.
Client Example 1:
https://www.flowserve.com/en/support/sales-locator/
Client Example 2:
https://support.hp.com/us-en/help/service-center
Client Example 3:
https://www.cdc.gov/diabetes/prevention/find-a-program.html
Client Example 4:
https://www.veluxusa.com/help/before-you-buy/find-installer
Directory & Location Page Examples
Client Example 1
https://locations.carters.com/
Client Example 2
https://locations.veluxusa.com/
The Interface Builder
The CSS and front-end development work product will be implemented in MetaLocator’s Interface Builder product. The below resources provide an overview of the Interface Builder and how custom CSS is implemented. Training on our development process and coding standards will be provided.
https://www.youtube.com/watch?v=rXnnhUVKWSw
https://www.youtube.com/watch?v=bbligc99L5k
https://app.screencast.com/Vv6uRocjouDPM
https://app.screencast.com/BAGpkMgMUqNnj
https://support.metalocator.com/en/articles/1659847-custom-css
https://support.metalocator.com/en/articles/3817982-field-templates
Our software is installed on the client’s web site, and so our locator and location pages typically exist inside of a client-provided page, and therefore seamless design and UI/UX integration is essential. The directory and location pages are created on a hosted subdomain as shown above.
Our Process
We work with our customer to first create a series of wireframes. Wireframes are basic ‘blueprint’ plans that illustrate the basic elements, high-level layout, features, functions and states of the interface(s). The wireframes serve as a content inventory and specification of what elements will be present and generally where they will appear.
When the wireframes are finalized we create developer-ready designs based on the wireframes. Examples of wireframes and developer-ready designs are shown below:
Wireframes
https://app.screencast.com/i36v3Gmuk7pEO
Designs
https://app.screencast.com/I0lwpKrNPIBvk
Based on the complete and approved design assets, work *in MetaLocator* begins. All CSS, images and JavaScript are added to MetaLocator’s Interface Builder. MetaLocator’s Interface Builder provides access to the HTML, CSS, I18N layer and JavaScript templates which need to be updated to ensure the locator, directory and location pages match the approved design. Where possible, we try to focus as much as possible on CSS styling, and limit changes to interface markup (HTML/handlebars) and JavaScript manipulation.
Before your work begins, the MetaLocator team will configure the locator according to the approved designs, which should ideally limit your work to mostly CSS. Sometimes details are not considered during the configuration and you may need to request changes to the settings, configuration or templates to ensure the product is ready for styling to meet the design requirements.
The CSS and code quality will be reviewed rigorously. We strive to provide CSS that retains the configurability of the software using the Interface Builder and so high-quality, flexible, and efficient yet effective CSS is essential.
This Job Opportunity
The final design assets and configured interface for this current job will be provided upon contract signing. They are very similar to the examples provided above. We will also provide previously-approved CSS implementations for similar projects for other clients.
To Apply
Individuals only, no agencies. Longer term relationships and steady work is possible for a successful candidate.
Provide working examples of your work product only. The examples provided must be the work product of the individual who will be providing the services described in this job description. If you can not provide this portfolio, do not apply to this position.
Hourly time must be logged through UpWork. Manual time will not be accepted. If you can not bill time logged hourly through UpWork do not apply to this position.
Hourly Range: $20.00-$30.00
Posted On: February 02, 2024 22:02 UTC
Category: Front-End Development
Skills:Front-End Development, CSS, HTML, JavaScript, jQuery, Bootstrap, Sass
Country: United States
click to apply
Powered by WPeMatico
