Casa Mi Casa Website Build

Our First Steps

The first step was getting fresh new content. Glad to say the client had already developed a “copy” of that. If you don’t know a “copy” is like a script of all the information and text wanted on the site. This is used to basically set the tone and language for the entire website.

We read through the copy and find places to put images and set up blocks and layout of the site. Working with the owner we had to figure out how this refresh was going to looks. So we asked for some reference sites.

Looking over the sites, we decided on a clean, minimalist style that highlighted images to the message, and not the message to the images. Going visually stimulating and leading through content.

The Second Steps

We always being by asking where the site is built, what platform and if any networking solutions need to be addressed. Since the site was already set up and running the next step was to get acquainted with the backend set up.

Since the site was on WIX we already had an idea of what we would be dealing with as far as the template and page designer. However we were glad they paid for premium, it gives you many more options to design your site. One issue we do have with WIX, and other plug and play sites, is you can’t build a Staging Site.

So you can either work on a new site or on the existing site. We opted to work on the existing site and save as drafts. This kept the frontend, what people see the same and changed the backend till ready to launch.

Taking note of all of the required changes we start to work on the design and requested changes.

A staged site is the best way for updating and making more drastic changes to a site. Say you get a new plugin or update and some things may not work well with the new update. This allows you to add the update, or make the changes and see how they function together, before launching.

Third Step

The design is begun. We take the examples and current set up and basically rework new containers, sections, boxes and layout. Every builder offers just a slightly different way to move and modify sections, along with their own stylization of them. But really every container/block is the same, you have a text box, image box, call to actions, and gallery etc.

The images and media were not laid out and organized as we like, so we first fixed and arranged media files. This process also has us adding titles, descriptors and meta data to the images. It saves some time when building in the builder. It also helps with SEO and search engines in the long run.

Since the site was getting a refresh and a slight change to the booking methods, we really only had to add one page. A contact us with a booking contact form.

We often start in order of the menu layout, so Home Page and so on. This way if we get the layout right and the client likes it we can easily replicate that design ascetic to the other pages.

A page is laid out in layers, each layer has a purpose and reason. Parent Blocks, Containers within those blocks, inserts within those. These layers make up complete sections on a web page. This is handy for expanding or hiding content, along with your sites flexibility across media devices.

Booking Page & Form

Not really a fourth step. The site owners wanted to transition from being on AirBnB and VRBO to save money. They also didn’t want to have bookings made online given that the property management needed more freedom. So they asked us to create a contact form that would give them enough information to reach out to potential renters.

It may feel a little redundant, but I often try to remind people what they are getting when checking out. To keep them enticed and not going back and forth, and potentially losing interest. So to do that I addd a nice gallery within the contact booking.

There are several ways, across all builders to build contact forms. Most of these link up with services like Constant Contact or MailChimp. Which are great email management tools. Some offer basic services for free, which is great if you are a small company and only need to send out small batches of promotional emails.

Mass promotional emails are a great way to keep your customers engaged. Retaining of emails is a smart way to increase your customer base, and send out promo’s and updates. These apps allow you to design creative emails, track open rate, interactions and get direct replies or tracking internal clicks.

Click for more

2nd To Last Step Before Launch

The design is completed and the client is happy with it. You run through what the frontend will look like one more time on all mediums (desktop, Tablet and Cell Phone). Now the hardest part here is that not everything will look and function right on all three, so you have to make layout edits.

Its a good thing that, most builders from WordPress to Plug and Play sites, have the ability to separately code builds for each of the mediums. When you get to this point some blocks and content have to be either dynamic, Default or static. It’s all a placement game now, and a how to keep it fast and engaging on all mediums.

Now a key thing that you have to explain to clients here is that not all mobile phones will look right. With over a 1000 different phones out there, on Android and 3 different iPhones. The site will not look the same or function exact on all these phones. So your friend with a 5 year old Galaxy 19 might not look the same as with a current phone.

Last Step To The Build

Now that the site is completed and ready for launch. You, your client and beta testing are completed. You should be going into the backend to check all SEO and Meta/Keyword information. Next you will check to make sure emails and links from frontend to backend are going to the correct locations. Making sure all notifications for contact forms are set up correctly.

All of the favicon and site logo, with correct standard about site is correct. This informations is used to propagate online search engines like Google. This information may need to be tweaked later on. We will cover that in the next section.

Since this site is for a business in Mexico we made sure to download the WIX translate feature. Even though Google Translate is available we wanted to make sure the site was in two languages.

Then Publish your site.

Beta Testing is key for a site launch. For a site like this you get a couple of friends together and have them look over the site and tell you what they think. What they found easy, hard or confusing. High volume store sites should do paid research for this.