These settings help keep files consistent and compatible, reducing problems across different editors, operating systems and web servers. For Web Development End Of Line (EOL): LF (\n) > Applies only to text files (1) Encoding: UTF-8 without BOM > Applies only to text files (1) Final newline: End every text file with one newline character...
Google SEO on page: To appear high in Google search list results, Google needs to index your pages correctly by understanding what your pages are about and the only way to achieve this is by reading the text copy in your pages, so pages with no text or few text will not be indexed correctly...
To appear higher in its Google search lists, Google indexes your web pages using the text content copy in each web page. Images cannot be indexed but the text in image file names, images alt tags and image captions can be indexed. Repeat all of these techniques for each page, being the most important one...
Text contents: Separated from design and functionality, only with HTML format, without inline design, easily exportable (ie: XML), transportable to other systems Image contents: All in a single place (folder), with correct image dimensions for all responsive scenarios, correct file format, correct compression, correct file names, correct alt tags, without upsampling (pixelation/blurry) CMS system: Well...
To get more conversion using your website, your website needs to be well optimised, have the correct contents and have links from other websites. These are my main recommendations: Web optimisation: Create websites that are Google SEO friendly + Fast to download + Ready for all devices + Easy to use by your visitors >...
To get more traffic to your website, your website needs to be found by Google, that means that your website needs to have correct contents and also be fast to download. These are my main recommendations: Size: Use less than 1MB per page Requests: Use less than 50 requests per page Plugins: If you use...
What is a Progressive Web App? A Progressive Web App (PWA) is a special website that combine the best of Web pages and Native Mobile Apps to bring an enhanced user experience. A PWA is a Web App so: It works in any Scenario: any browser and any device It is Linkable and can be shared...
Formats JPG: Use JPG for photos with millions of colours as JPG uses lossy compression that can reduce the image file size much more than PNG which uses lossless compression, so never use PNG for photos PNG-24: Use PNG-24 (millions of colours) for images with transparencies or graphics/logos with not many colours PNG-8: Use PNG-8...
WPO (Web Performance Optimisation) > SPEED Do not use a single one page website: split your contents in different pages to reduce downloading time Reduce number of files: deactivate libraries, frameworks and plugins that are not important or unnecessary Reduce file sizes: optimise images in dimensions, compression and format Use Server caching and Browser caching...
One page website, is a new trend in web design, I tend not to use this approach and I do not recommend it and this is why. But if your website uses already this approach, find below how to optimise your SEO correctly. Disadvantages of one page websites: Loads all assets at once >>> Slower...
CSS is a very powerful language for styling HTML pages but can get very complex and very difficult to manage if you do not follow some sort of order. Years of experience in CSS has taught me this: Use a Framework first, I recommend Bootstrap (which is mobile first and progressive enhancement) After the Framework,...
Web Performance Optimisation > Reduce Downloading time > Get more conversion to your business. Files in General: Reduce number of files: If you use WordPress: Deactivate unnecessary and unused plugins > This will reduce JS files and CSS files Combine JS files and Combine CSS files Reduce number of images per page if possible (next...
When you see a website page, your browser keeps a version of that page and it is stored locally in your computer in the so called Cache Memory. Then if you connection is slow or the Internet is busy and you request that page again, if it takes a long time to download, the browser...
System processes Security > Internet: Antivirus + Adware AVG Antivirus (free Antivirus) AND Spyboot Search & Destroy (free Adware) AND Windows: Start > Control Panel > Windows Security Center: Firewall + Automatic Updates + Virus Protection: On Optimise > System: Clean + Repair Advanced System Care (free Optimiser) OR CCleaner (free Optimiser) OR Windows: Start >...
Create these Web Special Files in the root folder .htaccess Contains the permanent 301 redirect to unify your website with and without “www” + Names the Error page + Redirects pages RewriteEngine On RewriteCond %{HTTP_HOST} ^domain.com : Unify URLs RewriteRule (.*) http://www.domain.com/$1 [R=301,L] : Unify URLs ErrorDocument 404 /error-page.html : Error page Name redirect permanent...
Code Validator > HTML + CSS Use the W3C Validator HTML to validate your HTML code Use the W3C Validator CSS to validate your CSS rules Use the CSS Lint code quality tool to perform static analysis of source code and flags patterns that might be errors or otherwise cause problems for the developer Website...
Images by Computer Pixel is the smallest unit of image information which can be controlled by a computer Digital Image is a sequence of pixels in a rectangle disposition Image Dimension is measured in Width x Height pixels, and it is common practice to specify Width first, ie: 1024×768 pixels Colour System: each pixel has...
What is PageRank? PageRank is a Google patented method to assign a numerical weighting, between number 0 and 10, to a web page. The speed of Google search we experience can be attributed in part to their search algorithm and the heart of this algorithm is PageRank. PageRank is a system for ranking web pages...
What is a Mobile Web App? A Mobile Web App is simply a website optimised for mobile devices that look like a Native Mobile App. Mobile: Uses a Responsive Layout for providing an optimal experience for all mobile devices (phones/tablets) and orientations (landscape/portrait). Responsive means the use of fluid layout (widths in %) + flexible...
What is a Responsive Web Design (RWD)? Responsive Web Design is a web design approach to provide optimal user experience for all mobile devices (phones/tablets), orientations (landscape/portrait) and computers (desktops/laptops) using one single website for all. >>> As opposed to use different websites for mobile devices and for computers. Responsive Layout Responsive Layout = Fluid...