Boutique Ado

New deployed app coming soon (Heroku has ended its free product plans)

User interface improvements, look and feel, presentation, interactivity, adding features relative to user interface improvements (image gallery, go to page bottom button, highlighting menu/sub-menu items, "Home" icon link on mobile devices, navbar display change on its hover position and on window scroll position) to the initial Boutique Ado website version.

---

Table of Contents

1. About

2. Initial website user interface

3. Adding Features

   • Navigation bar
     • Description
   • Footer
     • Description
   • Landing page
     • Description
   • Set of slides gallery
     • Description
   • Modal image gallery
     • Description
   • No result found page
     • Description
   • Go to page bottom button
     • Description

4. Technologies Used

   • Front-End Technologies
   • Back-End Technologies

5. Testing

   • Layout responsiveness
   • Compatibility
   • Testing left

---

About

The purpose of this project is to improve the user interfaces: the look and feel, the presentation and the interactivity of the initial Boutique Ado website version and adding features relative to user interface improvements (image gallery, go to page bottom button, highlighting menu/sub-menu items, "Home" icon link on mobile devices, navbar display change on its hover position and on window scroll position). User interface improvements: responsive website using HTML, CSS, Bootstrap 4, JavaScript, jQuery

Initial website user interface

Back to top

---

Adding Features

Navigation bar

Description

• Common desktop/mobile:

  • Transparent navbar when
    • the window is at the top
    • the header is not hovered
    • menu/sub-menu are not opened
    • navbar collapse menu is collapsed
  • White navbar when
    • the window is scrolled down
    • the header is hovered
    • menu/sub-menu are opened
    • navbar collapse menu is pulled down
  • Sky blue line on the bottom of the navbar (including the navbar collapse menu when this one is pulled down) when the page is scrolled
  • Menu item highlighted when hovered or selected/pulled down
  • Sub-menu item highlighted when hovered
  • "My account" menu closes when the user clicks anywhere in the page
  • Search button colour change when hovered or selected

• Specific desktop :

  • Dropdown menus: dark grey box shadow
  • "Gallery" icon link added in the desktop top nav
  • Navbar item sub-menu closes when the user clicks anywhere in the page
  • Logo of the website
  • Favicon

• Specific mobile :

  • Dropdown menus: light grey box shadow
  • "Home" and "Gallery" icon links added in the mobile top header
  • Search input field in the mobile top header closes when the user clicks anywhere in the page
  • Navbar item sub-menu closes when the user clicks in the header of the page
  • Navbar collapse menu closes when the user clicks on "Search" or "My Account" icon links and when the user clicks in the body of the page (apart from the header) or in the footer.

Back to top

---

Footer

Description

• Newsletter subscription in the purpose of the website presentation (not implemented)
• Links to additional website pages in the purpose of the website presentation (page links not implemented)
• Social media links
• A copyright mention is displayed with my name beside a GitHub icon link which opens my Github

Back to top

---

Landing page

Description

• Landing page sections:
  • Shop now feature
  • Order features offered
  • Target audience
  • Customer reviews
  • Share your own fashion style feature

Back to top

---

Set of slides gallery

Description

• Carousel of 4 slides of 3 images each
• The set of slides gallery is auto played on page load/refresh

Back to top

---

Modal image gallery

Description

• On click on each images of the set of slides gallery a modal image gallery opens whose purpose is to display the images in bigger size.
• The modal image gallery opens on the image selected in the set of slides gallery.
• The modal image gallery is auto played on page load/refresh
• When the modal image gallery opens it pauses the cycling of the set of slides gallery. The modal image gallery cycling is maintained.
• When the modal image gallery closes it resumes the cycling of the set of slides gallery.

Back to top

---

No result found page

Description

• Displays an humoristic image and a message informing the user
• Offers a link to go back to Products page.

Back to top

---

Go to page bottom button

Description

• Adding a go to page bottom button, in addition to the page up button in products pages in desktop and mobile devices and in bag page in mobile version.

Back to top

---

Technologies Used

• GitHub - Used as remote storage of my code online.
• Atom - Used as a local IDE.
• Compressjpeg - Used to compress images for loading faster
• Techsini - Used to generate multi-device website mockup

Back to top

---

Front-End Technologies

• HTML - Used as the base_master for markup text.
• CSS - Used as the base_master for cascading styles.
• Bootstrap 4 - Used as responsive front-end framework, mobile first projects design.
• JavaScript - Used for user interactions.
• jQuery 3.5.1 - JavaScript library, used to simplify some of the DOM manipulations.

Back to top

---

Back-End Technologies

• Python 3.8 - Used as the back-end programming language.
• Django 3.1.1 - Used as Python web framework.
• Heroku - Used for app hosting.

Back to top

---

Testing

Layout responsiveness

	Moto G4	Galaxy S5	Pixel 2	Pixel 2 XL	iPhone 5/SE	iPhone 6/7/8	iPhone 6/7/8 Plus	iPhone X	Surface Duo	Galaxy Fold	iPad	iPad Pro	Desktop 1024px	Desktop > 1200px
website is responsive <= 767 px	Good	Good	Good	Good	Good	Good	Good	Good	Good	Good	n/a	n/a	n/a	n/a
website is responsive >= 768 px	n/a	n/a	n/a	n/a	n/a	n/a	n/a	n/a	n/a	n/a	Good	Good	Good	Good
base_master.html
Navigation bar: logo / links / search	Good	Good	Good	Good	Good	Good	Good	Good	Good	Good	Good	Good

Back to top

---

Compatibility

I tested the website across the 6 main browsers in both desktop and mobile configuration to ensure a large number of users can use it successfully.

• Chrome v.92.0
• Edge v.92.0
• Firefox v.90.0
• Safari v.5.1.7 for Windows 10
• Opera v.77.0
• Internet Explorer v.11

All pages	Chrome	Edge	Firefox	Safari	Opera	IE
Expected appearance	Good	Good	Good	Poor	Good	Poor
Expected responsiveness	Good	Good	Good	Poor	Good	Poor

• IE: Some CSS3 properties and HTML5 elements are not fully supported

• Safari v.5.1.7: It’s an outdated version and lacks many of the features present in the latest version of Safari. The last version of Safari for Windows was released on May 9, 2012.

Back to top

---

Testing left

There is no way to install the latest version of the Safari browser on Windows 10 as Apple stopped developing Safari for Windows operating system long ago. For testing this website on the latest version of Safari, I will have to install the newest version of macOS on Windows 10 in a virtual machine.

Validators

HTML

• W3C HTML Validator

CSS

• W3C CSS Validator

Javascript

• Javascript Validator

Chrome DevTools

• Chrome DevTools

Python

• Python validator

Known Issues

Back to top

---

Deployment