Progressive Web App

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 […]

Read More…

Images for Web

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 […]

Read More…

Web Optimisation check list

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 […]

Read More…

One page website

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 […]

Read More…

How to avoid CSS Spaghettification

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, […]

Read More…

Web Performance Optimisation

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 […]

Read More…

Cache memory

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 […]

Read More…

PC Utilities

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 Glary Utilities (free Optimiser) OR CCleaner (free […]

Read More…

Web Special Files

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 […]

Read More…

Validate and Submit

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 […]

Read More…

Digital Images

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 […]

Read More…

PageRank

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 […]

Read More…

Mobile Web App

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 […]

Read More…

Responsive Web Design

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 […]

Read More…