adapdevelopment

My first freelance project is finished so I thought it would be fun to write about my project process. This website was for Mapps Coffee, a Minneapolis coffee shop located in the University of Minnesota’s bustling West Bank neighborhood. This was a fun and memorable milestone in my web development career because it is my first published freelance piece.

I currently work as a Front end developer for my 9 – 5 gig so I am very choosy about my freelance projects. They have to be a good fit for me personally because they cut into my personal time. This one in particular was very exciting because I am quite a coffee connoisseur and am very picky about the beans I grind and the way I brew.  I truly enjoyed working on the Mapps Coffee site, from client meetings to project concept and design, from the creation of its raw code and custom WordPress theme development, all the way through to its final deployment. I can’t take all of the credit though, as Umut and Sinan, (the managing team at Mapps Coffee) were very easy going and fun to work with.

The purpose of this post is to share the steps of my personal process and workflow in hopes of generating some conversation about how this may be similar or different to other Web developers’ project process. I have only been a web developer/designer for  about nine months now so any engagement with the broader community is a very good thing for me at this stage. My steps, in order, are as follows:

1. Research & Ideation
2. Create the design atmosphere
3. Sketch a mobile first layout.
4. Code the page structure in HTML
5. Set theme specific styles, SASS mixins and variables built on top of my custom framework
6. Start my “browser design” process and set my breakpoints for the responsive, device agnostic expansion (mobile to desktop)
7. Install WordPress and create the theme (currently started from a base refined version of Chris Coyier’s blank theme from Lynda.com)
8. Browser and device test the site in both physical and virtual environments
9. And we are live! Take precautionary security measures in the htaccess file and php code

Without getting too in depth, I will summarize these steps in brief.

Research & Ideation

Research is fairly self explanatory; It requires learning about the business through the client’s experience and knowledge, and reading about and studying similar businesses as well as the local competition. The ideation process is compiling and using all of the research and coming up with different ideas for the design of the website and the structure of its content.

Atmosphere

The atmosphere (first introduced to me by Andy Clarke here) is bringing together the websites’ colors, shapes, and some visuals such as icons and typography combinations, usually compiled and presented in a Photoshop document. Between this and the process of the previous step, the client brings input, ideas and changes to the table before we press on into the next step of creating a generalized site layout. I have also recently read very positive things about style tiles which seem like a very efficient way to approach this step of the process, (which I plan to try in my next project).

Layout

The layout is more or less a first round rough draft design that brings all of the needed content and concepts together into a formulated design which is penciled out and presented on paper. The design at this point is built on the necessities and content of the website and takes into account all interaction and style of the future development. By doing the process this way, I am assuring faster load times and relevant, quality information for the website’s users.

Structure

Before styling anything I build the basic theme structure (HTML). I start with the head of the document and work my way down the page as I look at the layout that I sketched out. I also make all of my HTML into modular .php file chunks such as head, header, sidebar, footer etc. and link to them within an includes folder. This makes it much easier to find and attach to each page individually and they only have to be written out once.

Styling

The site’s styling is always started on top of my custom project framework base which is built in Sass. I look at the Photoshop file and my notes that were previously completed for the atmosphere of the project and set the global Sass variables and mixins for things like colors, padding, margin, and CSS3 interactivity, (transitions, animations etc.). Update: After the creation of this particular project, I have now started to implement the use of SMACSS and BEM much more after learning about it from Harry Roberts in the explanation of his Inuit css framework.

Browser Design

With this particular project, I also started implementing Sass mixins for my breakpoints as the site grows from small to large. The breakpoints, have specific styles in the same class so I can eliminate all of the timely top to bottom scrolling and find and search option to locate my classes throughout the stylesheet. I am constantly flexing the browser window from small to large in order to keep it smooth and clean on resize. Once anything starts to look funny I set a breakpoint and re-style accordingly. During this stage of the site build I am also writing and adapting any scripts (JQuery and JavaScript) for interactivity.

WordPress

Once the main chunk of the site is done, I bring everything into my blank WordPress theme. This includes installing WordPress, setting up the database and integrating and re-structuring the code within the WordPress php framework, all while making the needed sections and functionality for the client to edit in the admin. I do this stage of the development and the following testing within my local server environment.

Testing

I test as much as I am able to on my (currently limited amount of) physical devices, and do the rest virtually via browserstack.com. At this time in the project, I also write my fallback stylesheets for legacy browsers; for this site in particular I only have an alternate stylesheet for IE-8. I re-test everything again once the site goes live.

Security

The site goes live after transferring the database and theme from PhpmyAdmin and the WordPress Import Plugin. I make all of the needed changes in the WordPress Admin and we are now done. I finish it all up by setting a very secure Password and Username and then I go into the .htaccess file (I read, learned and implemented much from the htaccess book by Jeff Starr and Digging into WordPress book by Chris Coyier and Jeff Starr) to code some very simple security measures.

So, in a nutshell, that is my project process for the Mapps Coffee website. I hope you enjoyed and please, comment below with any advice or questions that you may have. Until next time…

Tags: Clients, CSS, HTML, Mobile/Multi-Device, Project Process, Responsive Design, WordPress