Support » Your WordPress » My responsive and beautiful site

  • 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?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Jan Dembowski


    Brute Squad and Volunteer Moderator

    What do you think?

    I think posting a link might be helpful…

    Wow that’s embarrassing. My site

    Moderator Andrew Nevins


    Forum moderator

    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="" 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;

    Moderator Andrew Nevins


    Forum moderator

    – 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.

    I always love minimalism.

    Siobhan Bamber (siobhyb)


    Automattic Happiness Engineer

    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.

    @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, 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!

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

    Never mind, I figured it out.

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

    nice !

    @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?

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘My responsive and beautiful site’ is closed to new replies.