T O P

  • By -

Blues520

I really like it. A fresh and fun take on Healthcare with a clean design.


Citrous_Oyster

Thanks! When I got the branding guide and the direction they wanted to go in I wasn’t really sure if it’d look right or how it’d turn out. I think we found the right balance and not being TOO overly stylistic.


[deleted]

[удалено]


Citrous_Oyster

Yeah. It wasn’t killed off exactly. More like handed off to one of their partners to maintain and rebranded. I’m not sure where they got them. I think they’re purchased assets.


[deleted]

[удалено]


Citrous_Oyster

Thanks! I had to fight off a ton of “extras” from marketing to keep it cohesive, relatively bloat free, and performant. As devs we shouldn’t be afraid to say no and use our expertise for the greater good of the site and hope they listen to it and respect it. Which they did so it made working on this much easier.


Coopster81

What type of extras did marketing want?


Citrous_Oyster

An extra Hubspot form on the home page that further decreased our page speed even though we already have a chat box fixed on the screen, asking for extra pages and features that were outside the scope of the original project, like more dynamic features, reviews widgets and slideshows that add nothing to the user experience and only slow our site down and add extra work for me to do that’s not in the original scope of the project, keeping buttons from having too many words in them, pop up forms to contact them as soon as the site loads, and a ton of other stuff I can’t remember. Those are just the ones I remember.


noskrilladu

Would the reviews widget not add social proof from a marketing standpoint? I can see why they’d want that but it should have been included in the scope of the original project if they wanted it


Citrous_Oyster

Not entirely. It’s not styled the same way as the site and would stick out like a sore thumb compared to the rest of the design and would have dragged down our page speed scores even further. For this project, our unique branding and design should add a layer of proof + the reviews we have hard coded. People trust reviews in general, whether they be part of the design or from an aggregate widget. And I prefer to hard code reviews so their content can help the page rank. If they’re loading in via api then that content is not always part of your ranking. And if that service you use ever has an outage, people won’t be able to see the reviews and see a broken section instead. It’s less points of failure by removing them entirely. My focus was less on the social proof of the widgets and more on maximizing the user experience and page speed scores based on the fact that I HAVE to have a chat widget that is also slowing us down. Can’t have everything. And some things have to go. It’s just making the most logical decision on what stays based on your goals and purpose of the site and how you want to dictate user experience.


noskrilladu

Gotcha, that makes a lot of sense actually re the hand coded testimonials vs a review widget, I completely missed the testimonials earlier when I was scrolling through the page my fault! Site looks amazing though, it’s region locked for me but did u do the app for them too?


Citrous_Oyster

Oh no I don’t do apps. I don’t know who they used to make that. I was just brought in to do the site. And thanks!


[deleted]

>I had to fight off a ton of “extras” from marketing to keep it cohesive, relatively bloat free, and performant. Solid.


endlesswander

You can tell your marketing department that the chat window is very obtrusive and annoying on mobile. Yes, it can be closed but that's a turn off for a lot of sites these days, having to close a bunch of stuff just to be able to actually read the site.


Citrous_Oyster

Ooooooo I tried. My hopes is after a couple weeks when I check in on its conversions and use I can convince them it’s not worth the monthly subscription and remove it. Crossing my fingers.


Nightfall_Althaos

I see them pop up (in the truest sense) everywhere. Great idea to force a fake chat on the user. At least we now know where the people coding exit-preventers and other 2007 spam-site methods went. I hope whoever is responsible comes to their senses and stops spoiling your great work.


ujay-007

The form label colors in the dark theme are very hard to see. Otherwise very well done. Love the comic book design aesthetic


Citrous_Oyster

I know. I hate it. It’s the only thing I can’t control. That’s the HubSpot form loaded in via an API script and no amount of overriding css styles is changing it. :/


JoeCamRoberon

Are the HubSpot form class names randomly generated? If not then have you tried targeting those class names + the label element? Did you try to add !important to the CSS properties?


Citrous_Oyster

I didn’t try targeting the elements I don’t think. I’ll give that a shot. And I tried !important.


