Week 11 Post – Report 11

Feedback from ADM Students

I have summarized some points from the feedback of Beverley and Lesley based one how ADM students use OSS and what kind of themes they prefer.

  • Readability, OSS posts are usually text-based, it’s important to choose appropriate font, font size and line height to make reading more comfortable.
  • Accessibility, functionalities should be easy to find for students as well as teachers.
  • Elegant, minimalist, just white and clean as possible. ADM students apparently like simple designs, not much colors.
  • Customization, font color, background color, header images and feature images should all be customizable. It requires the design of website capable of handling all these possible choices.
  • Widgets used mostly are categories, Tag cloud, archives, search, recent comments, recent posts.
  • Student mainly use post, so there will not be much content in navigation menu.
  • Feature images, if set, should not duplicate because students like to use some image in the post as the feature image.

**I have a vague idea of using categories as navigation menu items. I think that would be more helpful for OSS users. Haven’t tried out yet.

 

Starting of Theme Design

screencapture-file-html-pageAs mentioned in the previous post, I would adopt the method Silver recommends in the book WordPress Theme Design which is to test the design of theme on a pure HTML page first before moving to really WordPress site. I have created such a HTML site with similar structure as WordPress index page.

I bordered each <div> with distinct bright color to see clearly the layout of each component.

For the next couple of weeks, I will use this template to test my ideas about the design.

 

Typography

For readability and simplicity, I chose two font-families so far for my texts and headers: Verdana,Geneva,sans-serif for text and Arial, ‘Helvetica Neue’, Helvetica, sans-serif for headers. Both are built in fonts for WordPress that do not need to be enqueued.

For font-sizes, I adopted the method of px at the Root, rem for Components, em for Text Elements. In this case, I can adjust the font-size for all elements using media queries only for html.

/* Document level adjustment*/
html {
  font-size: 16px;
}
@media screen and(max-width: 900px) {
  html { font-size: 15px; }
}
@media screen and(max-width: 400px) {
  html { font-size: 13px; }
}

For line-heights, I used one media query to increase the line height when window size is large.

html {
  line-height: 1.25;
}
@media screen and(min-width: 700px){
  html { 
      line-height: 1.375; }
}

Some websites I consulted: How to Use Web Fonts in a WordPress Theme or WebsiteConfused About REM and EM?

 

Background and Infinite Scroll

hanging-scroll-pde039-4The idea came to my mind when I saw an image of an empty Chinese scroll. It can also be divided in to header area, sidebar areas, content area and footer area. The bottom “roll” can serve as an indication that the page has come to a temporary end. When it disappears, more posts are loaded and it’s just like opening a scroll of painting.

Since students like simple design, the colors of the dark area can be lighter, the “roll” part can be changed to simpler design. The sidebar area needs to be re-sized to fit widgets.

I am also thinking about when the page firstly loaded, it may be possible to do a rolling effect from top to bottom which resembles the opening of scroll. I have no idea how to do that now but I will research on it.

 

Fixed Menu

I tested the idea of fixed menu using jQuery and CSS.

$("document").ready(function($){
    var nav = $("#site-navigation");

    $(window).scroll(function () {
        if ($(this).scrollTop() > $(".site-branding").outerHeight(true)) {
            nav.addClass("fixed-nav");
            $(".nav-menu .top").css("display","inline-block");
        } else {
            nav.removeClass("fixed-nav");
            $(".nav-menu .top").css("display","none");
        }
    });
});
.fixed-nav{
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width:100%;
}

I also added a “Back to Top link” that only shows when users scroll down.

Useful Website: Leave menu bar fixed on top when scrolled

normal
Original
scrolls down
When Scrolls Down

 

 

 

 

 

 

Collapse of Sidebar

If I use infinite scroll, problem will appear when I design for smaller screen. Normally, the sidebar would appear after the posts to increase the screen width for text content, but it cannot be the case if using infinite scroll.

On smaller screen, for the sake of readability, I think it’s not a bad idea to collapse sidebar and even menu and let them appear when clicking a button. Because both contains useful information and navigation roll but not necessarily appear all the time.

I tried hiding the sidebar on smaller screen and showing it once clicking on a button using jQuery.

small screen trigger
small screen with trigger button
small screen triggered
after clicking on the button

**Bug: jQuery slideToggle() function adds inline style which I cannot change even with .css(“display”,”block”).

I am think about placing three buttons fixed at the left of screen, each responsible for menu, sidebar and back-to-top. The panel appears should be in consistent style.

Website that is useful: Showing & Hiding Panels with HTML and CSS

 

Testing

On the live server, the screen resolution is higher (1920 * 1080), IE, Chrome and Firefox are installed so that I am using the live server to do the testing. Currently, all things are fine on these browsers; the text on IE looks not identical to the others but still looks fine.

 

Plan for the Next Few Weeks

At the beginning of this semester, I was suggested to learn about Dreamweaver. I thought it’s more important to know about WordPress first so I delayed that plan. For the next few weeks, I will

  • Read Dreamweaver CS5 for Dummies to learn how to use Dreamweaver.
  • keep working on my HTML site
  • at certain stage, use my HTML site screenshot as a base to work in Photoshop to design my theme.
  • use the Photoshop result in Dreamweaver

3 comments on “Week 11 Post – Report 11

  1. Good work this week. I think you are making progress on a number of fronts, including design, functionality, and architecture. I’m still not certain about the collapsible sidebar, since it requires that the user find the button to open it up. In OSS, when every student is using a different theme, it would mean that they have to learn multiple modes of navigation, which might be frustrating. So long as students are able to choose a theme, I think we need to be careful and insuring that all the students sites aren’t excessively different from one another in terms of their navigation.

    1. I understand your concern. On normal large screen, I won’t implement the collapse design. On smaller screens, like screen width under 900px, I think it’s a common practice to collapse menu, just like what’s introduced in the Lynda.com course. So I think it is quite conventional.
      We can discuss more on later meeting. See you later!

      1. I think we are talking about a different definition of collapsed. I believe you mean that the sidebar is under the content on a small screen, and what I mean is that the sidebar needs to be exposed by the click of a button even on a normal sized screen. So yes, let’s clarify.

Leave a Reply