Useful Terms for PSD to HTML Services

We know how important effective communication is for our clients on any web development project. So, we’re offering up this handy ‘glossary of terms’ that you will find helpful for your next PSD to HTML project, or if you’re just beginning to learn about the design-to-code process. This list of web development definitions is especially helpful for creatives and designers who are migrating from print to the web space.

• PSD to HTML – PSD to HTML is the process of taking Photoshop design files (“PSDs”) and coding them into HTML. Each PSD design file is hand-coded by a front-end developer. No code generators or automation here, pure hand-coded HTML and CSS goodness!
• PSD – A Photoshop design file. Technically, it stands for Photoshop Document. Photoshop is the tool most widely used for web design and development and works best the design-to-code process. A “good” PSD is layered, well organized using folders, as well as layer comps to show different pages and states.
• HTML – HyperText Markup Language. This is a simple way to refer to HTML5, CSS, and  JavaScript, the basic languges of the Web. This is the code that makes your design function as  website. Read more about HTML5 on our blog post.
• Design to code – This is the general term for converting the visuals (design files) into code (HTML). Technically, not all design to code involves PSD files, and other filetypes like PNG and Adobe Illustrator’s AI filetype are acceptable in some cases.
• Email template – This is the theme for a reusable email employed by businesses with an email marketing campaign. We take designs for email templates and code them, just as with a website.
• Bootstrap  – Bootstrap refers to the Twitter Bootstrap framework, a responsive front-end development framework that is sleek and powerful. Especially useful for application development teams, it allows you to design and code in a consistent and reliable manner based on a grid which adapts to a user’s screen size, such as smartphones. It’s one of our favorites. Read more about it on the official page.
• Responsive – The feature of being adaptable to various screen sizes, usually at least 3 breakpoints: desktop, tablet, and mobile device. Recommended widths for responsive websites are 1024px, 768px, and 320px, respectively. We break it down in further detail in this post. While Bootstrap is a favorite, we also work with Foundation, 960gs, and others.
• WordPress – The most popular, and arguably most powerful, content management system (CMS). With SEO friendly URL management and easy page templating, WordPress is a great choice as a platform for your website.
• jQuery – The most widely used front-end JavaScript library used to implement animation and functions such as dropdowns, tooltips, sliders, lightboxes and more.
• Pixel perfect – The highest standard for execution of the PSD to HTML process.We aim to have our deliverables match, down to the pixel, your designs as you presented them.
• Pop-up modals – A ‘page’ that pops up or otherwise animates into the screen upon completion of a certain action, like a button click.
• Long page – In line with modern web design trends, we often see long pages with aim to put as much information into a page as possible, usually in the form of horizontal sections. These can be considered as two pages for coding purposes.
• Slice – Basically, this means cutting up your Photoshop design into pieces, which are then put in order by HTML and styled/positioned by CSS. Read more about slicing on our blog post.
• NDA – Non-disclosure agreement. We abide by NDA as a standard practice and guarantee that information about you or your project will not be made public. As this is our default policy, there’s no need to sign an explicit NDA, though we are happy to do so if you feel this is absolutely necessary. Your privacy is key, so we offer our products as white-label.
• White-label – We produce the code for your organization, but do not brand or otherwise sign our markup in any way.
• Markup – This is the code that we present back to you once we’ve converted your PSD files. ‘Markup’ refers to the finished product in the PSD to HTML process.
• W3C – Shorthand for The World Wide Web Consortium. This is the international community that develops open standards to ensure the quality and growth of the Web. Our code complies with the standards established by this organization, which can reviewed here. They also offer a markup validation service.

If there’s anything else you need clarified, please let us know. We’re happy to add to this list to make the PSD to HTML process easier!