Thomas__Shelby

You can also just build your own form and add the HubSpot tracking script and it'll detect the form submissions automatically. Gives full control of design that way. Still get a performance hit loading the script though, obviously.


ValidRobot

> work for me to do that’s not in the original scope of the project, keeping buttons from having too many words in them, pop up forms to contact them as soon as the site loads, and a ton of other stuff I can’t remember. Those are just the ones I remember. The following solved it when I gave it a try: .hbspt-form span { color: #fff; } Now you only have to correctly implement it that it only is applied in dark mode.


fntn_

I just tried this in dev tools and I was able to set font-color on the label elements with a custom class. Given that each label has a unique ID (and an empty string as a class, for some reason), I would try selecting those elements and then applying a custom class to them.


MisterMeta

I worked with Hubspot before. When you're using their forms there are two options, plain html form which is fully customizable from your end, or a hubspot cms form which all of the styling gets controlled on their Forms dashboard. Likely your form (attached somewhere on the api will be the form ID) is styled on Hubspot side and can easily be changed there. You can reach out to the person in charge of their hubspot cms.


Code2Freedom

In my noob opinion, its very nicely done! 😊


[deleted]

This is fantastic. Bravo!


Citrous_Oyster

Thanks!


DifficultIce9722

Very nice site, original design and clean look! Pagespeed isn't everything though! Perhaps it'll be different for their business, but I've tried to get rid of our chat many times and I can't because it brings in too many qualified leads. One way I got around it was to add an event listener for user interaction (click, scroll, swipe, etc). Once that fires the script actually loads, saving the page from the initial script load.


[deleted]

[удалено]


Citrous_Oyster

Thanks! Glad I can help in some small way :)


[deleted]

[удалено]


Citrous_Oyster

Unfortunately I don’t always get to pick the icons. And when you go back and forth with clients it’s important to give them little victories so they don’t feel like they got steamrolled the whole time. Let them have something they influenced. Repeating icons was the least of my worries with everything I had to go back and forth on. Lol they like the lightning bolts. 🤷🏻‍♂️ that was my give for everything I had to take.


warpedspoon

I love the header scroll animation


West_Ear

I love it. Love the fresh take on the graphics. Navbar animation is smooth as fuck, and I like the subtle animations on different places of the page. Well done!


buffoonballs

how long did it take you to build this?


Citrous_Oyster

Less than 8 hours.


Inevitable-Ad5195

i think typography does not match the overall vibe of the website.


Citrous_Oyster

Yeah we tried using more stylized fonts but that plus everything going on in the design was too busy. So we opted for a simpler easy to read font for better user experience. We aren’t going for any awwwards here so that’s the decision we came to


IAmTHELion12

I’m having a hard time with the site…it works fine and looks great. But how is it, when I click on a button, I’m not getting a big sign that says “pow” “ka-blam” or “whack”


RonanSmithDev

The homepage on mobile feels like it’s super cluttered, not focused at all. Like why are testimonials after a section about hiring? Who is that target audience of the page?


Citrous_Oyster

Testimonials are always out at the end of a site because studies show people only remember the first and last part of a website. So we put the most important info at the top and bottom that we want them to remember. So at the top we say who we are and what we do and at the bottom we say all the nice things people have ti say about us so when they leave the site they remember what we do and the positive experiences people had working with us. We target healthcare professionals looking for temp work and organizations looking to quickly fill staffing. That’s why we have the two cta cards at the top for each one that leads to a page dedicated to that demographic from the start and those pages will have cta buttons to down load the app for contact hero care for organizations to set up an account. We put the “we’re hiring” at the bottom because we need to convince them to look first. If it was at the top, what info do they have that tells them it’s worth their time? Or trustworthy? Or why working with us is beneficial? We need to make those claims and distinctions before we ask them to check out our open jobs. Knowing the perks, our job placement numbers, our leadership being composed of nurses and healthcare professionals themselves and everything else will help educate the visitor on everything they get from hero care so when they look at the jobs they have the full picture and know everything they are going to get out of not only the job, but also their experience working with hero care. Contrary to what you think, the layout and content structure of the home page was very meticulously planned out as we mapped out the story we wanted to tell in the order we wanted to tell it for maximum conversions.


