Giter VIP home page Giter VIP logo

pp1_business-website's Introduction

Stockholm Business Enhancement

The website’s objective is to create a clear understanding of what Stockholm Business Enhancement can provide, and the goal is to generate a sincere connection with the potential client that leads to a business meeting. Where prices often vary depending on the budget between clients so does also the tendering offer – likewise regarding services – therefore no prices can be shown on the website to make a serious impression.

Stockholm Business Enhancement is a website that represents an organization that supports and advises their clients to succeed in their overall operation and set up new goals for making them reach a new potential. Since society is has been forced to change due to the pandemic as well as a corporation of all classes.

The target audience is mainly small-and-midsized organizations that are having an issue within their businesses or need guidance into a new market – e.g., an international one that wishes to enter into the Swedish market and vice-versa.

Disclaimer: Some of code have been changed to do some late changes due some unexpected errors from validation and troubleshooting regarding open the website.

Some of important structure has been lead to unfortunate loss that has lead to the website is no longer responsitive but it hasn't changed the outlook of the website.

"My chrome browser crashed and I didn't save my changes so my website isn't responsive any more. In addition the workspace didn't open for a while and the cause for it was unknown but I lost a valued time there handing in the project with outstanding quality I wished for"

This will be changed in a short future,

Thanks for your understanding,

Your Developer,

Gustav

Responsive image

Features

Once you are entering the website you are getting a clear idea of what kind it is and a sense of interest by continuing to investigate further to find out more about the organization.

Navigation Bar & Logo

  • The navigation bar is consisting of three links, each of which represents a page of the specific content of information: Home page, Services, and Contact with fully responsive navigation likewise by clicking on the page’s header you’ll return back to the logo-home page.

  • This makes it convenient and a reminder for users what website they are using thanks to the logo and the background image. Where awareness of the brand is getting repeated.

  • The feature supports and guides the user to easily navigate themselves across the website. It’s perfectly suitable for all mobile devices and not only desktops which go align among people’s smartphone usage but also it makes it flexible.

Navigation & Logo

Business Ethos

  • Since the target group is organizations and their business leaders are being exposed to competitors and other irrelevant information that creates a ‘noise’ that disrupts the website’s message.

  • It’s written in a clear and outlined text for users to understand what Stockholm Business Enhancement stands for is essential for the website’s communication to gain the trust it needs for companies to be willing to start a partnership with Stockholm Business Enhancement.

Business Ethos

About, Mission and Vision

Underneath the business ethos section, it states About, Mission, and Vision:

  • About - It shares the story by telling why the organization was established and making a personal attachment for the user why they should choose Stockholm Business Enhancement beneficial.

  • Mission - how the daily operations appear, and what clients will expect by using services of the Stockholm Business Enhancement.

  • Vision - it clearly explains what the long-term goals are for the organization and also indicates a sense of transparency.

About, Mission and Vision

Distinguished line & Social Media

  • The last section of the homepage is has a clear line for making it easier for the user to what is important or differentiate between the company's vision & goals to the social media content.

  • The social media content is interactive clicking on the logos and what it does takes you to that specific social platform.

Social Media

Footer

  • The footer is unique by being displayed differently on each page and the reason behind this is to create a call to action.

  • Many organizations are communicating and using social media channels in their communication with their audience.

  • Each platform represents a diverse way of business communication and speaks to the audience differently. As well as the purpose is as mentioned to create each page differently and be eye-catching for the user.

Social Media 2

Social Media 3

Services logo

  • The background image remains the same - except for the brand name. What it does is give a sense of new characteristics to the design.

  • It provides the user a new way of navigation and familiarity by knowing that you are on the same website as the previous page represented.

Services-logo

Services

  • Services are being detailed described what they are and how they can be offered for the client's business. It's the most vital page due to what it says it does for potential business owners and it as well says the organization's purpose.

  • They are utterly outlined and clear for the target audience to rapidly understand what it can do for them as mentioned but also to stand out for people to read on mobile devices easily.

Services

Last Services Image

  • The company Stockholm Business Enhancement is located in the Swedish capital and therefore it requires an image that not only represents only the company.

  • It gives a potential client to become intrigued and leads to a visit to the office.

