Starting website or mobile application design and/or development from a Graphic Designers standpoint

I decided to try my hand at writing an article for those “graphic designers” or “desktop publishers / (DTP operators)” who are just getting started with the world of website design and / or development.

The goal is not really to explain step by step how things are done or for that matter why things are done in various ways, but more to help the person who is accustomed to applications like the old Freehand, Pagemaker, all the way to the newer Illustrator, InDesign or Quark X-Press to initiate themselves into this rather different world.

You open your design application, and first things first, lets make a new document, lets choose a size, A5, A4, Letter. Lets add some bleed to our page, lets account for page growth or page creep, lets turn on facing pages.
Well NO, not in the web, it’s far more complicated, more like lets choose a page size that shrinks or expands on demand to whatever environmental conditions your reader is currently in. Forget the idea of adding bleed as there are no guillotines to account for that might just cut the users mobile phone screen too far to the left.
Imagine a perfect world based around structure, there are rules, they can be bent, they can be broken, but the end users devices have to understand what rules you have decided to bend and break, so rather just don’t.

Next lets choose our increments, millimetres, centimetres, inches, picas, points. Well NO again, because of all these environmental variances we will be using various measurement units such as pixels for elements that are a little more fixed, to percentages to em’s or relative em’s (rem’s) and add in some vh (viewport height) and vw (viewport width) measurements for good measure.

Sounds like a non starter, like it is all just too complicated, but there is help at hand to make this all easier and more digestible, thanks to some very smart people who decided to make the world a little simpler and give us Frameworks. Now with these wonderful frameworks they have done all the heavy lifting for us, they already worked out the various sizes of mobile phones, tablets, laptops, desktops, and even if the user is holding their mobile phone in a portrait or landscape manner.
In it’s simplest form, Bootstrap as a framework can be used for pretty much anything from a layout standpoint as far as websites and websites that display on mobile devices are concerned, notice I did not say mobile apps, those are different. If your goal is to make a website that any device from a television to a mobile phone is going to be able to view and interact with, then Bootstrap works perfectly.
If your goal is to make a Mobile Application available through the Apple App Store or Androids Play Store, then there is a framework solution for that too, aptly named Framework.
The most current versions of these are Bootstrap 4.x and Framework 7.x

Now that this is out the way lets see what design concepts might be a little different, well “above the fold” is still kind of “above the fold” so thats great.
Forget the idea that you are about to select a rectangle tool to add a rectangle/square, or the ellipse tool to add a circle, you are also not going to click on the text tool and drag a paragraph container on your page to add your text. There are other web applications out there that do try to work in such a way, however if you are at all serious about doing this right, then I implore you to not even consider them.

What is the difference you might ask or the problem, if the final result is that you produce a website in the end of the day, regardless of what application you choose, and the simple answer is generally nothing, just like there is no difference in the external look of identical twins, until you get to know them and realise there are indeed vast differences internally, so more accurately nothing in the final rendered browser web page.
From a code perspective a website created in Wappler and a Website created in iWeb, Muse, or any other tool that attempts to recreate the draw a rectangle methodology would not even look remotely similar, and there are hidden functionalities, flaws, caveats that will never hold a candle to a properly formed websites code.

I could write an entire article on just this so I will have to ask you to trust me on this one, as a former DTP Operator in the print industry who still consults daily in various print environments, to a current website and mobile applications developer with over a decade of experience, believe me when I say that I have tried at minimum, 50 different web tools to find a solution to create a website in the shortest possible timeframe, with the best feature-set available, without compromise on the internal code. Wappler is honestly the only one that even came close.

So what should the designer do to begin with… well start with your figuring out your goal, website or Mobile Application or both.
Open Wappler and create a project, but wait, why do you need a project, well you have to house your website somewhere, locally on your computer it needs to be in a folder somewhere and remotely it needs to be accessible to the entire world, so you need a URL otherwise known as a Web Address, or more formerly as a Domain Name. So lets say your website or brochure / book / leaflet is going to be housed on and if anyone on the planet wants to access it all they need do is type in similarly to how you were going to place a half page advert in the National Geographic Magazine.
Lets continue, with your opened Wappler, we need a project and if you need help with that look no further than the Wappler documentation where all the settings will be explained. Bootstrap / Framework

Once your project has been created you need to make some pages, just like you would have to do if creating a brochure, one page or 12 pages, but do not worry, unlike print you could also have 5 pages and you can add or remove as you desire, and if you land up with 1000 pages there is no need to saddle stitch or perfect bind or do a complicated imposition, also no need to worry about creep or spine growth.

Lets make our first page, from the file manager create a new page and lets name it index.html or index.php it is up to you, I prefer index.php but not everyone will agree with that, so the choice is yours, maybe in another article I will do an in depth explanation, but for now lets just say, index.php allows for all the website growth needs you might ever have, with index.html might be a little limiting at some stage.
Why are we calling it index. anything though, why not “my super duper new webpage.php”, well a couple reasons, first off the web does not like spaces, so the page would have the called “my-super-duper-new-webpage.php” however that is not my main reason, it is mainly because index. is the web hosting server default assumed “First Page” or in your case, it would be like sending your brochure designed in InDesign and the front cover is sitting in the middle of the document, it would be difficult for the printer to know what the front cover page is. Therefore just name it index.php or html if you desire.

Now I will stop for a moment here and just mention, that there are many many forms of assistance you can get along the way from the Official Wappler Documentation, to Official Community help, to Video training from Hyperbytes or myself PsWeb, and as a new user just starting out to be honest I would rather look at the Hyperbytes videos first Wappler Unwrapped, and when you have lots and lots of time then feel free to take a look through what I have done Learn Wappler.

Before we dive in and open this new page, we need to set some targets, or a single target in most cases.
As I briefly touched on moments ago, you need to store this website in a place that the entire planet can get to it from. There are many choices you could make, from local webserver hosting environments like WAMP, LAMP, MAMP, etc. The list is long, and the options are massive, so rather have the same hosting provider you just got your domain name through set up a hosting account for you on that domain name. This will include pretty much all the hard work and default options you will need to get started.
The things you need to know before you sign up for hosting, are, is this website you are wanting to make going to be,

  • Static - meaning each page is developed and designed as a stand alone page, that does not retrieve data from a database
  • Dynamic - meaning the data will be populated from time to time from a database
  • Apache, Windows, Nginx - meaning what hosting environment are you comfortable in, I personally always choose Apache/Linux for my needs, and they will probably cover yours too.
  • Database - meaning that some hosting providers include a database with their hosting package and some do not on lower packages, if you want a dynamic website then make sure it includes at least a single database if not more.
  • FTP - I think all hosting providers will give you FTP access to at least your web directory.

So once you have a domain and a hosting account and FTP access to the hosting account you can now setup your remote target, you have your local one from when we created the initial project, but you still need to get the world to see your website at some point, which is the definition of remote.
With this information in hand, look at the very bottom of the Wappler screen and find the word Target: “Your Project Name”, and click the gear icon just to the left of that, called “Project Settings”, a dialog box will open already on the General section, click Targets to open a blank section with a + button to add your new Target.

  • Target Name* This can be any name i like with spaces or not
  • Remote Web Server URL*
  • Access Type FTP in our case
  • Port Can probably leave blank in most cases
  • User Your hosting provider probably sent you an email with this
  • Remote Directory /public_html/ is normal if you chase Apache/Linux like me
  • Password You hosting provider probably sent you an email with this
    And the last two toggle switches, if you chose Apache/Linux you do not need to worry about
    Click Save

Lets now open your newly created index.php page, and you are presented with a lovely looking blank white page, on the right hand side you will see a panel called the App Structure panel, and at the top of that are a few buttons, starting from left to right

  1. + is to Add Components to the App Structure
  2. The two pages overlapping icon is to duplicate a component in the App Structure
  3. X is to remove a component from the App Structure
  4. The 3 squares icon is to Add Framework components
  5. The arrow to the right is to send your selected elements to an Includes file
  6. Lastly the circle arrows icon on the right is to refresh the App Structure Panel when needs be.

We want to click icon 4, the three squares icon, as this will add those very smart Frameworks we looked at earlier on, ensuring your worries about devices and sizes and ratios are all cut down to probably 10% of what they would have been. Once you click it, select Bootstrap 4, which will open another panel, where you can choose from CDN, Local, or multiple BootSwatch themes. In very simplified terms, the CDN is probably the easiest to get you started as a beginner, in fact I still use it everyday over the local versions, there are many people that would disagree with this, but it works for me, so it is entirely your choice what you want.

So now you have a domain, a hosting provider, a local project folder, a remote target, a Framework added, and hopefully a slightly better understanding as well as access to multiple resources for additional information.

Before i close this off I would like to give you a few very general suggestions about starting off, build your entire first page first, with your logos, navigation, footer information, page content, images etc. Once you are 100% happy, and ready to start your next page of the website, then have a read through the Wappler community or look at some documentation regarding SSI / Server Side Includes.
In printing terms this is like what you used to know as Master Pages, it is a similar concept, it is certainly easier though if you get these files as near to perfect as possible before you move them off to become SSI or Master Page files, they are still editable once moved out, but much more difficult if you are a beginner.
When you do finally do this please make sure to name these files with a name AND extension, something like inc-header.php or inc-footer.php, I like to add inc to the front of the name for me, you do not have to, and I always choose .php as well.

If you were a good Graphic Designer or a bad one, the unfortunate reality is that you possibly hardly ever used style sheets in your designing, well for websites we have a similar situation, you should really try to use a style sheet for the same reasons as you should have in print. A single style in a style sheet can be reused over and over again. A style applied to just a single element can not be reused on another thing.
The style sheet method is called an External CSS file, and the styles you define inside can be applied to your page using selectors, called classes or ID’s or global classes or psudo selectors, but honestly if you just concentrate on class and id selectors to begin you will be fine.
If you choose to ignore this idea, as many will you can use styles too but they will be placed on the element otherwise known as inline styles, and sometimes there are times to use this over external, but not all that often.

A final concept is this, the App Structure panel in Wappler currently from a styling perspective gives you full access to all the predefined classes in the prebuilt Bootstrap 4 framework, so lookup Bootstrap 4 documentation to find what they have already made for you before just making your own styles for everything you do.
The Experimental Design panel which you may or may not activate in Wappler Options, gives easy access in a visual way to your inline or external CSS / Stylesheets
The Styles Panel gives you a more granular control over your inline or external css
The DOM panel gives you access to all properties from the HTML standard unrelated specifically to the framework you are using.

Graphic Designers image needs, no psd files please or multi layered tiff files, no 300 dpi cmyk formats, no A2 sized images at 50MB scaled down to a postage stamp used 12 times on a single page please.

  • Resize your images to the largest pixel value you are going to need for that element
  • Save the file as only .jpg .gif or .png where possible, other formats are available like .svg etc. but lets stick with the basics for now
  • 96dpi in more than sufficient for most displays
  • RGB is all we need
  • Deepetching is achieved with a transparent background and saved in .png or .gif format
  • Avoid images with a filesize of more than 135kb when ever possible as the magic number i work towards.

Handy resources to look for in your favourite search engine
Font Awesome icons
Google Fonts

Congratulations for the very long read, I look forward to seeing what you create.


Nice write up Paul - it helped me reinforce some of the thing I learned over the last few weeks - can’t wait to see what you do next. Hope you eventually turn this into a Wappler book!!!

1 Like

Hi psweb,
I am a designer of e-commerce websites for many years; and while I know HTML and CSS well enough, I have had to rely on theme builders to make the development work more efficient. My career started with stat cameras and typesetters, so I immediately recognized myself in your introduction. As I am just starting to build a large, complicated web family history, your article was just what I needed to get started.

While Wappler has produced a lot of articles and videos to explain how the software works, there are many for us that want to just build websites rather than struggle with the terminology the comes with learning to be a data center technician.

I hope you will continue to help expand the audience and customer base for Wappler by providing additional clear roads for designers to use the very promising solutions that the team is developing.

The technology is great, but the end result must make the user’s job easier and more efficient. It has to be easy to learn. Your approach to flattening the learning curve will help keep a lot of newbees engaged.

I hope you will allow me to ask you for clarification when my head spins out of control over Wamps, Lamps, data base architectures and Windows10 upgrades.



So happy it helped you out a bit, and yes, to be honest, at least for the time being I think Wappler in the open market without the help and guidance from this community would be an interesting and difficult place to navigate.

I think this community is the one very big difference that makes Wappler even more powerful, I ask for the guidance of many a member of this community as well as the wonderful staff too all the time, so when you are stuck and feel you have done everything you could think of, then this community is always at hand to assist further.

I try only ask the staff themselves when I am super stuck to be honest, but thats just because I hate feeling like I could not work something out myself, so thats more personal preference than anything else, haha.

A year and a half on… would you say your comments above are all current, or would you change anything knowing what you know now?

Just curious :slight_smile:

Maybe this I would go into a little more detail, to say with a dynamic website, your one page could be 1000 pages, but on the same token even dynamic pulled content still means you need 1000 records for 1000 different pages, although they are all being handed back to a single page for display purposes.

This has changed a little, where its easier to now setup your components for each page in the project area so they auto add when making a new page.

Otherwise besides being able to add another 3 pages to the story it still all rings true, well at least in my head, haha.

The next 3 pages are docker, cloud hosting, AWS, APIs, etc. so maybe more like 5 pages.

1 Like

Lol, you have just done a walkthrough of the first modules of my new series of videos :grinning:

1 Like

Brilliant, cant wait to watch them Brian.

Right now I am just so excited with the updated Where formatter in Server Connect I am stripping out code from old sites and updating them with better ideas.

Hmmm? Not seeing the new where formatter?

We just updated the existing one in Server Connect, thanks to Paul’s user case :wink:

1 Like

No, its a data formatter, so

It looks the same as before but just works better, as in somehow it manages to look through a repeat and get the single value i want that is named XYZ

Ah, got you thanks, was looking for a some new core action component


I was doing stuff like that very manually with setting set value steps and then repeating through them etc. so 50 server action steps reduced to a single formatter.
Wappler can do no wrong right now I am so happy about it.

You know me, I always have some strange use case that needs something else, I think up these things while all are sleeping and then bug Teo alot.

Why am I in this email

and me…?

and me!

LOL! Thought it was just me!

The topic was in the docs category, probably that’s the reason. Moved it to the general category.