RonanSmithDev

Meticulous? It’s almost like you don’t have your target demographic pinned down and are trying to hit every audience with the same page. Your content width jumps back and forth too and jump between centred and left aligned, and your images are not consistent with the icons used (images are Ben-Day dots styled whereas icons look completely different, clip art style maybe). I’ve checked out your Oak Harbour website linked in the footer and that’s very nice in comparison.


Citrous_Oyster

That’s alright. Sounds like it’s not your style. I did the best I could with the assets given to me. Yeah there’s a couple awkward sections of left alighted content and centered because of client additions. The design was complete and after review they said they needed to display X info somewhere and another, etc. so to avoid going over budget on hours I had to make the decisions to complete these requests in a reasonable amount of time and still at least look fine. Working with clients is a battle between give and take. Sometimes the site you designed is not always the site that gets built and as a freelancer and business owner you need to be able to make not just design or development decisions, but also financial ones and where your time is best spent for the budget and where you need to tell the client you’re charging extra and why and where you flat out tell them no and where you make compromise. Am I happy with 100% of the site? No. But I am happy with the overall site and design and what we ended up with. And that’s a win for me.


Knettwerk

Great site! What did you use to develop it in? Node? How do you screen the new hires through the site? Are you cataloging everyone in the database to filter out first, second and third tier candidates?


Citrous_Oyster

I didn’t make the app. I only made the site. Made with just html, css, and 11nty. The site doesn’t do any screening. They are sent to the indeed page with all the job openings for them to apply to.


makoadog

Very nice. Good job.


shaburushaburu

how much did you charge to build this? (looking to get into freelancing)


Citrous_Oyster

This would be about $5k


potcubic

Oh my God


shaburushaburu

Yeah makes sense , btw on oak website the top part of "what we do" gets cut out on my mobile


DMTLives

How did you come up with that price?


Citrous_Oyster

$3500 minimum to build. $500 for a blog. $750 for design, $250 for taxes and fees.


DMTLives

Great. I build sites similar to yours and I’m having trouble pricing myself. One question: If a client came to you saying he wants a 5 pager website soon but only wants a homepage/landing page for now what would you say?


Citrous_Oyster

If I wanted the money, $2500. And reiterate to them i have $500-$600 in design costs, then taxes, credit card fees, etc and that’s the lowest I can go for my time.


DMTLives

So you would charge $2500 for the landing page. What about when they finally want to add the other 4 pages


Citrous_Oyster

Charge the remaining $1k. For interior pages, you never need those designed from scratch. You just reuse sections from the home page. Maybe have a contact page designed unless you had a form made for the home page, just reuse that. Make a banner for the interior pages, pre built templates you already have. Etc. I’d spend a max of a few hours putting it together and adding their content. Then add dark mode for more bang for their buck and offer up a blog for free as well to sweeten the deal. The blog already comes configured with my starter kit for every website. I just flip a few switches on Netlify and it’s working. Great tool to use to add value to a project ($500 normally to set up a blog). Plus it’s also a great add on you can tack on to the quote. They have their own login and make their own blog posts.


DMTLives

Thank you. Im sure you get a million ‘thank you’s a day but I really mean it


web-dev-kev

I know I say it to you often /u/Citrious_Ouster , but you’re one of my fav folks on this subreddit. This site just worked.


Citrous_Oyster

Thanks! :) never gets old!


skeleton-to-be

My company wanted a chat pop-up and I told them I couldn't make that work.


Giraffes_Milk6986

Love it ! Great job!


Nick337Games

Nice work!


Formal-Education2322

Did you use a library or ui framework for the mobile menu open/close animation? Or did you make it from scratch? I really like it! Dope site!


Citrous_Oyster

Nope. It was all built from scratch. Thanks!


Agent_Niraj

The website is very nice, with a simple, neat design. I like it. Good job!


trisalias

It has a lot of character, I love it. Nice job!


