How To Code Websites

I feel like one of the most critical parts of a design is having an actual conversation with the person who is the decision maker on the project.  For most of my clients this is the owner of the business.  In this conversation I want to ask good questions and listen intently to what is being said.  I need to understand my clients business and I need to understand who are their customers.  If 90% of a clients customers are women then I would lean towards a more feminine type of build including typography and color choices.  If a clients customers are over 50 years old then you will want to consider different choices for that age demographic vs teenagers.  Taking the time to ask questions, listen intently and have a genuine conversation with the decision maker is a huge step in helping to unravel the build process.  Take good notes during this meeting so you can refer back to them at a later time.  I also utilize Evernote to organize my notes and thoughts for each of my clients.   

You will find that clients are very different in regards to the level of involvement they have in the project.  Some clients are very hands off and some clients are very hands on with what they are looking for in a design.  During the conversation try and get a feel for the type of person you are dealing with.  I usually prefer dealing with more hands off clients because they are easier to please and I'm given more creative license while designing.

The next step I take is to identify 4-6 websites that are generally in the same industry as my client.  I find something that I like about each of the example sites and then I send the list to my client to review.  I don't share the things that I like or dislike about the site.  Instead I request that the client gives me what they like and what they don't like about each site.  This step is huge in determining what a more hands on client is looking for in regards to taste and design. I also ask if there are any websites that client loves or has any suggestions that they would like to see incorporated.  Look for patterns in the notes you receive from the client.  These patterns will help to make decisions about the types of elements a client will like on the website. 

The last step I take in the direction phas is to sketch out the original design thoughts on a piece of paper.  Some people create very detailed wire frames and drawings, but I utilize a rough sketch approach citing things that I definitely want to have in the design and other optional elements.  Then I begin to search for colors and font pairings that match the tone of the site.  With my rough sketch, colors, and font pairings I'm armed to start mocking up a website. 

Unlike some designers I don't feel it is my obligation to change the decision makers mind in regards to a website design.  My goal is to create a design that is search engine optimized, user friendly, conversion friendly, and liked by the decision maker.  I don't feel like those four goals are mutually exclusive and my goal is to accomplish all of them on each of my projects.  If a decision makers choice is something that I feel would not help the site be user or conversion friendly I will lay out my case.  However, in the end I will do whatever my client wants as long as they are informed about the consequences of my objection. 

In order to create anything in this world you need a set of tools to work with and that is no different for creating websites.  Without the list below I would be in a world of hurt.

• From a hardware perspective it is helpful if you have a decently fast computer and internet connection.  Nothing gets more frustrating than waiting for work to get done because your systems are slow. 
• You need a way to write source code.  You could use notepad if you like or you could utilize a full blown IDE.  There are a wide variety of different options to choose from so if you want to learn more check out this list. 
  • I utilize Brackets.io, which I have found to be a great code editor for my needs.  This might change in the future as I might start to play around with Visual Studio Code or PHPStorm.  In the end there is no wrong answer as long as you find something that can help you work efficiently.  From a coding speed and debugging perspective I think you should consider a package that includes autocompletion, syntax highlighting and code folding functionalities.  I also like a package that includes plugins or other options that will make your life easier.  One of my favorite plugins for Brackets allows me to transfer changes made to files automagically to a live server instead of having to open up the FTP software to transfer it every time a change is made. 
• Photoshop or another image manipulation software is important so you can adjust or fix images as you add them to the website
• Vectormagic is a piece of software that converts jpg, gif and png files and converts them to SVG.  SVG are scalable vector graphics and they usually look great no matter what size screen and the file size is generally smaller so they load faster than other pixel based image formats.
• FTP software will allow you to upload files from your local environment to a server.  Filezilla is one free option but there are several options on the market.

I look at a content management system (CMS) as a subset of tools, but it is important enough to have it's own category.  A content management system is a backend software system that allows a user to log into the system and make changes to the website.  That can include adding blog posts, changing images or changing verbiage.  Keep in mind a CMS is not necessary if you are writing your own code for your website and you understand HTML and CSS.  However, I'm a web developer and most of my clients want to manage their own websites by changing verbiage and images on their own. 

• The most well known CMS on the market is Wordpress, it is utilized by around 30% of all websites around the world.  I won't discuss it here because I generally think Wordpress sucks. 
• I utilize a licensed CMS that is made for developers named Perch.  What I like about Perch is it is easy for a developer to add the CMS system into my workflow, it is supported and it is affordable. 
• There are literally 100's of different content management options to choose from including the big open source free options like Joomla, Wordpress, Drupal.  I would highly suggest doing some homework on what will work with the way you develop.  If you plan on coding websites in a way that you can write the code your way and fit the CMS into your style then you should probably look at an option like Craft CMS or Perch as they are made for developers.   

This is more software and is a developing tool as well.  A local development environment allows you to setup a server environment on your own local computer, instead of using the server environment provided by your hosting company.  This creates a sandbox for you to create, change and just play around with your code, to see how it would look on a live browser.  It makes the process of coding much faster because your machine becomes the server so you don't have to constantly upload files and check changes on a live hosting server.  Another advantage of developing sites locally is that you can work on your site without being connected to the internet.

