User Experience Designer (UX Designers)

The most common or default interpretation of User Experience, of anything that we expect another will experience while using an interactive system This requires a focus on human behaviors, psychology and understanding why people do what they do. combine their research and design skills together to understand the user needs and produce concepts/solutions/designs that people want to use.  Most UX Designers can tell you what it should do and why it should do it, but can’t actually build something that works.The main tenets of User Experience Design is simply incorporating user feedback in to the design evolution process.

focus on the structure and layout of content, navigation and how users interact with them. The types of deliverable s they produce include site-maps, user flows, prototypes and wire-frames, which are more focused on the underlying structure and purpose of the software.  The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.

 

User Interface Developer (UI Developers)

  fill the middle ground by combining both design sensibilities and technical skills together. They are skilled at making something both look good and function in a browser/device at the same time. They have the production skills to be able to produce visual designs in Photoshop and then turn them in to HTML code that deals with the wonders of browser compatibilities.  This requires in-depth understanding of how browser rendering engines behave to be able to implement a design for the web that renders correctly and get all those pesky pixels to line up perfectly.

focus on the way the functionality is displayed and the fine detail of how users interact with the interface. They produce the visual comps and functioning front-end code.

IT is  very easy to create a responsive navigation menu that will automatically turn into dropdown list for small  screens by  bootstrap.

 

 

 

 

Responsive navigation menu using twitter bootstrap

 


1. Download bootstrap files
2. Create an html file and place the ‘bootstrap’ folder from the download in the same location as this html file. will  need ‘bootstrap.css’,’bootstrap.responsive.css’ and ‘bootstrap.js’  from the download.
3. Put  below code in the html file you created.

 

<!DOCTYPE html>
<html>
<head>
 <title>Responsive Menu </title>
<!-- Mobile viewport optimized -->
  <meta name="viewport" content="width=device-width">
<!-- CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />   
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>

</head>
<body>
<div class="container-fluid">
<header>
<h2>Responsive Navigation  Bootstrap</h2>
<br/>
<div class="row-fluid">
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </a>
  <div class="nav-collapse collapse">
  <ul class="nav">
   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="">Pricing</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Latest Products</a></li>
    <li><a href="#">Popular Products</a></li>
    </ul>
   </li>          
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Personal Membership</a></li>
      <li><a href="#">Premium Membership</a></li>
    </ul>
   </li>
   <li><a href="#">Offers</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Contact</a></li>
   <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    </ul>
   </li>
        </ul>
    </div>
    </div>
  </div>
</div>

</div>
</header>
<div>
</body>
</html>

 

wordpressBootstrap

In this tutorial, we will learn how to make our own responsive WordPress theme using Bootstrap.  Bootstrap is a responsive framework for building web sites and applications, and it’s a great starting point for building a responsive WordPress theme.

You don’t have to have built a theme from scratch before to successfully follow along.  However, we do assume that you are comfortable doing things like adding and editing posts in the admin area or installing plugins.

The theme we will build is based on the Basic marketing site example you can find over on the Bootstrap examples page. For this demo we will build out templates for the following pages and functionality:

  • Custom homepage design
  • About page
  • Contact page
  • News section with comments
  • A widgetized sidebar

Getting Started

Before we get started there are a few things you will need to do:

  • Install WordPress
  • Download and Unzip Bootstrap
  • Install the Theme Test Drive plugin*

* You only need this plugin if you will be building the theme using a live site and don’t want people to see the new theme while you are developing it.

Read more: http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial