Home » Website Design
Category Archives: Website Design
Transferring files from your PC to the website server
Example features Windows 10
First load Windows file explorer (not Internex Explorer or any other browser). You can find File Explorer in the Start menu. Click in the large box just to the right of the name of the folder displayed, in the case below “This PC.” It will then highlight blue as below:
Now simply type “ftp://” and the ftp address of your website. In this example ftp://www.yourdomain.co.uk. You may find it will be something like ftp://ftp.youdomain.co.uk. Finally, press enter:
You should see a pop up window. Enter the username you were given and the password. You may save the password to be remember next time. Finally, click “Log on”
In this example, having logged on the websver, folder mik can be seen on the webserver. You may find many more folders.
To transfer a folder of files from your PC to the remote server you must find the folder with your files in the left hand panel.
To open up folders to view the sub-folders DO NOT click on the folder names, but use only the ‘>’ symbol (see above image) to the left of the folder’s name. We’ve made it red to standout.
The folder should then open displaying any sub-folders:
Then simply drag and drop the folder you want from the left panel (PC) to the right hand one (Server) in the normal Windows’s way:
Single file transfer
To transfer a single or multiple files simply resize the current window (with the server logged in) and open a new file explorer window of the same size and move along side the current window (server). Rearrange them side by side.
- Find the files you want in the new window and drag and drop them between the windows.
- You may also use the ctrl-C (Copy) and ctrl-V (paste) keys to make the copy as you might paste text etc between two open documents or spreadsheets.
- The Windows keys for multiple select (ctrl/alt and mouse click) also work here as usual.
Below you can see two file explorer windows open. The left is the PC and the right setup as the website server. The file icon or name (named ‘file to be transferred’) is simply dragged from the right panel of the left window and dropped from on right window’s right panel. The view is set as icons below, but ‘details view will also work.
Moving and copying files using drag-and-drop.
01 Website design CSS 3 Primer
CSS is an abreviation of Cascading Style Sheets. It’s purpose in web design is the HTML elements will appear on the chosen media. For example a printer, a PC display or mobile phone. Maintenance or updating of a complete website design can be changed by editing one file or stylesheet, often named style.css, but can be of a person’s choosing. There are a number of modules defined in CSS 3. These posts will document them
- The Selectors
- The Box Model
- Backgrounds and Borders
- Image Values and Replaced Content
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
Using CSS 3, how can I make my website logo image fade in
Let’s assume your image has an id tag called logo in your html
<img id=”logo” src=”/img/mylogo.jpg”>
All you have to do is add this CSS to your style sheet, the duration of fade in is 3 seconds. Obviously you can set the starting opacity to 0, i.e. invisible or to something like 25%, e.g. opacity:0.25, so it is already partially visible on page load.
/* fade in */
#logo {
animation-name: fadein;
animation-duration: 3s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadein{
from {opacity: 0; filter: alpha(opacity=40); /* IE8 version and earlier */}
to { opacity: 1; filter: alpha(opacity=40); /* IE8 version and earlier */}
}
/* Standard syntax */
@keyframes fadein{
from {opacity: 0; filter: alpha(opacity=40); /* IE8 version and earlier */}
to {opacity: 1; filter: alpha(opacity=40); /* IE8 version and earlier */}
}
This approach can be used when creating a WordPress child theme. Modify the PHP code in the header that displays the image. In WordPress 2016 theme the line to alter begins:
<img src=”<?php header_image();
Simply change this to:
<img id=”logo” src=”<?php header_image();
Add the CSS to the child’s style.css file.
Installing WordPress Plugins
- Always have a backup of your WordPress site, belt and braces is best. Use your file manager or FTP to make a copy of the site and use and export your WordPress database using mySQLi admin on your local PC.
- Plugins can interact with each other so try out the plugin with the others inactivated first. Then re-activate one by one and check out the site.
- Make sure you have the latest version of the plugin preferably via the WordPress site.
- Check out the plugin is still valid with updates of WordPress, if not consider deactivating until it is.
Check out the tutorial on how to install WordPress plugins.
The “Perils of Plugin” – or how I learned to live dangerously
Why might I want a plugin?
It does something that is useful that I don’t know how to do and I’m not going to pay a WordPress developer to do it Ta very much. “The site really looks good now I have a load of butterflys making love to the world in the corner.” If that is you, you really need to read on.
What should I check for?
- Has the WordPress plugin been verified as compatible with your current version of WordPress? If not – leave it!
- Check the star rating is high and there are many users.
How old is it?
Does the WordPress plugin developer or publisher support the site or is there simply a pay wall you have to get through.
Why should I worry it’s Free and Free is good!
Yup but so is the flu free, care for some? You are over the flu in days, some hacked sites may take weeks to get back to normal.
Hacked? What you mean.
Look at WordPress there are always security updates from a big development team. How good is the PHP/WordPress that produce this plugin? Are there backdoors in it that will pass your site’s security?
Plugins can slow your site down. Many times people have contacted me and said their site renders pages really slowly. Perhaps it might be the 30 plugins you have – most of which are active but you don’t use and what’s more you have not got round to doing all those security update they say they have. Keep your site lean, for Google like speedy sites as enhancing viewers’ experience. That means a higher ranking…. Mobile can also be slow at rendering
If you are going to use plugins read this…
Setting a different header image on a mobile phone
This method can be used both in a WordPress website or a non-WordPress web design. Basically, I’ve made here an assumption that the website design header image is displayed as a background image in a div called header. The need for any positional information is ignored here for clarity. Assuming the header image is 1080 x 198 pixels on a PCm we need to replace it with something that fits and still looks good on 480px wide mobile. The default layout CSS could be:
#header {
background-image: url(headerlarge.jpg);
height: 198px;
width: 1080px;
}
Below the website designer decides to make a different smaller more squarer jpg image for the mobile 480pixel screen. The header div CSS is then changed to hold it. Initially the default is set in this case, but then overridden by the @media rule if the screen is small.
#header {
background-image: url(headerlarge.jpg);
height: 198px;
width: 1080px;
}
@media only screen and (max-device-width: 480px) {
#header {
background-image: url(headermobile.jpg);
height: 480px;
width: 480px;
}
}Using CSS3 @media Rule to produce a responsive WordPress website design
Firstly, you can set style by selecting a particular style sheet for different screen resolutions or media types and devices.
<link rel='stylesheet' media='mediatype and|not|only (media feature)' href="stylesfile.css">
However, the @media is a CSS rule that allows you to set different styles for diferent screen resolutions or media types/devices. CSS3 uses media queries to check out
- width and height of the device
- width and height of the area of a web page visible to a viewer on a browser ( viewport)
- landscape or portrait orientation
- resolution
@media not|only mediatype and (media feature) {
a list of CSS rules….
}
Media types can be:
- all For use with all media type devices
- print For printer output
- screen PCs Laptops, tablets, smart-phones
- speech for browsers with speech output
A short list of some of the media features are:
aspect-ratio of the viewport
color supported on the output device
color-index The number of colors available
device-height of the device’s screen
device-width
height of the viewport
width of the viewport
max-device-height
max-device-width
max-height of the display area, e.g a browser window
max-resolution of the device, using dpi or dpcm
min-resolution
max-width display area, e.g. browser window
min-device-width of the device
min-device-height
min-height of the display area
min-width
orientation landscape or portrait
An example of setting a larger font for a lower resolution mobile phone screen of 480 pixels or less. The better resolution screens can use 12pixels instead.
@media only screen and (max-width: 480px) {
.content{
font-size:14px;
}
@media screen and (min-width: 481px) {
.content{
font-size:12px;
}
}
How do I use both a SEO keyword rich domain name and a brand orientated domain for a single website?
A good website designer should know the answer to this one. Simply host your website (html or WordPress) using the SEO keyword domain and use Web Forwarding to point the branded domain to this site.
In 123-reg and when using our webhosting you can simply select the web forwarding option and select the branded name, for example www.fabbro.uk and fill in the “point to” to box with where it should go, e.g. www.goodfreelancewordpressdesigner.co.uk. By doing this any reference to www.fabbro.uk/thispage will then be forwarded to www.goodfreelancewordpressdesigner.co.uk/thispage etc.
Search engines will usually list only the hosting domain for keywords. The forwarded domain will be found and used, but usually when only looking for the brand words or the domain name itself, i.e. www.fabbro.uk will appear in searches for www.fabbro.uk
CSS using ‘margin auto’ but won’t centre
So you are trying to be a good web developer and using CSS to centre an element within your website design. You are using something similar to below to centre your image or div and it refuses to centre?
margin:auto;
margin: 0 auto;
Basically if the browser is told how big it is, then it can figure out how to centre it inside the outer container. Useful if it knows the outer container size too.
Exact width solution using pixels
Less responsive, but try adding some width information like this
width:xxxpx;
where xxx is the width of the element you are trying to centre. If this works you are on the right track with solving your centering problem. You may also be able to use max-width or min-width etc.
Using percentage size solution
Ok try using a precentage smaller than the outer element that contains what you are trying to centre. e.g. The outer div container is 1000px and the div you want to centre inside it is 800px. Set the the latter’s width to 80%.
width:80%;
The outer might be width:100%, so try 80% width for the object you are centering too.
Like I said if the browser is told how big it is then it can figure out how to centre it.
Display Block
Also try setting display to block
display:block;
How do I apply multiple CSS classes to a HTML tags when website designing?
Applying the website design classes
To use more than one class inside the HTML tag in the class attribute, simply use both separated by whitespace. For example this uses two classes called class1 and class2. <div class='class1 class2'> Your website design code </div>
Defining the website CSS classes
To have some CSS restricted to when these two classes are found together in the class attribute with an HTML tag simply combine them like this
.class1.class2 {
Your website design CSS...
}