There are a few different options like Mamp, Xampp and Wamp.  I use Wamp, but all of these option will allow you to write and test your code locally.  

I have recently read about a new option called Laragon.  This is a new addition to the old standby local development environments above.  If you are new to developing I would probably suggest looking in this direction first.  The problem with Mamp, Xampp and Wamp is they can be more challenging and time consuming to get to work properly.  Laragon appears to be set up to work with Node.js and other task runners right out of the box so this is appealing to me as well.  The reason I haven't changed yet is time, but this is going to be one of my winter projects. 

A front end framework gives you a system to follow in order to create a responsive design.  The cool thing about frameworks is a lot of the CSS is already written you just have to add the correct classes to your HTML and your website should be fully responsive.  The downside is you will have to learn the details of the framework in order to be efficient using it.  Some frontend frameworks even include javascript as well.  If you decide not to utilize a framework you can utilize CSS Grid layout to create your own responsive design.  The benefit less code bloat, no learning of a framework and you will have to compromise less because you get to make all the layout decisions.  The downside is with this additional control you will need to do some more CSS coding to get your site exactly the way you want it, whereas in a lot of frameworks the styling is prebuilt into the system.  You will need to decide if you want to utilize a framework or not.  I will discuss a few options below:

• Bootstrap:  Is the first responsive framework created.  It was created by Twitter and allowed websites to create pages that would responsively adjust based upon the screen being used.  It is a well documented open source project that will allow the developer to utilize a 12 grid responsive layout.  It is based on standardized Cascading Style Sheets (CSS) and javascript files.  Bootstrap also includes many jQuery plugins that make development faster.  Bootstrap is the most utilized front end framework in the world.  The downside for me is you have to learn the way that Bootstrap utilizes classes for it's layouts.  Bootstrap layouts are standardized across the board so you have to work your design into Bootstraps layout which I don't love either.  I also feel like Bootstrap websites are fairly easy to pick out, this is probably because I'm a developer though.  To be fair I think as Bootstrap continues to move forward they add more and more to the system which allows it to look more customized.  However, the more they add to the system the more bloated the code can get which also makes the page load speed an issue for me.  On the plus side once you learn the system you should be able to develop faster because everything is already predetermined for your layout. 
• Foundation:  This is the other main front end framework around.  I would bet that between the two projectects Bootstrap and Foundation make up 90% of all framework users.  Foundation was created in 2011 and is a little different than Bootstrap, because it doesn't utilize javascript files only CSS files.  It is a little more complicated out of the box and probably isn't as user friendly as Bootstrap.  One of the really cool things about Foundation is the menu.  Most Bootstrap menus are very easy to pick out, but the menu for Foundation is much more customizable, which makes it less templatish looking.  Overall Foundation isn't as widely used as Bootstrap but it has a vibrant community behind the product.  When I was deciding on what framework to utilize Foundation was my second choice because it is excellent for developers and more customizable than Bootstrap, albeit a little more complicated.
• HTML5 Boilerplate:  It is technically classified as a framework but it is really a professional blank layout template.  I utilize it as the starting point for all my websites and I find it to be a great starting point for my projects.
• CSS Grid:  Isn't a framework, but instead a Cascading Style Sheets specification for laying out web pages.  I use CSS grid for all of my projects but since it is a newer specification it isn't fully supported by some older browsers so I have a flexbox fallback to ensure that the websites that I build will be viewable by over 95% of all browsers.  CSS grid is in my opinion the future of website design because you are not forced to conform to any layouts instead you can roll your own for every project.  I utilize it because in the near future it will be viewable by close to 100% of the browsers in use and I get full control of the layout. 

HTML stands for Hypertext Markup Language and is the standard markup language for all Web pages.  In 1980 Tm Berners Lee started a project that would allow researchersn to share their findings.  This project became the basis for HTML and in 1991 he wrote documentation called HTML Tags which essentially became the HTML 1 specification.  Mr Berners-Lee founded and created the World Wide Web Consortium (W3C).  This group creates standards for the world wide web.  Throughout the years the W3C has advanced the HTML tagging system and we are now on the HTML 5 specification.

To better learn HTML I always suggest that students learn from the W3C because they are ground zero for documentation of the world wide web.  I also admit that I like to utilize Lynda.com because they have online classes as well to help you learn different coding skills.  Lynda.com is a paid teaching service and W3C can be learned for or free or you can utilize a paid service on W3C for certification of your skills.

Any website that is built can be tested to make sure it conforms with the HTML5 specification and highly suggest that people do this when they complete their projects.  There are times that my sites do not conform to the specification but I make those decisions knowingly and for a specific reason.  We will discuss this testing at the end of this ridiculously long blog post.

Coming Soon

Coming Soon

Many modern web servers can directly execute on-line scripting languages such as ASP, JSP, Perl, PHP and Ruby either by the web server itself or via extension modules

JSON coming soon