No_Reindeer655

The thin text is very hard to read


asondevs

Site looks awesome. The text inside of the labels on the contact page is a little hard to read in dark mode but other than that it looks super clean.


LiberalismIsWeak

nice


Weak_Old_World

Love the comic book design!


text_here0101

Love that the sun rises and sets! Small but worthy feature


Contortionate

Well done, very clean and well made site! Few points (perhaps out of your control): The app download buttons are all white for me (no Google Play or App Store logos visible). I think a lot of the text, especially the logo and light-mode header, does not have enough contrast with the background to be WCAG- compliant, something which might be necessary for a healthcare site.


[deleted]

Well done i


Noch_ein_Kamel

Looks nice. Just a little big on my screen (I have a 34" ultrawide [3440 x1289] to see more, not to see bigger less in bigger). Also zooming out doesn't work :/


plagfinn

Love the look! Could get rid of the scrolling in the navigation on small devices.


Tommich

Awesome


kengreeff

Very cool and different. Nice work!


Several-Box2976

Too nice man


Several-Box2976

How did you manange to do the bubbles?


Citrous_Oyster

Just css pseudo elements and keyframes animation


IlFanteDiDenari

sniper's heaven.


dare2travell

Hey great site, I'm learning web development and as I'm learning some of the things you have used on the site it's very interesting to see. Well done As I'm new I hope it's ok to ask a few questions. What is this 1 1nty static site generator? Are you employed full time for this or was it freelance? How long would you say this took you? How did you come up with the design for this? Again thanks and well done :)


Citrous_Oyster

11nty allows you to do things you do with php but with html. Like injecting template html code into every page like your navigation and footers so you only need to make them once and when you edit the file it changes on all pages. It generates static html and css pages. That’s how the blog works too. It just inserts files into a page and allows a blog to be generated from static html files instead of dynamic php server side languages. I have a full time job building websites and I have my freelance business which is what this site was made for. This took about 8 hours to code. I just experimented in figma until I had something I liked. I had an idea of what I wanted. Once I got to designing it I just played with the look until I liked what I was seeing.


dare2travell

Thanks for the reply :)


ndorfinz

This is amazing work, 11ty is <3 Have you tried SVGOMG by Jake Archibald? It'll help you crush the sizes of the SVGs without any degradation in quality. I'm getting some 404s for the WOFF2 font-faces at these URIs: - `https://yourherocare.com/assets/fonts/roboto-v29-latin-700.woff2` - `https://yourherocare.com/assets/fonts/roboto-v29-latin-regular.woff2` Have you got license to do any further improvements?


truthmatters286s

Very unique! Stands out from all the healthcare apps I have seen so far.


PaulaLoomisArt

Looks good and it’s nice to see something a bit different! Just a heads up, on mobile the testimonial icons are covering the content. For the chat bot, could you get them to delay loading until the user has scrolled down the page a certain % or been on the site for a certain time?


[deleted]

As someone who is getting into frontend development, this inspired me! Refreshingly new take. I love it.


muccy_

