Sub@omic Designer Websites & Branding
(c) Sub@omic Limited 2020

< open source content management done properly  />

Watch A Website Being Built

The creation and development of designer websites may appear to be a little bit of a glamour job but, as with almost every other job in existence, once you scratch beneath the surface or take a look behind the scenes you get a very different impression indeed!

Developing websites is no drag-and-drop activity

The generally held perception out there appears to be that building a website is a drag-and-drop operation, one where images are copied and pasted into position just as one would do in Microsoft Word. The reality of developing websites is about as far removed from that perception as it's possible to get. This is the Sub@omic difference. Developing bespoke designer websites using PHP, CSS, MySQL and JavaScript requires the website developer to, figuratively speaking, immerse themselves in code for hour upon hour. Not that we're complaining because we love it :-)

Timelapse shot over 5 days

Andersons Company Solutions WebsiteThe video above is a timelapse recording of the build of a designer website and is a clear demonstration of how Sub@omic develops websites using PHP, MySQL & JavaScript code. The image to the right shows you one of the pages of this four page designer website and, as the video runs, you'll get occasional glimpses of this website evolving and peeking through the pages of PHP and CSS code. Very rarely do we get the opportunity to develop a website in one continuous burst and the development of this designer website was no exception. This website development timelapse was recorded over 5 separate sessions. Keep your eye on the clock in the top right hand of the video and watch the time pass as we work a 'ghoster' on Monday and work through the night to get this website launched in time!

0:00 - Starting the designer website

Blank HTMLOur bespoke designer websites all start from a blank sheet of paper and our timelapse video too starts with a blank sheet of paper; this open approach means that our bespoke designer websites are genuine one-offs which are never shoe-horned into a pre-existing CMS structure. Our designer websites allow your content and your business proposition define the layout and flow of the website. Shortly after starting from a blank sheet of PHP code you'll see the beginning of the website's homepage index.php shortly before the creation of the website hosting account, the modification of the domain name's DNS records and the creation of a web font account using Typekit.

0:08 - Making the connection

Eight seconds into the timelapse video you'll see the creation of a MySQL database on the website hosting account. The MySQL database holds all the content (words and photos) of the website in a custom-built table structure, individually written for the website in question. We then make a remote connection from our office to the webserver's database using a MySQL database client and begin to build the database structure. Webpage elements such as titles, descriptions, headings, paragraphs, images and hyperlinks are created in the database and then the connections between the PHP page and the database tables are hard-coded into the dynamic webpage.

0:10 - Lifting the individual brand elements

Website logo design PhotoshopTen seconds in and you'll begin to see Sub@omic open the digital artwork supplied by Gosling so that we can extract, resize or reproduce the individual elements of the brand such as the logo, bullet points, banner ads. From this stage onwards, we're working right down at individual pixel level, extracting the RGB split of brand colours and measuring the position of brand elements with pixel-point precision.

The software tools used during development

What you're watching is pure website development so you won't see any dragging-and-dropping of 'stuff' onto a webpage because this bespoke website is being created directly from code and not from a common-or-garden content management system. We develop upon Apple's OS X and there's a few mission critical software applications we use to develop with.

  • BBEdit (an OS X text editor that we've relied upon since we very first started web development, in which we write PHP & CSS code).
  • Navicat (a MySQL client that allows us to make a remote connection to a webserver's database).
  • Fetch (an FTP client that allows us to reliably upload files from our local network to the webserver).
  • Photoshop (the Swiss Army Knife of web design).
  • Xscope (a screen measurement tool that allows us to position brand elements on the webpage with pixel-point precision).

1:39 - It's all about Anderson

100 seconds into the movie and the home page of the designer website is complete and Sub@omic moves onto coding about.php - a dynamic PHP webpage that allows the client to write an unlimited number of webpages 'about' their business.

2:50 - Dynamic solution to capture visitor data

Three minutes into the video we begin to lay the foundations for a new, third, PHP page to the website. Built upon the 'about' page solutions.php will offer the ability to include an HTML form for data capture in the form of online pay calculator. Development costs are kept low by treating the 'about' page as the template layout for other web pages. The ability to create an unlimited number of data capture forms into the website is achieved by creating a PHP include file that can be called into a webpage on-demand.

3:34 - We have contact

We make one final use of the template for the creation of contact.php - a page that works to close-out the website visit with a conversion. The page uses multiple forms that are included to enable the website visitor to request a callback, order a brochure or make a general online enquiry. The enquiry form also offers the ability to embed a Google Map of the head office location.

Mini Website Publishing Platform

The website being built was a small but incredibly versatile designer website for a management consultancy. The consultancy's brand identity and the webpage layout had already been created by our design partner Gosling Creative Limited so our job was to turn the graphical layout into a fully functioning website. The website now acts runs as a mini website publishing platform, one that may be rebranded for each of the many management consulting divisions. The website consists of just four dynamic PHP webpages and one CSS stylesheet:

  • about.php
  • contact.php
  • index.php
  • solutions.php
  • acs1.css

Each line of code was individually written for this website and this means that there's no trace of the bloat associated with the HTML output by a CMS such as Wordpress, Drupal, Joomla or whatever the CMS du jour happens to be. This focus on writing only what's needed means that our bespoke designer website are not only open source and incredibly lightweight but lightning fast

web design style
Sub@omic Limited
Premium Quality Web Design & Development
|
+44(0)7970 029025
News | Blog | Contact