My responsive and beautiful site (13 posts)

  1. Shaan
    Posted 3 years ago #

    As a developer and designer, I have an eye for beauty. I have created a few different versions of my website, eventually ending on this responsive, beautiful and almost perfect version. I am satisfied and happy with it. What do you think?

  2. What do you think?

    I think posting a link might be helpful...

  3. Shaan
    Posted 3 years ago #

    Wow that's embarrassing. My site

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Making the DOM order match the visual order

    The button you're using the to toggle the search form is after the form in the DOM, which can disrupt the flow of the document and confuse users with assistive technologies.

    Try putting the form after the toggle button:

    <a href="#" class="genericon" title="Search">
     <span class="screen-reader-text">Search</span>
    <form method="get" id="searchform" class="searchform" action="http://shaansingh.me/" role="search">
     <label for="s" class="screen-reader-text">Search</label>
     <input type="search" class="field" name="s" value="" id="s" placeholder="Search …">
     <input type="submit" class="submit" id="searchsubmit" value="Search">

    I understand it is then difficult to style the way you want it. A technique you could use is instead of toggling the CSS display style you could just change some CSS positioning.

    For example:
    Instead of displaying none the form to begin with, you could use absolute positioning to move it upwards visually in the document;

    #searchform {
     position: absolute;
     top: -36px;

    Then instead of displaying block the form after you toggle the button, you could position the form to a zero position (by toggling a class as you probably were doing);

    #searchform.toggled {
     top: 0;

    Maybe then you could try some CSS transitions too ;)

    The toggle button doesn't have any focus styling, perhaps you could just add an outline using the default;

    outline: 1px dotted;
  5. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    - You also should put alt values into those HTML5 and CSS3 icons, because without the imagery your sentence will read as:

    I can code in HTML, CSS, Objective C, PHP, Javascript, and more.

    - The anchor element that holds your site title (your name) has a title attribute which is the same as its value, so you can remove that title (attribute). Otherwise your name will be read out twice by screen readers.

    - There are plenty of headings but there lacks content within those headings, so they don't actually head any content. For example, for this heading:

    Hello! I’m a 14 year old developer who makes slick websites, apps, graphics, and more.

    You can have the following text as a paragraph:

     I can code in HTML, CSS, Objective C, PHP, Javascript, and more. <br />
     I use Photoshop, WordPress, Xcode, FCPX, and more.<br />
     I believe in brilliant design, powerful function, and more.<br />

    So that your headings have some content that they relate to.

  6. blograzzi
    Posted 3 years ago #

    I always love minimalism.

  7. Wow, 14 years old and you've already set up your own freelancing business! That's very impressive. :)

    You've chosen a good theme to get started with, Ryu is very clean and attractive. Andrew's given you some really good tips on how to expand upon this theme too.

  8. Shaan
    Posted 3 years ago #

    @siobhyb Thanks for the praise. I have already set up a few versions of the site that were okay to me. After taking inspiration from http://jessedodds.com, I wanted to make my site cleaner and typography-focused. Ryu was perfect. I don't want just start with Ryu but stay with it for a long time.

    I have just set up this theme and am loving the typography. I don't want to change it (although I did change the heading font to Lato - so much better!). Eventually, I can add some CSS animations from animate.css, sharing links and more. I have a lot planned.

    @Andrew thanks for your tips. I'm working on them.

    @blograzzi Minimalism is definitely what I wanted from the start. You have good taste!

  9. Shaan
    Posted 3 years ago #

    Does anyone know how I can make a page in this theme full width? I have been struggling with this for some reason.

  10. Shaan
    Posted 3 years ago #

    Never mind, I figured it out.

  11. JohnPope
    Posted 3 years ago #

    I get warning and fatal error at the moment when I try to take a look.

  12. juliannelin
    Posted 3 years ago #

    nice !

  13. Shaan
    Posted 3 years ago #

    @JohnPope I have resolved that
    @juliannelin Thanks a lot!

    Does anyone think that the words on the home page are placed way too randomly on the page, or is that just me?

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.