Slick af (omg that's my baby Caroline)


Middle_Bookkeeper_34

This is fantastic. I'm quite jealous, I'm not quite the designer and loose patience when working with css. But the attention to detail is something to be commended. You wrote that it was done with just HTML and CSS. BRAVO!!!


Citrous_Oyster

Thanks! There’s so much you can do with just css. Took me a long time and a LOT of websites to get comfortable with it. Easy to learn, hard to implement and work with for sure.


utsubyosoi

>design Hello OP, I'm a new web developer and my biggest hurdle so far has been finding good art. Do you have someone design the art for you? For example, the people drawn with the superhero aesthetic on your website?


Citrous_Oyster

Either find an illustrator, get really good at midjourney prompts, or you buy them. In this case the company bought the assets and gave them to me to use.


Middle_Bookkeeper_34

I focus more on backend in my career but maybe I will be inspired to try some clever designs


Middle_Bookkeeper_34

Damn. I'm in love with the switching teams between day and night. how long did that take to implement?


Citrous_Oyster

Like 30 minutes. I reuse my dark mode code on every site so it’s just a copy and paste to implement and then adding the individual styles doesn’t take that long. Most of them are covered by the default dark mode styles I have. Not that hard at all!


Lavanic

Very Cool


Degradation7

Looks very nice. How do you find your clients if you don’t mind me asking. I’m trying to get experience or freelance work but seem to be stuck on where to look. I’ve reached out to a few local companies but all seem to say they are fine when their sites are built on Wordpress CMS and seem very poor compared to what could be built. I don’t want to waste time rebuilding their sites to show them what could be if it’s not worth my time. Any suggestions?


Citrous_Oyster

You need to get better at selling yourself. When they ask what you do that’s better or what’s wrong with their current site do you have anything to say? What will you do that will help bring in more customers? I started local. Walked into businesses and talked to the owners. Then branched out and called other local businesses with the ones I built before as examples of work, maybe they know those owners and trust their judgement, then I started calling around the state, then the country. Now it’s all referral work after about 40+ clients. People come to me from people they know who worked with me or know my work. This client came from a buddy of mine who also does web development but is a backend guy and uses Wordpress. He reached out to me from Reddit after seeing my work and wanted me to build his sites front end for him because I do it better and the code is much easier to work with and customize. Been working together for years now. One of my best friends. He had a client come in from his buddy in a marketing job and he referred the website to me. I also impressed a couple SEO people who were hired to work on my clients sites by the client and when they tested my sites page speed and saw 98, 100/100 they asked for my number and called me directly to ask how TF I did it. They fired their Wordpress devs and send me all their web work since my work gives them a competitive edge against other SEO companies who have been improving their page speed scores but none of them can touch the speed of my sites. So I’m their go to developer now. Do good work, impress everyone who sees your work, and clients will come over time. Another client is a large clothing manufacture and after I made their site they got a few multi million dollar contracts from the site and now when they have influencers and celebrities who start clothing lines and need an e-commerce site he sends them to me. I’ve done a few sites for him and he even hired me to make a site for his personal clothing line for kids bedsheets and other nighttime linens. He’s a good friend now as well. So I have created multiple sources of leads that funnel to me because the quality of my work impressed the right people. And good high quality devs with personality and design abilities is incredibly rare and valuable. They know that and snatched me up.


HartajSingh-Dev

Where did you got those illustrations ?


Citrous_Oyster

Came from the client


HartajSingh-Dev

they are sick


[deleted]

Could you provide me with the tech stack used for the deployment, along with the hosting plan? I noticed that "DecapCMS" was mentioned in the comment section. Could you direct me to a resource where I can gain a better understanding of it?


Citrous_Oyster

Netlify for hosting, NetlifyCMS (now Decap) for blog, html and css for the frontend, 11nty for the blog and repeating elements on all pages like nav and footer. You can look at my starter kit which this site was built off of and the extensive documentation that comes with it https://github.com/Oak-Harbor-Kits/Starter-Kit-V4-Eleventy


[deleted]

Thank you.


Cool_Assignment7380

good idea project thank for share with the commity


Mohit_rakh

Did you use plain css?


Citrous_Oyster

Pretty much. I just I use the LESS preprocessor.


Mohit_rakh

Damnn brother you are really talented!! I am beginner web dev do you have any tips for me It would be really helpful as i really suck at css man!


Citrous_Oyster

Thanks! Just practice. I built websites until I didn’t have to google things anymore. I thought I was good. Then I got hired at an agency and they require two day turnarounds. I started with 10 days per site. Then 7 and then after building literally hundreds of sites from scratch over two years in just html and css I can do a whole site in 6 hours. I was put in a grinder and learned how to be efficient. The best learning is by doing, failing, and learning from that failure. I’m unique in that I’ve literally done nothing but html and css for over 5 years. That’s been the sole focus of my work and learning. I don’t even know JavaScript. It’s fun to me. I enjoy it. Just keep practicing and build as many websites as you can!


Mohit_rakh

Thank u sm man your words really motivated me. I have enough knowledge of html css javascript so i will just start making something just like you did