Hi. I noticed a few issues that I'll outline below. These aren't necessarily dealbreakers for a personal site, but fixing them on your personal page will stand you in good stead in a...
Hi. I noticed a few issues that I'll outline below. These aren't necessarily dealbreakers for a personal site, but fixing them on your personal page will stand you in good stead in a business/professional setting.
First, uBlock origin reports that your page is making requests to the following locations:
alikarpuzoglu.com
fonts.googleapis.com
googletagmanager.com
gstatic.com
rawgit.com
rawgithub.com
I can understand the request to alikarpuzoglu.com because that's your site. Likewise the request to fonts.googleapis.com, though I would recommend simply specifying the font you want and using sans-serif as a fallback for devices that don't have the Raleway font installed for performance reasons.
However, what benefit do you get from having Google Analytics? That's nothing but spyware. Worse, because you provide no notification concerning the use of cookies or analytics, you might be exposing yourself to liability under GDPR since you're based in Germany.
Incidentally, I don't see anything in the source for your landing page that explains/justifies requests to rawgit.com and rawgithub.com.
Second, you aren't specifying a doctype. I assume you want your page to render as HTML5, so the first line of your HTML files should consist of the following: <!DOCTYPE html>.
Third, your opening html tag should have a "lang" attribute for accessibility purposes. Since you're using English, you'll want to start with <html lang="en"> instead of just <html>.
Fourth, your body tag currently looks like this: <body style="color: #454545;"Ï>. I don't think the "Ï" was intentional, and Firefox seems to be able to cope with it, but you should probably get rid of it. Also, if you want to specify a font color for your body, why not do it in your stylesheet? The whole point of CSS is to separate style from markup, remember? :)
Fifth, you've got a shitload of div tags. This isn't necessarily a bad thing, but there are things you can do to take better advantage of HTML5 semantics.
If you're serious about doing minimalistic, responsive websites, I'd suggest taking at look at these.
Finally, I ran your page through wave.webaim.org and your page has at least five accessibility issues. This basically means that it's unnecessarily difficult to use for people with disabilities.
If you want to learn more and make a better online business card, you should use the Mozilla Developer Network's Learn Web Development pages as a tutorial and reference. It covers HTML, CSS, JavaScript, and accessibility.
Thanks a lot. I agree analytics is pretty pointless for me, especially since I block it all the time, too. I also wasn't really sure if I needed a popup but i don't like that, so I'll remove it. I...
Thanks a lot. I agree analytics is pretty pointless for me, especially since I block it all the time, too. I also wasn't really sure if I needed a popup but i don't like that, so I'll remove it. I will incorporate all your feedback in a bit. I actually was inspired by all those 'motherfucking websites'
I have implemented all the changes you recommended me, I think. I did remove the extra fonts, but I liked the design. While writing I realized one of the fonts is 13 kb out of the 18 for the whole...
I have implemented all the changes you recommended me, I think. I did remove the extra fonts, but I liked the design. While writing I realized one of the fonts is 13 kb out of the 18 for the whole page so I removed it again... The calls to github really confused me, too. I am not sure, why it happened, but the website is hosted on GitHub Pages... I think I can simplify the css much more, especially when checking betterfuckingwebsite, but I am too tired for it right now.
If you have any more feedback, please let me know.
I know the linebreak on certain display sizes is annoying, but I don't know how to change it right now
Raleway is such a trap font for almost anyone working on the web. So. Pretty. But at the same time, good luck on ever seeing a browser that supports it.
Raleway is such a trap font for almost anyone working on the web. So. Pretty. But at the same time, good luck on ever seeing a browser that supports it.
Hey Ali, As somebody in marketing and who works with people to build sites, my advice would lean in the direction of observations and follow-up questions about your intent, and who your specific...
Hey Ali,
As somebody in marketing and who works with people to build sites, my advice would lean in the direction of observations and follow-up questions about your intent, and who your specific audience is.
I see that you're a software engineer that deals in development, security and UX. For all three of those, I'd love to learn a little more about your experience or work in these areas. I think that it would still be a simplified site if you had a navigational menu that pointed to all three of those things on separate pages, or in the case of a one page site, a section on the page.
I'm no software engineer, so I understand that it might not be as easy to 'show off your work' like an artist would a portfolio, so if it isn't, could you talk about some of your achievements in each area. This could be links to downloadable code or packaged software. If that's not possible, you could mention the companies that you did the work for, or post diagrams that show your thought process/skills.
Lastly, who do you want to look at this page? Is it potential employers who visit your LinkedIn page first? Is it hobbyists who might want to work with you on a project? In terms of who your audience is, I would really design the site to cater to them. If you design security for corporations, make your site look like a corporate contractor at your level (feel free to copy somebody elses, even). If you code indie-games, make your site appeal to that crowd.
If this is purely a resume page, do on your site what LinkedIn isn't already doing for you. Companies will look there first, and if they're interested, will want to learn more in-depth information from your page. Give them that.
That's a great, in depth answer. Thanks a lot. I actually don't really know my target audience yet, I figured it would be people I meet and who would look me up? I agree that I should add more...
That's a great, in depth answer. Thanks a lot. I actually don't really know my target audience yet, I figured it would be people I meet and who would look me up? I agree that I should add more about my knowledge and projects though. It's hard for me since most of my knowledge comes from university classes and projects that belong to a former employer. But I am planning to use this site and expand my projects as I am developing more again.
Good to hear. Sometimes employers are ok with you using portions of a project for a portfolio, too. It doesn't happen all the time, but it never hurts to ask
Good to hear. Sometimes employers are ok with you using portions of a project for a portfolio, too. It doesn't happen all the time, but it never hurts to ask
Just base64 encode your fonts, the important thing is not to waste time making network calls. 13KB is nothing. The average website size is a whopping 3MB so if you're under 200KB I wouldn't worry...
Just base64 encode your fonts, the important thing is not to waste time making network calls. 13KB is nothing. The average website size is a whopping 3MB so if you're under 200KB I wouldn't worry about size. I tested your site in lighthouse and it came back as 100 on performance. For reference, my webapp is ~180KB and has a 95 on performance. Reddit is 1.2MB and scores a miserable 44. Tildes is 134KB and gets 96 (well done Deimos!).
As for analytics, I use it on my site but I have actual content. Yours is, like you said, the digital equivalent of a business card with no content. There's no reason to have analytics for that.
With ublock active, your three social media icons (not github) are blocked and a broken image icon shows up. Fix that.
Technical points:
Minify your CSS. And while we're on the subject, don't use CSS. Use SCSS instead.
Your site is about as ugly as it gets. The white background/black text, yeah it's "minimalistic", it also looks (almost) like raw HTML.
The changing word on /me is in fact gimmicky (yes I read your source code). It's also colored, which led me to think it was a link (but it wasn't).
On small screens "ALI KARPUZOGLU" is rendered on two lines. You probably want to change the font size with a media query so that doesn't happen.
Usability points:
Your links don't have alt names for screenreaders.
You reuse element IDs.
Apparently you have zoom disabled? I was able to zoom on Chrome, but my browser might be overriding you. Look into this.
Most of this is stuff taken from lighthouse or google's page speed insights.
I also noticed a conspicuous lack of flexbox (you use a crude margin trick instead), which coupled with the other novice mistakes suggests you're probably new to web development.
Just a casual observer, the home page text takes up what looks like my entire desktop. I'm sure the other comments address this. Minimal is fine but readability would be better if it didn't extend...
Just a casual observer, the home page text takes up what looks like my entire desktop. I'm sure the other comments address this. Minimal is fine but readability would be better if it didn't extend all the way to the borders.
My website is alikarpuzoglu.com As I mentioned in the op, I tried to keep it fast and minimal but I don't have much experience in actual design (removed analytics)
My website is alikarpuzoglu.com
As I mentioned in the op, I tried to keep it fast and minimal but I don't have much experience in actual design
Alright thanks a lot - I can't believe I forgot to check 1080p with in the responsiveness. I was wondering if that would happen. What do you think about the changing words? I am worried it's a bit...
Alright thanks a lot - I can't believe I forgot to check 1080p with in the responsiveness. I was wondering if that would happen.
What do you think about the changing words? I am worried it's a bit gimmicky
Bit broken on 768 and 1440, too. Seems to work well on smaller screens, though. Using percentages rather than ems for the margins might help, I'd think?
Bit broken on 768 and 1440, too. Seems to work well on smaller screens, though. Using percentages rather than ems for the margins might help, I'd think?
There's actually a subtle difference between the two and you shouldn't blindly use one over the other. A recursive setTimeout ensures the time between iterations will always be at least the...
There's actually a subtle difference between the two and you shouldn't blindly use one over the other.
A recursive setTimeout ensures the time between iterations will always be at least the duration of the argument. A setInterval ensures the time between iterations will never be more than the duration, unless the function being called takes longer than duration to execute.
I was looking at it on chrome on my phone and I think the font on your about page could use a little more weight. The thin letters feel hard to read. Good luck!
I was looking at it on chrome on my phone and I think the font on your about page could use a little more weight. The thin letters feel hard to read.
Good luck!
I think the thing where it cycles through what you can do is really cool but I think an unordered list would make it easier for people to figure out what your skills are.
I think the thing where it cycles through what you can do is really cool but I think an unordered list would make it easier for people to figure out what your skills are.
Hi. I noticed a few issues that I'll outline below. These aren't necessarily dealbreakers for a personal site, but fixing them on your personal page will stand you in good stead in a business/professional setting.
First, uBlock origin reports that your page is making requests to the following locations:
I can understand the request to alikarpuzoglu.com because that's your site. Likewise the request to fonts.googleapis.com, though I would recommend simply specifying the font you want and using
sans-serifas a fallback for devices that don't have the Raleway font installed for performance reasons.However, what benefit do you get from having Google Analytics? That's nothing but spyware. Worse, because you provide no notification concerning the use of cookies or analytics, you might be exposing yourself to liability under GDPR since you're based in Germany.
Incidentally, I don't see anything in the source for your landing page that explains/justifies requests to rawgit.com and rawgithub.com.
Second, you aren't specifying a doctype. I assume you want your page to render as HTML5, so the first line of your HTML files should consist of the following:
<!DOCTYPE html>.Third, your opening
htmltag should have a "lang" attribute for accessibility purposes. Since you're using English, you'll want to start with<html lang="en">instead of just<html>.Fourth, your body tag currently looks like this:
<body style="color: #454545;"Ï>. I don't think the "Ï" was intentional, and Firefox seems to be able to cope with it, but you should probably get rid of it. Also, if you want to specify a font color for your body, why not do it in your stylesheet? The whole point of CSS is to separate style from markup, remember? :)Fifth, you've got a shitload of
divtags. This isn't necessarily a bad thing, but there are things you can do to take better advantage of HTML5 semantics.If you're serious about doing minimalistic, responsive websites, I'd suggest taking at look at these.
Finally, I ran your page through wave.webaim.org and your page has at least five accessibility issues. This basically means that it's unnecessarily difficult to use for people with disabilities.
If you want to learn more and make a better online business card, you should use the Mozilla Developer Network's Learn Web Development pages as a tutorial and reference. It covers HTML, CSS, JavaScript, and accessibility.
Thanks a lot. I agree analytics is pretty pointless for me, especially since I block it all the time, too. I also wasn't really sure if I needed a popup but i don't like that, so I'll remove it. I will incorporate all your feedback in a bit. I actually was inspired by all those 'motherfucking websites'
Thanks. Glad I was able to help.
I have implemented all the changes you recommended me, I think. I did remove the extra fonts, but I liked the design. While writing I realized one of the fonts is 13 kb out of the 18 for the whole page so I removed it again... The calls to github really confused me, too. I am not sure, why it happened, but the website is hosted on GitHub Pages... I think I can simplify the css much more, especially when checking betterfuckingwebsite, but I am too tired for it right now.
If you have any more feedback, please let me know.
I know the linebreak on certain display sizes is annoying, but I don't know how to change it right now
Raleway is such a trap font for almost anyone working on the web. So. Pretty. But at the same time, good luck on ever seeing a browser that supports it.
Hey Ali,
As somebody in marketing and who works with people to build sites, my advice would lean in the direction of observations and follow-up questions about your intent, and who your specific audience is.
I see that you're a software engineer that deals in development, security and UX. For all three of those, I'd love to learn a little more about your experience or work in these areas. I think that it would still be a simplified site if you had a navigational menu that pointed to all three of those things on separate pages, or in the case of a one page site, a section on the page.
I'm no software engineer, so I understand that it might not be as easy to 'show off your work' like an artist would a portfolio, so if it isn't, could you talk about some of your achievements in each area. This could be links to downloadable code or packaged software. If that's not possible, you could mention the companies that you did the work for, or post diagrams that show your thought process/skills.
Lastly, who do you want to look at this page? Is it potential employers who visit your LinkedIn page first? Is it hobbyists who might want to work with you on a project? In terms of who your audience is, I would really design the site to cater to them. If you design security for corporations, make your site look like a corporate contractor at your level (feel free to copy somebody elses, even). If you code indie-games, make your site appeal to that crowd.
If this is purely a resume page, do on your site what LinkedIn isn't already doing for you. Companies will look there first, and if they're interested, will want to learn more in-depth information from your page. Give them that.
That's a great, in depth answer. Thanks a lot. I actually don't really know my target audience yet, I figured it would be people I meet and who would look me up? I agree that I should add more about my knowledge and projects though. It's hard for me since most of my knowledge comes from university classes and projects that belong to a former employer. But I am planning to use this site and expand my projects as I am developing more again.
Good to hear. Sometimes employers are ok with you using portions of a project for a portfolio, too. It doesn't happen all the time, but it never hurts to ask
Just base64 encode your fonts, the important thing is not to waste time making network calls. 13KB is nothing. The average website size is a whopping 3MB so if you're under 200KB I wouldn't worry about size. I tested your site in lighthouse and it came back as 100 on performance. For reference, my webapp is ~180KB and has a 95 on performance. Reddit is 1.2MB and scores a miserable 44. Tildes is 134KB and gets 96 (well done Deimos!).
As for analytics, I use it on my site but I have actual content. Yours is, like you said, the digital equivalent of a business card with no content. There's no reason to have analytics for that.
With ublock active, your three social media icons (not github) are blocked and a broken image icon shows up. Fix that.
Technical points:
Design points:
Usability points:
Most of this is stuff taken from lighthouse or google's page speed insights.
I also noticed a conspicuous lack of flexbox (you use a crude margin trick instead), which coupled with the other novice mistakes suggests you're probably new to web development.
I will work on all your points this weekend, thanks
Just a casual observer, the home page text takes up what looks like my entire desktop. I'm sure the other comments address this. Minimal is fine but readability would be better if it didn't extend all the way to the borders.
Thanks, I did the website pretty quickly, so I will change it to about. I'll try to get the font better.
For your own reference, it appears to be a 300px top margin.
Probably solvable by using a
vhmargin instead of apxmargin.I actually wanted it a little bit higher on mobile, I will fix it now, thanks :D
edit: fixed I hope. I should stop working now tho since I am tired
My website is alikarpuzoglu.com
As I mentioned in the op, I tried to keep it fast and minimal but I don't have much experience in actual design
(removed analytics)
Alright thanks a lot - I can't believe I forgot to check 1080p with in the responsiveness. I was wondering if that would happen.
What do you think about the changing words? I am worried it's a bit gimmicky
Bit broken on 768 and 1440, too. Seems to work well on smaller screens, though. Using percentages rather than
ems for the margins might help, I'd think?I don't really have a reason for that, I am not very experienced in Javascript development, I just chose a quick solution haha
There's actually a subtle difference between the two and you shouldn't blindly use one over the other.
A recursive setTimeout ensures the time between iterations will always be at least the duration of the argument. A setInterval ensures the time between iterations will never be more than the duration, unless the function being called takes longer than duration to execute.
Good to know. Thanks
I was looking at it on chrome on my phone and I think the font on your about page could use a little more weight. The thin letters feel hard to read.
Good luck!
I'll check it out, thanks
I think the thing where it cycles through what you can do is really cool but I think an unordered list would make it easier for people to figure out what your skills are.