Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Job Offer: Make my website "responsive"
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

Job Offer: Make my website "responsive"

What: make Raymii.org responsive, as in, when visited on a mobile phone or tablet the menu is above the content. Now when visited on a phone or tablet the menu stays on the left.

Price: max $30 via paypal.

Comments

  • You're already using Bootstrap, so I would suggest trying out one of the web-based site tools like DivShot. You need a lot more work done than just menu placement.

    Also, $30... if you find someone at that price, for this task, you wouldn't want to hire them. $30 might get you a 10-15 minute installation of a pre-written "contact us" form, from some development 'farm' in India.

  • http://colorlabsproject.com/tutorials/make-your-wordpress-theme-responsive/ I guess this will help u. Y waste $30 when u urself can doit.

  • zfedorazfedora Member
    edited June 2013

    @walesmd said:
    You're already using Bootstrap, so I would suggest trying out one of the web-based site tools like DivShot. You need a lot more work done than just menu placement.

    Wow, nice find!

  • flyfly Member
    edited June 2013

    bootstrap makes responsive trivial if you used less to compile your .css files.

  • bcrlsnbcrlsn Member

    @walesmd said:
    You're already using Bootstrap, so I would suggest trying out one of the web-based site tools like DivShot. You need a lot more work done than just menu placement.

    Yeah, it's going to be more than a $30 job. I also noticed you are generating your site off a python script that you wrote. Seems to me the template would have to be adjusted there as well and designed to work with the new responsive design.

  • walesmdwalesmd Member
    edited June 2013

    @bcrlsn said:
    Seems to me the template would have to be adjusted there as well and designed to work with the new responsive design.

    I agree - people think responsive design is just something that can be strapped on as an afterthought. That could not be further from the truth - your overall, pixel perfect, huge screen "vision" of your site is the final step (and none of it should be an afterthought).

    @Raymii: I'll be brutally honest, responsive is the least of your concerns with this design. It's horrible and not just from a functional perspective (like being responsive) but from a "please don't make me attempt to scratch that itch on my retina with a chainsaw" perspective.

    Thankfully, this appears to be a fun side project and not a business endeavour - that's great! This is what projects like this are for - it's a learning experience; everyone that has released something publicly is criticized in some way. Your job now is to gather the criticism, come to your own interpretations, and iterate.

    I think I get the vision (trendy pastels / flat design), what you had hoped this would turn out as; but there's not a single thing here that's executed well. I would shit-can the whole thing and start all over.

    My thoughts, as my eyes tracked the page:

    • Whoah, where'd that dark green color come from up top?
    • Nope - not the same retina destroying green at the bottom.
    • Why's the menu with the boring stuff more prominent than the stuff I came here for?
    • "Quis custodiet ipsos custodes?" WTF? Am I really skimming this website so bad I am just now noticing it's not in English? No... the rest is in English.
    • IPSEC, L2TP, LAFS, PoxMOx, Ansible - is this site in English? People are going to need a tutorial to read this tutorial site.
    • That ad is annoying as hell... horribly placed.
    • Why the huge waste of space to the right of the content? The content is practically raping the menu when half the damn page is empty.
    • Why is the sidebar a different width in the header?
    • Hey, interesting RSS link placement! I kind of like that... should have used an icon font instead.
    • Why are there two sections called Featured Items? Speaking of which why is every section mislabelled? Latest? No, that's an ad. Spotlight? Is this a strip club; how many spotlights do we need?
    • Let's see what a content page looks like: click blue box. Of course the link is just the text, not the entire box... I chose "Cloud Encryption"
    • I had to go back to the home page to figure out what article I chose, because the title has magically changed between there and the content.
    • What did typography ever do to this guy? h5 section headers - 100% sure is why too deep in the outline; 8172387213% sure it's way too fucking small.
    • That blockquotes not horrible... maybe... why's the font larger there than the content and what's this a list of? "A few cloud services" FUCK ME! Remind me never to ask you where the bathroom is at a conference, I'll shit myself before we get through my list of options.
    • Oh, you only recommend 2? Well, I'm here for a reason, I think you are knowledgable on this topic. If you only recommend 2 why did you tell me about 86 others? If I wanted the list from Wikipedia guess which domain I'd visit?
    • Those screenshots destroy any resemblance of vertical spacing/timing that was remaining.
    • Awesome red-text over the blue area in that screenshot - it's almost completely unreadable, but I did make out the word "birthday". Better luck next time, Destroyer of Hopes and Dreams!
    • None of the images are optimized - 10% reduction w/ PNGout on most.
    • Tagging an article is to assist the reader (or GoogleBot) in finding related content; not a comma-delimited list of every word within the article.

    Alright, time to actually look at the code and see how it does:

    • JavaScript at the end of the body, good job! I wasn't actually expecting to see that.
    • Bootstrap... really? What in the actual fuck is from Bootstrap?
    • Let's check out the Dev Tools Audit, the easy optimizations that are spoon-fed to you! 89% of CSS unused - as I thought, no damn reason at all for Bootstrap.
    • HTML5 doctype, why aren't we forcing IE to use it's best renderer with X-UA-Compatible?
    • No caching, no compression - we won't even discuss concurrent connection blocking yourself yet.
    • What the hell is FASMWWW.0.4-master and why are you the only person ever to use it?
  • flyfly Member

    tldr nobody cares walesmd

  • ztecztec Member

    Nice free advise here, I can really respect that. I still love this community!

  • bcrlsnbcrlsn Member

    @Walesmd said: I'll be brutally honest, responsive is the least of your concerns with this design. It's horrible and not just from a functional perspective (like being responsive) but from a "please don't make me attempt to scratch that itch on my retina with a chainsaw" perspective.

    I was trying my darndest to not say anything, but yes, it does need more work. The site is not that functionally pleasing. I felt like I needed a instruction manual to navigate your site.

  • risharderisharde Patron Provider, Veteran

    Wow. i can navigate raymiis site fine and i see raymii asking for something in specific so i hope he finds someone that can meet his requirements, some of these comments really make me wonder sometimes.

  • RaymiiRaymii Member

    That is more feedback than I expected, but still, it provides another viewpoint and feedback is welcome. On some points I agree, others are bullocks IMHO. I'll try to respond on most of them:

    Whoah, where'd that dark green color come from up top? Nope - not the same retina destroying green at the bottom.
    

    Fixed. Indeed was a different colour, now they are the same. I like green.

    "Quis custodiet ipsos custodes?" WTF? Am I really skimming this website so bad I am just now noticing it's not in English? No... the rest is in English.
    

    It's the "slogan".

    IPSEC, L2TP, LAFS, PoxMOx, Ansible - is this site in English? People are going to need a tutorial to read this tutorial site.
    

    Most people come in via a search engine or know what they are looking for. But I agree that it could be overwhelming. I've cleaned up a little.

    That ad is annoying as hell... horribly placed.
    

    Adblock?

    Why the huge waste of space to the right of the content? The content is practically raping the menu when half the damn page is empty.
    

    Not everybody has a 27" screen.

    Why is the sidebar a different width in the header?
    

    Is fixed too.

    Hey, interesting RSS link placement! I kind of like that... should have used an icon font instead.
    

    I don't like the whole icon font thing. It might work if you have more, like facebook, twitter, rss, linkedin, but just a lonely rss icon looks out of place to me. Since I only have an RSS link, and no facebook and shit, thats why tehre is text instead of an icon.

    Why are there two sections called Featured Items? 
    

    Because one section wasn't enough.

    Speaking of which why is every section mislabelled? Latest? No, that's an ad. Spotlight? Is this a strip club; how many spotlights do we need?
    

    Latest is a feedburner RSS scroller, an image which shows the latest articles.

    Let's see what a content page looks like: click blue box. Of course the link is just the text, not the entire box... I chose "Cloud Encryption"
    

    How should I link an entire div? Haven't found a good way to do that yet, so if you know, show me.

    What did typography ever do to this guy? h5 section headers - 100% sure is why too deep in the outline; 8172387213% sure it's way too fucking small.
    

    I don't get what you mean here...

    That blockquotes not horrible... maybe... why's the font larger there than the content and what's this a list of? "A few cloud services" FUCK ME! Remind me never to ask you where the bathroom is at a conference, I'll shit myself before we get through my list of options.
    

    Correct, changed that.

    Those screenshots destroy any resemblance of vertical spacing/timing that was remaining.
    

    Was there any ever?

    None of the images are optimized - 10% reduction w/ PNGout on most.
    

    Can't be bothered to optimize every image, since they're not bigger than 200K already.

    Tagging an article is to assist the reader (or GoogleBot) in finding related content; not a comma-delimited list of every word within the article.
    

    Correct, changed that for this article, the rest is quite OK.

    JavaScript at the end of the body, good job! I wasn't actually expecting to see that.
    

    Is that sarcasm or not?

    Bootstrap... really? What in the actual fuck is from Bootstrap?
    Let's check out the Dev Tools Audit, the easy optimizations that are spoon-fed to you! 89% of CSS unused - as I thought, no damn reason at all for Bootstrap.
    

    It is a bootstrap theme from Bootswatch.com.

    HTML5 doctype, why aren't we forcing IE to use it's best renderer with X-UA-Compatible?
    

    Fixed that. Did not knew that tag existed. It is on "edge" now.

    No caching, no compression - we won't even discuss concurrent connection blocking yourself yet.
    

    Everything is compressed with gzip.

    What the hell is FASMWWW.0.4-master and why are you the only person ever to use it?
    

    That is used in cluster troubleshooting.


    I enjoyed your feedback, so please, if you have any more, just post. As I said, different people, different viewpoints. And there is some valuable information/opinion in it.

  • lele0108lele0108 Member
    edited June 2013

    Honestly, with bootstrap and it's media queries + classes for mobile only display, it's pretty easy as long as you read the docs.

    First, add this:

    link href="./inc/css/bootstrap-responsive.min.css" rel="stylesheet"

    (add < and > to ends)

    That should fix a lot of issues.

  • @Raymii said:
    How should I link an entire div? Haven't found a good way to do that yet, so if you know, show me.

    Maybe don't use a div. Make the 'a' element a block -- 'display: block'.

  • agoldenbergagoldenberg Member, Host Rep
    edited June 2013
  • walesmdwalesmd Member
    edited June 2013

    27" screen: It's only 22" but I'm not sure what that has to do with anything. My point was why are you wasting so much space. Whether it's 1200px wide or 780px wide - you're not using all of your established horizontal space within your content area. The lines in that paragraph should (for the most part) line up with the right-hand edge of the green box.

    On that note: one responsive change you can make pretty easy is making the margins smaller at lower resolutions. You'll notice in the 780px screenshot almost 1/5-16th of the available real-estate is margin - that could be cut in half at least.

    Linking the entire box: I was doing up a basic jsFiddle for you and I got carried away. I brought it back down to the basics and commented this one. Notice how I used percentages basically everywhere? That's the key to a responsive design - relative sizing.

    h5 Typography: Your h5 headers in that article were microscopic. Very small - way smaller than the text. Also, google "HTML5 Outline" or install this from Web Store. Basically, your HTML should form a nice and neat outline. Those h5's mean there are 4 category "levels" above them.

    Bothered w/ optimizing images: Set yourself up a build process. I press Ctrl+B in Sublime Text, by the time I get to another window all of my JS and CSS are minimized and combined and images are being processed.

    JavaScript at end: No, that wasn't sarcastic. I was surprised it was in the right spot.

  • natestammnatestamm Member
    edited June 2013

    @Raymii responsive will take a bit more work, it isn't painful to a saavy web developer But I can do mobile friendly quicker


    If you want the site mobilized I would be happy to do it for free if you like

  • jcalebjcaleb Member

    i just buy theme from wrapbootstrap

Sign In or Register to comment.