Working as a solo developer (full stack) for my comp, their website's frontend is in shambles
Working as a solo developer (full stack) for my comp, their website's frontend is in shambles, UI,UX is just taken from what every last person liked from other's website in similar domain. Too much inline css and js unused styles and what not. Now I want to re-write the frontend and what to do it in such a way that this time makes changes will be easy and website becomes more responsive and better, I have little exp in responsive designing (I can get by for desktop screens) and I need help/guidance/resources in doing so
6 Replies
1. Do you have time to redo the website? If you're a solo dev I imagine there are other things more important to the business
1. Do you have permission to do so? Has your boss said, "please do it"?
1. Have you ever done anything like this before? Do you have the experience to do it well?
1. Is this a priority for the business? If not then they might "suggest" you work on it in your spare time…at home…off the clock. Just say no to free labour. If They're making money off of it you need to be paid for your time
For me, the biggest things to consider are time, effort, and permission. Do you have the time? Do you have the bandwidth? Do you have the permission/blessing of your boss? Don't embark on this on a whim. Have a written plan of attack that your boss has signed off on. In writing. That was if anything goes awry you can point to the email and say, "I was doing what I was told".
You say you're a solo dev, so you have to balance your responsibilities on bug fixes, new code, and retiring old code. As bad as it may sound, if remaking the website isn't a priority for the business you may not have the time to re-do it yourself. And sadly, if it works it works…so there may not be a drive to "fix what aint broke", y'know?
Of course, you could put together a presentation for your boss (and their boss, etc) to show why the webpage should be updated. Provide a tangible benefit besides, "It's ugly and I can do better." The fact of the matter is that businesses are out to make a profit—if you can't provide a profit-incentive it's not likely they'll care.
Also, you never said what level dev you are. Are you just starting out, and this is your first gig? Are you a seasoned senior dev with 12+ years experience? If you're new I'd shy away from doing a massive re-vamp like this. It's a lot harder than it seems. If you've done this a dozen times before then no biggie, you got this.
And I'm out of characters for this message :p
If you have time and permission, I'd start simple. Don't even touch the code but instead use the business's design palette to make a new CSS file that adheres to the business's look/feel. Set up default colours, what a button should look like, how to properly display the logo, etc. Again, don't touch the existing code. And only worry about visuals. Don't put in any breakpoints, don't use grid/flexbox. Everything should be a block-level element. Yes, that means it'll look "wrong" as your three-across cards are now stacked on top of each other, but that's fine. You're focusing on visual consistency, not layout right now.
If you're using git (and you are, right? Right?) make a new branch to test things out with. Remove the existing CSS file and all inline declarations. See how your new stylesheet looks. Don't worry about responsiveness yet, just make sure the current site doesn't "break" (however you want to define it).
Now that you know that it looks right, you can move on to layout. And guess what! Since everything is a block-level element it's already responsive! Just don't break it, ok? It looks good on smartphones and tablets. The text will be too long to read well on desktop, but it's still legible. Focus on one aspect at a time and add the needed CSS to make it work well across a multitude of viewport sizes. Set a
max-width for textual elements so it's not too hard to read. Add grid/flex to your card-based displays. Be sure to add in appropriate code to make sure it's not too crowded and not too sparse. There are many CSS properties you can use without needing to touch media/container queries. Those should be the last thing you add.
Throughout this entire process, be sure you're using semantically appropriate elements—buttons should be buttons, links should be links! And keep it accessible. Don't fuck with the tab-index or visual ordering. Keep it real.To answer your questions
1. Yes, I have already said that doing this will take about a couple of months as I will be doing it on the side.
2. Pretty much its my decision as, my boss says whatever I see fit.
3. Honestly no, I do not have experience with frontend, though I know not to make and release everything at once but to take one piece at a time
4. It is as I have to make sure that website looks good on different screens and styling doesn't break, not to mention improve its SEO while I am at it. They didn't ask me to re-write Fe it was my idea.
My comp is in Travel Business as in a Travel Agency so this website is important, so if I can improve on the website to bring in more traffic that is good for business.
I am at junior level got around 2 years experience. At this time I am basically doing a revamp anyways since when I first joined back 6 months ago, it was even worse (there was not even a git repo for this website, versioning was being done as zipping the old version and keeping it on the server) that this. Right now even add a small component and making it responsive is too much work as for some reason some other thing breaks.
Whole things uses Laravel with blade templates with a lot jquery written in those files with not organisation of styling in the only 2 css file for the project to make user exp even remotely better. Then I also have to take care of SEO and inline styling here and there.
I agree with the point that its useless to redo stuff that is working just because it looks ugly, but if changing one thing breaks another then what do I do.
Also since for now we are just showing what all we sell, it not that big may be 10-8 pages of application which really are just template for data to be filled in, but later down the line we are planning so that one can make payment, login, see what all they bought from us and such features etc. At that point I want to make it work so that it doesn't fall apart
First off, thank you for answering my questions in a coherent manner. Not everyone know how to do that, so you're already ahead of the curve!
My comp is in Travel Business as in a Travel Agency so this website is important, so if I can improve on the website to bring in more traffic that is good for business.Ok, so this tells me that the website is pretty important. People won't book travel on a broken/ugly website. Humans are vain creatures :p
Whole things uses Laravel with blade templates with a lot jquery written in those files with not organisation of styling in the only 2 css file for the project to make user exp even remotely better.Oof, that sounds painful. Good on you for stepping up and trying to fix it.
I agree with the point that its useless to redo stuff that is working just because it looks ugly, but if changing one thing breaks another then what do I do.One might say that if "changing one things breaks another" then it's not exactly working lol In that case, I re-iterate what I said above: start with a design system sheet. "This is what buttons look like. This is our primary, secondary, and highlight colours" etc. Make sure there's consistency in everything. Hell, you should have custom variables for your spaces, too. Don't use magic numbers anywhere. Give yourself between 3 and 5 values for anything you think you need. Any more than that and your consistency goes right out the window. After that, work on the layout. "This is a three-across card container, and here's the CSS for it". Apply that where needed. What I like to do (and this is 100% personal preference) is to have one class for the container element, then use element selectors for everything within that container. For example That way you're only making a class for top-level containers and not making a class for everything. No class-overload. It's like BEM without all the extra classes. But again, this is just how I like to do things. It's up to you to make up your own system of organization.
I see thanks I was very much in need for this, as I too was thinking that I am going down the wrong path.
In terms of palette and design we already have that, its just the implementation part that I need to worry about but as you said I will keep a sheet of which componet should look like what
Hell, you should have custom variables for your spaces, too. Don't use magic numbers anywhere. Give yourself between 3 and 5 values for anything you think you need. Any more than that and your consistency goes right out the window.Can you please elaborate on this Also to add to this question how do I decide breakpoints? For sure I am writing css for every pixel, much like how big comps do it like google and amazon
I’m at work and on mobile, so here’s the short version:
magic numbers are plain numbers that you don’t know where they came from or why they are. They’re “magically” there, hence the name.
Instead, it’s suggested that you make variables that hold the magic numbers. That way the variable name holds the context.
See the difference?
This not only makes it easier to update that short width var in one place and the entire page adjusts! No need to hunt them down individually.
It also adds constraints. I’d you only use named variables then you can only use the variables available. No making stuff up “because I felt like it.” You have to stop and think real hard if you need another variable or not. And if you only use it in one or two places…that’s a good sign it’s not needed and can be replaced by the closets existing variable.
I skimmed over this so sorry if this was already addressed. It's not always necessary to do a complete from scratch rewrite. I've worked on truly terrifying codebases before and even in the most terrible code, it's more often than not faster to fix what's needed. You can still rewrite certain components from scratch and then try to fit them into the existing system. The good thing about this is that your business, and your customers can benefit from the improvements earlier than if you had to rebuild the entire site before it can replace the old one.
But it still depends entirely on your situation so it's untimately your call. You know the code, i don't. Just wanted to speak from my experience on previous projects