Speaker Deck

The creation of small business websites in Wordpress / WordCamp Belgrade

by Marija Zaric

Published May 26, 2017 in Design

I talked on WordCamp in Belgrade on 13th May. Below is the text from the talk. What I am very fond of when I speak at the meetups and on conferences is interactivity with the attendees and the dynamic of the talk no matter if it lasts for 15 minutes or 40 min.
------------------------------------------------------------------------------------------

Hello to everybody,

My name is Marija Zaric. I am a freelance web designer and today I will talk about the creation of small business websites in WordPress from scratch – the whole process of mine.

Clients
------------------------------------------------------------------------------------------
How I got the first international clients? Years ago, when I started working as a freelancer I had to advertise myself. I created free html5 templates for one website, so the potential users can download it and use it on their projects. After a couple of months, the first clients started to contact me. Most of my clients were from USA and around the world.

My process
-------------------------------------------------------------------------------------------
My process consists of few steps: listen, discover, concept, designing in the browser and testing, WordPress.

Listen
----------------------------------------------------------------------------------------
Communication skills are crucial. If there is no good cooperation you will lose a lot of time and energy in the project. In this step, you will find out how many pages the clients want, to what are their design requirements, what is the budget, the final deadline to whether they prepared the content because if they didn’t never send them a lorem ipsum text in the design. Find some quotes and put it inside the text to see how it fits inside the structure of the page. It is recommendable to work with the real content. Some of my clients who had a knowledge of HTML, CSS wanted to make the updates by themselves and others who had a knowledge of WordPress admin panel wanted the same. Overall, good communication skills and collaboration are the most important and as you can see he agrees with that too (humor).

Discover
------------------------------------------------------------------------------------------
Discover or researching depending on the project and the client’s requirements: it could be finding a new framework, functionality, plugin, design inspiration.

Concept
------------------------------------------------------------------------------------------
After the first two steps, I create the concept of the website in my mind without any mockups or wireframes. I skip Photoshop which I use for images and go straight into HTML and CSS, (coding is fun) and start testing and testing or designing in the browser.

Designing in the browser
-----------------------------------------------------------------------------------------
Designing in the browser means seeing the design in the devices as soon as possible. As soon as possible see the design in the surrounding in which it will work. According to one statistics: More than 50% of mobile users use their mobile devices to search for information via Internet. More than 70% of tablets owners buy things online every week via their device.

That means that design should be in the browser. Therefore, I am sending HTML demos to the clients instead of mockups. The advantages: Design will be accurate 99%. You can easily show changes without having to alter the entire page. You will be much faster and you will cut the development time. What is essential is that your clients will have a better understanding of the design. They will test it in all the devices they have starting from mobiles once you send them a link with the demo.

Responsive frameworks
----------------------------------------------------------------------------------------
Responsive frameworks are helping us to create responsive websites in a faster way. Define the structure and the functionalities on the page in order to choose the right framework. Which frameworks I use? I use Bootstrap and Responsee framework. Bootstrap is the most used responsive framework and it has a large community. Great website for learning Bootstrap which I recommend is startbootstrap.com.

Mobile first approach
-------------------------------------------------------------------------------------------
With the immense use of mobiles and the responsive design as a standard when creating the website use mobile first approach. Focus on smaller screens sizes the resolutions from 320px to 568px and then to tablets, laptops and desktop computers. You have to be sure you won’t be creating complex layouts that are hard to adapt on smaller devices. With that approach, we have a minimalism as a web design trend from 2013 till now. Today with a great color combination and a big choice of typography, images and responsive frameworks you can create modern and simple websites.

Testing
-------------------------------------------------------------------------------------------
After the first three initial steps, I said I go into HTML and CSS and start testing. How do I test the pages before I send them to the clients? There are three way of testing: Online emulators, real devices and local stores. With online emulators, you can test on a vast range of devices quickly. With real devices, you are sure you will find all bugs. So, I test on the devices I have.

On the one hand, you can’t have all the devices because you will financially break down. On the other hand, in the name of all the devices I don’t have I go to the local stores who sell them and have an internet connection and test on them. These three steps of testing are a good mixture where I am pretty sure that everything is working before I send HTML demos to the clients.

WordPress
----------------------------------------------------------------------------------------
And finally, after we agree that the website is fine I start with the creation of WordPress files for the theme, including: index.php – the main file that loads the theme and acts as the home page, page.php – used for inner WordPress pages, header.php – contains everything you want to appear at the top of the website, footer.php – contains everything you want to see at the bottom of the website and style.css – all the styling for the theme.

I install the WordPress, activate the theme, create the pages in WordPress admin panel, insert the main content from HTML pages to WordPress pages, insert images from media library to WordPress pages too and that is it. After an hour of testing the website in WordPress the clients can feel free to make the changes. Regard to that most of them wanted to update the main content. For example news was on some websites created as a page on others as a blog with the posts depending on the quantity of the text they had. I created a website for a genetic engineering company from USA. It was in WordPress and responsive. Their news was created as a page due to a small amount of information they had: a date and one to two sentences. So I created it as a section for each news on the page and their main focus was for that page to be changed by their team.

Recycling
---------------------------------------------------------------------------------------
As a conclusion of the talk recycle your finished projects or the themes that you are selling as the themes or templates for the future projects where you will change the smallest elements (colors, text, images), moreover you will reuse the components and modules in the theme plus of course what the client wants plus your creativity. In that way, you will create your own system of making websites in a more efficient and productive manner.

Thank you. Do you have any questions?

------------------------------------------------------------------------------------------
I will finish it by saying: Have a persistence (not quitting when the going gets rough), a lot of dedication and a great, great enthusiasm in what you do. Many thanks and Cheers!

Other Presentations by this Speaker