Last Service Image

Contact Logo

  • Last logo image and it creates an orientation for the user where you are as it is displayed on the page.

  • The user is able to see what the previous pages are which makes it easy to return back to and assist them by clearly visible on the right-hand corner.

Contact logo

Sign Up Form & Contact Details

  • Within this image, it represents two sections and also the previous mentioned footer.

  • The signup form has a call-to-action message and a sense of convincing one as well by making the user interested to sign up themselves to the website.

  • It's easy to sign up all the details within the sign up form thanks to the interactive elements and also by clicking on the submit button it turns green (with the signing symbol beside it) - This change of content intrigues the user and find it appealing for contacting the company.

  • Likewise, they are clear details about the contact information. It's a substitute for potential customers who tend to contact businesses traditionally but is also suitable for organizations targeting approach to reach all industries.

  • As is it easier to get hold of a company and not only digital it gives a sincere impression and tendency to contact the company easily.

Sign Up Form & Contact Details

Contact Last Image

  • To create the right atmosphere for a successful meeting it's important to give the clients a possible image of how it will be taken place.

  • The reason to have this type of image is to give a sense of imagination for the clients and how well performed it will be during the meeting. In addition, sets the idea of how Stockholm Business Enhancement wants and wishes to be during the encounter.

Contact last image

Features Left to Implement

Underneath the ‘About’ section on the home page, it requires a stronger introduction to the services page e.g.,

‘Therefore we came up with the idea of providing solutions within Search Engine Optimization (SEO), Digital Marketing and Business Development to make customers stay loyal in the time of crisis’.

In addition, a navigation link that takes you to the page directly would easily assist the user and save some time to get the detailed information it needs to clearly understand the services.

A possible change of the business ethos - and about section to create a clear message of what Stockholm Business Enhancement does for their clients. Possible addition of an entirely new page to make it even more detailed.

Testing

  • I tested the website works on different browsers: Safari, Chrome, Brave, Firefox

  • I confirmed the website is repsonsititve to all screen sizes, it looks appealing and functions on all standard screen using the devtools device toolbar.

  • I confirmed that the navigation, header, Home, Services and Contact text are all readable and easy to understand.

  • I have confirmed that the form works: requires entries in every field, will only accept an email in the email field, and the submit button works.

Bugs

Solved Bugs

Wrong attribute within contact.html file:

< input type="phone" id="phone" name="phone_number" required >

  • The type was changed to number.

Validator Testing

HTML

No error were found within the HTML files expect for some warnings that won't distrube the overall website structure:

  • Two warnings in the index.html file
  • Three warnings in services.html file
  • Three warnings in contact.html file

CSS

As I was tested the CSS file it stated: "Too many values or values are not recognized": it had 53 error due to over written code this was fixed thanks to css validator.

Accessbility

Due to the lack of time to adjust the settings from Swedish to English it scores says in Swedish. direct translation on the relevant ones will be found here:

  • Prestanda = Performance
  • Tillgänglighet = Accessibility
  • Bästa Metoder = Best Practices

I confirmed that the colors and fonts are well chosen to easy to read and accessible by running it on lighthouse in devtools

Accessibility ScoreMetrics

Unfixed Bugs

Disclaimer: Some of code have been changed to do some late changes due some unexpected errors from validation and troubleshooting regarding open the website.

Some of important structure has been lead to unfortunate loss that has lead to the website is no longer responsitive but it hasn't changed the outlook of the website. This will be changed in a short future,

Thanks for your understanding,

Your Developer,

Gustav

Deployment

The site was deployed on GITHUB pages. The steps to deploy are as follows:

  • In the GITHUB repsitory, navigate to the settings tabs.
  • From the source section drop-down menu, select the master branch
    -Once the branch has been selected, the page provided the link to completed website.

Credits

Content

The website got the inspiration and got the structure from the Love Running.

Sites that gave me the support for the website were: w3schools.

Media

Images for the project was taken from the Pexels.

pp1_business-website's People

Contributors

gustavfluur avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.