Here, Let Me Translate That For You!

Designer? Developer? Front-End? Back-End? Fullstack? What is this? Are we in Narnia? I am so confused. I just wanted a website. Help!

There, there now. It’s going to be ok. TM is going to make it all better. While we like the idea of being in Narnia (we are a legitimate clan of geeks and nerds, how could we NOT want to be in Narnia?), we are not. Instead, we’re huddled up in a bright red office in downtown Royal Oak. It’s a bit chilly out, so we’ve got the heat kickin’ and are curled up at our desks with a nice warm cup of coffee. In short, we’re ready to have this discussion for this week’s edition of Web Wednesday!

Designer

It’s easy to understand how this term can be confusing. Sometimes people use “web designer” in the same context as a “web developer”, but in all actuality the two are radically different. A web designer is essentially a graphic designer who creates visual assets specifically for the web. Sometimes they’ll know how to code a website too, and a basic knowledge of coding languages can be useful. But their function is to design visual elements for the web, as well as the visual presentation of the website. They don’t build the website and put all the pieces together.

When I say visual elements, I mean things like banners, buttons, infographics, ads, etc. Even photography – they edit photos sometimes, maybe add some text or pretty coloring. If you need some kind of illustration for a blog post, cover photos for Facebook or other images for social media, they can make that for you too. A big one that we get from some of our monthly clients are sales and promo banners. We do some print designs too, but our main focus is web.

When we take on a web development project, our designer creates design comps. Design comps aren’t a functional website – they’re essentially an image of what the website will look like once it’s completed. Once those are finished, we review them with the client. They’re free to request any changes at that time. When we’ve made the necessary changes, we send them to the client for approval. Then, once we’ve got the final approval, we hand the design comps off to the developers to turn the images of a website into a fully functional website.

Developers

I’m sure you got an idea of what developers do while reading my explanation of designers. Developers translate the visual representation of a website and make it a fully functional website using a variety of coding languages. The difference here is that “developers” is an all-encompassing term for people who code. But there’s a need to differentiate between developers, because there’s different parts to a website. So, we break it down further: front-end, back-end, and fullstack.

Front-End

There’s the public facing aspect of a website. When you visit a website and interact with it, you’re experiencing the front-end of a website. Front-end developers most frequently work with HTML, CSS, and more recently, jQuery (in simplest terms, jQuery is a subset of JavaScript).

Front-end takes the design comps and translates it into code to create the public-facing portions of the website. We call this a cut-up, because what front-end is doing is cutting up the design comps into translatable blocks and then piecing those blocks together.

Using HTML (hyper-text markup language), they place all the un-styled elements onto a page. These elements are thinks like images, links, content blocks, videos, text, etc. But this is not enough. Because HTML elements, by default, are placed on the page in the order in which they’re placed. So even though we put in the HTML code to make an image appear, it’s not necessarily appearing in the appropriate place.

This is where CSS (cascading style sheets) comes in. CSS is a language that was developed to make HTML more visually appealing. When the web was first created, HTML was all that was needed, just some plain-text websites delivering information. And that’s all fine and dandy, as the main point of a website still today is to deliver information. But as the user base of the world wide web grew, so did the need for styling pages, making each one more unique, easier to read, and pleasant to the eye. So, CSS was developed and is now a pretty powerful language.

The default text for a website is Times New Roman, size 12, black. Anytime you see text on a website that is anything other than Times New Roman, size 12, black is because a front-end developer served up some CSS to change the font, size, and color.

CSS is used to create the layout. If a website’s navigation is on the top of the page, a front-end developer will use CSS to place the elements that make up the navigation at the top of the page.

HTML and CSS do just about everything that’s visual. So if you can see it, a front-end developer made it happen using HTML and CSS.

More recently, front-end developers have been using jQuery to integrate some more advanced functionality into the site. Ever go to a website and see a rotating banner (we have one on our home page)? It’s typically near the top of the page, where a set section of a website will scroll through image. It’s called a rotating banner for obvious reasons, and jQuery is used to make those images scroll through.

In short, a front-end developer codes everything that a user will see and read and interact with.

Back-End

Once front-end has finished up their work on the website, it’s turned over to back-end. Back-end developers work with programming languages like PHP, JavaScript, Ruby on Rails, Python, etc. Utilizing these languages, back-end developers communicate mainly with servers, databases, and applications so that a website can be utilized for various functions.

When you go to a website and fill out a contact form, the information you entered is delivered to the correct person by way of back-end functions. Once the submit button is clicked, a Perl script or php functions will read the request, extract the data (or the information that you entered) from the form and send it to where it needs to go. That’s all taken care of through the server. Once the server has processed the form, a confirmation message will typically display, or you’ll be re-directed to a different page. Either way, a back-end developer worked their knowledge of a programming language to deliver your information to the inbox of the corresponding party.

We have an extensive history of working with e-Commerce sites. We’ve even developed our own software that processes e-Commerce purchases. That’s some more back-end stuff. When you make a purchase online, programming languages extract your purchasing information and store it into a database. Order fulfillment departments are notified of the purchase and the information is sent to them so that they can get your order sent out to you. Payment is also processed through back-end technologies.

During re-builds, it’s back-end developers who take existing information, products, etc. from an existing website and import it into the new website, so everything is exactly where it needs to be. Back-end developers make it so that when you interact with a website, the interaction can be functional and complete. You won’t visually be able to see a server processing and delivering functions and information, but that’s what it’s doing while you’re casually browsing through a website. And it’s because of back-end developers that that server knows what to do with your interactions.

Fullstack

Now that you know the difference between a front-end developer and a back-end developer, a fullstack developer simply means that that developer knows both front-end and back-end languages and can execute those languages appropriately.

Most front-end developers and most back-end developers are familiar with the other’s languages, but a fullstack developer has working knowledge of all development languages.

Ok, how’d we do? The wild world of web development can be a crazy, confusing place. Each of us have our own reasons, but all of us here at Trademark have decided that there’s nothing we love more than the complex, challenging, often-times frustrating process of writing out these various programming languages, appropriately combining them (oh yes, languages have rules! The way these languages are combined means everything!), and churning out visually-appealing, fully functional websites for the world to interact with and enjoy.

If you’d like to learn more about what we do, drop us a line. We love to talk about code.