Showing posts with label design. Show all posts
Showing posts with label design. Show all posts

Friday, February 10, 2012

Header.php broken down for Wordpress...





    header.php broken down...Notice the important HTML and PHP commands here:
    • <div id="page-wrap"> starts in your header.php file but will end in yourfooter.php file.
    • <link rel="stylesheet..."> calls on your CSS stylesheet, javascript, and profile like a normal xhtml file would
    • <div id="banner"> or <div id="header"> styles a webpage as you normally would.
    • Unique Wordpress attributes include <body <?php body_class(); ?> >which allows Wordpress to identify and tag pages using an array attribute.


    Getting Started with Wordpress


    For newer designers and users that want customization and dynamic websites Wordpress is the go-to resource for collaborative innovation.
    However, if you're anything like me the preceding sentence didn't make much sense to you.
    • Customization?
    • Dynamic?
    What does this have to do with anything? What does the Wordpress platform offer that building a simple site on your own using HTML and CSS doesn't?
    The answer is actually pretty simple: usability. With Wordpress, you can design a framework for a website and pass it onto a new user who can then upload their own content, tweak the details and customize it to suit their needs, all without having to dig into the different elements of coding and design.

    In this series on Wordpress we'll be looking at the different opportunities that become accessible to novice users and the refreshing elements available to experienced designers and how Wordpress manages to unite both of these interests using themes and the powerful scripting commands of PHP.

    Before we begin, you should be sure to familiarize yourself with Wordpress itself.
    There are two websites available where you can get all of the answers that you need straight from the horse's mouth:

    www.wordpress.org - The free resource where you can create an account, upload or download themes and create your own website.

    and

    www.wordpress.com - The official corporate website where you can also create an account and talk to wordpress developers who may answer your questions about building a website on wordpress, especially working with PHP.

    There are also numerous independent resources offered by coders and developers delving into Wordpress everyday, looking to make their own mark in design.
    Very shortly, I'll be posting some visual guides to getting started with Wordpress.

    Design Elements with Javascript


    JQuery is the go-to library for designers utilizing JavaScript in their web pages, but you should also be careful not to over-use it and frankly, should avoid use of it when you can because many web browsers now come with features that can block JavaScript, like Firefox and Google Chrome.
    For this reason, you should only use JavaScript in special cases and in a fashion where redundancy won't hurt the look or feel of your design. I used it to show brief overviews of a company's services, but also provided separate sections that were readable in browsers that accepted CSS/HTML standards.
    Here is a sample of the small accordion I made using JavaScript and the JQuery library:

    Accordion Menu Styled using JQuery.
    A simple accordion stylized using the Jquery library.

    Latest Designs (VINGRAM Enterprises, LTD)


    These are some screen captures from my latest project, a full web re-design for VINGRAM Enterprises LTD.
    Design Elements:
    • Careful Attention to Space
    • Readability
    • Clean, Modern Look
    • Conformity to Brand Standards
    Screen Cap of VINGRAM Enterprises LTD
    CSS3 and HTML, with a bit of class in between...