The Zebra Law Firm website is a multi-page website for a relatively new Law Firm. Providing users information about the firm, it shows what services the firm can provide, introduces the team at the firm, provides career information and contact details. The inspiration for this website is a family members new law firm.
To clearly see what the Law Firm's services are. What the philosophy of the firm is. Who the CEO's are and colleagues they work with and also the career information of both. Users will be able to fill out a form if they are interested in a career with the firm. Contact information and office details / map will be available on the website.
To have a fully functional and customised website that can go more in depth than Linkedin and also have more of a personal touch. It will allow the owner to look professional and give the option of users to contact them and start communication channels.
- The Nav bar has the company Logo on the top left.
- Page Links are in the middle of the header, slightly offset to the right.
- There is a "contact us" button on the right of the header.
- The Page Links have a "hover" animation and an "active" animation - lighting up in blue colour when hovered and once clicked will stay blue so users know what page they are on.
- The nav bar changes size and is readable when changing dimensions.
- Contains a header Image with company name and company slogan.
- The Name of the Firm and picture of a Zebra is a metaphor for the law being "black and white".
- A section explaining what the company does and who they are.
- A News section showing 4 top Law News stories - with links to external news pages.
- What the services company can provide.
- 2 sections, one showing personal services and the other section showing business services.
- Both sections have an unordered list of services.
- The team page has a team photo after the header hero image.
- 4 Members of the team are showcased with an individual photo and personal experience text.
- There is also job role and position information under their names.
- The page is responsive and at 700px the team pictures stack on top of their text content.
- The career page contains an introduction followed by 4 career content boxes - showing the careers available.
- There is a form on the career page that users can use to apply for positions at the firm.
- The "Contact Us" page has some information on the firm followed by the Office details and opening times.
- A Google Maps address has been embedded onto the page.
- Both are responsive and on smaller screens stack on top of each other.
- The footer contains the company name and copyright symbol.
- The social media links are contained in the footer and are links to respective external social media links.
The deployed website has been vigorously tested on multiple web browsers and devices.
- Chrome, Firefox, Edge, Safari web browsers have been tested on.
- 4k Monitor, 2k monitor, 1080p, iPad and iPhone devices have been tested on.
One of the main issues I found was that when I developing the page I was using "min-width" on some images and divs which were resulting in poor responsiveness, meaning that when I would shrink the page down - the image would appear fine but the rest of the elements on the page would squash to the side of the page.
During the Testing stage I found that certain margin settings worked well on Desktop but then not when viewed on iPad and iPhone safari. This was resolved by changing margin settings.
-
HTML
- I can confirm that all HTML on each page has passed without error in the official W3C Validator
-
CSS
- I can confirm that all CSS has passed without error in the official Jigsaw Validator
Scores for accessibility on each page is Green and in the 90's.
There are no unfixed bugs on the website. Only a few things that I would have possibly changed.
- The Header could have perhaps had a max-width to match the Hero image.
- The Header has a lot of media changes to be responsive, having a dropdown menu may have been a more sensible option.
The website has been deployed for several days and it has been very helpful in testing the website on numerous devices.
The process I followed for deploying the website is as follows:
- From my GitHub project I went to Settings,
- Then selected Pages on the left hand menu,
- Under Source I selected Deploy from a branch,
- Finally, under branch I set it to main - root and save.
The live website can be found here: https://cniblock.github.io/Project_1/
After doing some research on top Law Firm websites, I found them to be quite similar to each other which inspired me to go against the grain and create something different and original.
The "About Us" intro text on the Home page is borrowed from my family members Law firms Linkedin page.
Content for the Lawyers experiences was inspired my numerous law firms websites.
Images for the website were taken from pexels.com
The Map on the "Contact Us page" was embedded from google.com/maps
The Form used was inspired by a course I completed earlier this year on freecodecamp
The Header was inspired by a YouTube tutorial YouTube link
The Law News links are taken from public news articles from the BBC, Global Competition Review website and The Guardian.