Small Business Website Revisited Smita Roy

Background The Art of Bloom’ has been chosen which is a florist shop located in a small town called Hornchurch in Essex. The purpose of this presentation is to critically analysis the improvement opportunities to enhance the find ability through SEO techniques along with improved responsive look and feel.

Re design considerations Responsive design with a mobile first approach. Ease of maintenance by applying some modularity with PHP server-side includes. UX features such as custom error pages Good find ability with SEO features. Good visual design and coding

Analysis of existing visual design and coding Aesthetic Visual design is good Semantic design a) Char set header is missing.h1-h6 tag are missing. The site doesn’t use micro data eg comments, testimonial, blog and articles. Element selectors are missing. Structure is not simple. b) Coding Indentation is erratic. No commenting, text transform is not use. Too many classes used parent element.

Responsive web design

Information architecture and content strategy Content & page level Text/Code ratio is proper % of your page content is text type. Content strategy Not very bad Duplicate contents The URL doesn't redirects with or without www. Canonical URLis missing Duplicate content is presents

On Page SEO analysis Page titles & meta description Page titles are missing. The page has not enough keywords Images Image ALT tag is present Keyword The page has not enough keywords, Some keywords used in Page Title does not appear in most used keywords in body. Microdata is not used.

Key recommendations 1.Add page title and it should be between 55 to 65 characters 2.Meta description should be between 140 to 170 characters 3.Add rich keyword to the relevant places 4.Every page should have a header tag H1 to H6 5.Make some keyword with italic or bold. 6.Use keyword rich contents 7.Add keyword to meta description. 8.Remove duplicate contents; 9.Use CSS selector. 10.Use less div tag. 11. Define content language. 12.Website layout should be clean, cool and not busy. User should feel comfortable when they visit the site to find the intended information. 13.Adding feedback / testimonial section will help the business owner to improve the user satisfaction by filtering the valuable comments and turning them into actions. 14.Need to add char set header 15.Modular design with PHP server side includes 16.Following actions could be taken to make the site responsive: a) Add view point b) query at CSS style sheet

Recommendation for Responsive Design 1. Add Viewport: The viewport is the user's visible area of a web page img { max-width: 100%; height: auto; } 2. Responsive Navigation bar 3. Add Media Query: only screen and (max-width: 500px) { body { background-color: lightblue; } } 4. Mobile First: Mobile First means designing for mobile before designing for desktop

Responsive site min-width:320px min-width:620px min-width:800px Phone Tablet Desktop

Modular design with PHP server-side includes branding.inc.php navigationbar. inc. php footer.inc.php Pons: Easy to manage repeated content.