app/views: Where HTML files are stored. Here some concepts they need to know to get working is:Data portions of the html can be spotted because they use ERB tags:
<% --rails-- %>. Tell them this is usually the part they should avoid changing when manipulating the HTML.
(It might help to use comments to explain what data is showing up where if your designer needs to understand what parts of the site's data is displaying within each ERB tag.)(In your views it may help to use comments to explain to your designer where important data fields are showing up so they can design HTML/CSS targeting them properly)Partials are snippets of HTML that can be detected because they have an underscore in their name. E.g.
_edit.html.erbis a partial.index.html.erbis not.The main app layout is found within
app/views/layout. The Explain the<%<%= yield %>commandERB tag is what loads the other parts of the site's HTMLapp's views for each page.
app/views: Where HTML files are stored. Here some concepts they need to know to get working is:Data portions of the html can be spotted because they use ERB tags:
<% --rails-- %>. Tell them this is usually the part they should avoid changing when manipulating the HTML.
(It might help to use comments to explain what data is showing up where if your designer needs to understand what parts of the site's data is displaying within each ERB tag.)Partials are snippets of HTML that can be detected because they have an underscore in their name. E.g.
_edit.html.erbis a partial.index.html.erbis not.The main app layout is found within
app/views/layout. The<% yield %>command is what loads the other parts of the site's HTML views.
app/views: Where HTML files are stored. Here some concepts they need to know to get working is:Data portions of the html can be spotted because they use ERB tags:
<% --rails-- %>. Tell them this is usually the part they should avoid changing when manipulating the HTML. (In your views it may help to use comments to explain to your designer where important data fields are showing up so they can design HTML/CSS targeting them properly)Partials are snippets of HTML that can be detected because they have an underscore in their name. E.g.
_edit.html.erbis a partial.index.html.erbis not.The main app layout is found within
app/views/layout. Explain the<%= yield %>ERB tag is what loads the other parts of the app's views for each page.
You will waste a gigantic amount of time if you getManually implementing mockups from a designer is a gigantic waste of time. So it's essential they If you want them to be able to use Rails, then is imperative they can also integrate that work easily with yours by using a version control to integratesystem. This is essential for seemlessly integrating their changes seemlessly with the project, sparing you time, and enabling faster change/deployments.
Your designer should set out on learning how to become comfortable using basic git commands such as understanding branches, how to push, pull and commit. If merge conflicts happen you might be better off handling them yourself (these should not occur to much for the designer if most of their work is separate from your changes). There
There are great GUI tools such as SourceTree tothat make learning and using version controlGit much easier if you don't want to learn how to use git from the command line.
- Teach them Where to Work inExplain the Rails file/folder system where relevant
- Teach them How to BootStart a Rails Server
You will waste a gigantic amount of time if you get implementing mockups from a designer. So it's essential they use version control to integrate their changes seemlessly with the project.
Your designer should set out on learning how to become comfortable using basic git commands such as understanding branches, how to push, pull and commit. If merge conflicts happen you might be better off handling them yourself (these should not occur to much for the designer if most of their work is separate from your changes). There are great GUI tools such as SourceTree to make learning and using version control easier.
- Teach them Where to Work in Rails
- Teach them How to Boot Rails
Manually implementing mockups from a designer is a gigantic waste of time. If you want them to be able to use Rails, then is imperative they can also integrate that work easily with yours by using a version control system. This is essential for seemlessly integrating their changes with the project, sparing you time, and enabling faster change/deployments.
Your designer should set out on learning how to become comfortable using basic git commands such as understanding branches, how to push, pull and commit. If merge conflicts happen you might be better off handling them yourself (these should not occur to much for the designer if most of their work is separate from your changes).
There are great GUI tools such as SourceTree that make learning and using Git much easier if you don't want to learn how to use git from the command line.
- Explain the Rails file/folder system where relevant
- Teach them How to Start a Rails Server
I have worked with many designers, some who can work within Rails apps and others who can't. I highly recommend that you only hire designers who are capable enough to integrate directly into the project itself. You will be surprised how valuable a good designer can be once they can integrate their work with the team.
Integration will require a little teaching and continual guidance before you will see results. For a short term project I don't think it's worth it -- in those cases hire a different designer. But for a longer term project its worth the time investment if you're working with a designer already skilled in HTML/CSS/Javascript.
Integrating a Web Designer into a Rails Project:
- Set up the Designer's IDE
Non-programmers are easily overwhelmed by compatibility issues, so it's best to make sure their dev environment is aligned properly from the get go with tools they need to use to develop for Rails. A very good way to onboard a designer quickly for a Rails project is to install this installation script by Thoughtbot. This will install nearly every dependency they will need to work on most Rails apps in local development.
An alternative approach is to use contained IDE for development to keep everybody synced, using tools such as Nitrous.io
Next, make sure they are hooked up to all of the relevant config settings needed to boot the app, such as having a working database.yml
- Teach them basic Git
You will waste a gigantic amount of time if you get implementing mockups from a designer. So it's essential they use version control to integrate their changes seemlessly with the project.
Your designer should set out on learning how to become comfortable using basic git commands such as understanding branches, how to push, pull and commit. If merge conflicts happen you might be better off handling them yourself (these should not occur to much for the designer if most of their work is separate from your changes). There are great GUI tools such as SourceTree to make learning and using version control easier.
- Teach them Where to Work in Rails
In a Rails app, your designer does not need to know too much about a Rails filesystem to get working. They just need to know what part of the file system to focus on:
app/views: Where HTML files are stored. Here some concepts they need to know to get working is:Data portions of the html can be spotted because they use ERB tags:
<% --rails-- %>. Tell them this is usually the part they should avoid changing when manipulating the HTML.
(It might help to use comments to explain what data is showing up where if your designer needs to understand what parts of the site's data is displaying within each ERB tag.)Partials are snippets of HTML that can be detected because they have an underscore in their name. E.g.
_edit.html.erbis a partial.index.html.erbis not.The main app layout is found within
app/views/layout. The<% yield %>command is what loads the other parts of the site's HTML views.
For front-end javascript/stylesheets/images:
app/assetsorapp/public:Inside asset pages (e.g. home.css.scss) correspond to the name of every view folder's title.
From here, you can even go farther by helping them gain a little knowledge about how stylesheet precedence is handled by the asset pipeline in Rails (and compiles into a single application.css files). If they have knowledge of sass or less, it may also be useful to explain how these files compile down to css e.g. home.css.scss -> home.css
- Teach them How to Boot Rails
To work within Rails a designer needs to learn basic command line actions to at least enough proficiency to be able to boot Rails once the app is set up.
This means a designer will need to learn how to navigate the command line filesystem using cd and cd .., including how to get to the Rails projects root from their Path.
Inside a basic rails app project path, they just need to follow this workflow to get started:
git pullin latest changes from the rails app root directory.bundle installbundle exec rake db:migrate[you may need to tell them to e.g.bundle exec rake db:drop db:create db:migrate db:seedto fix database issues occasionally]rails sto start the server.- And then to visit
http://localhost:3000to load the app's webpage.
Now they're done! Also remind them to use ctrl + c in the command line to stop the server if they are pulling in new changes.
By this point, your designer should have enough knowledge now to make html/css changes directly inside your Rails app comfortably within your existing project.
It's likely you will need to still help them out when complications arise (such as their database getting out of sync, or needing special account powers to work in a restricted part of your site), but the time savings you will gain will still make pursuing integration worth it.