Web Development
On January 31st, Twitter released version 2.0 of their popular Bootstrap framework complete with a responsive stylesheet and new components. I have been working to keep BootstrapWP, the WordPress theme for Bootstrap as up to date as possible.
If you have been using any previous versions of the BootstrapWP for theme development, I encourage you to switch to the development branch on Github. The development branch contains many bug fixes along with overall style and device response improvements.
Usage: Customize and override any of the styles using style.css file. All .css and .js files are loaded in functions.php. Don’t forget to disable any of the .js files you do not need
All development updates are displayed on the Demo site: http://www.rachelbaker.me/bootstrapwp/
BootstrapWP Development Change Log
Header.php
-
Added body data attributes: data-spy=“scroll” data-target=“.subnav” data-offset=“50” data-rendering=“true”
-
Changed navbar class to Bootstrap default of “navbar-fixed-top”
-
Updated wp_nav_menu function array, added “‘container’ => ‘div’, ‘container_class’ => ‘nav-collapse’,” to provide div wrapper with proper class
Functions.php
-
Added bootstrap-responsive.css to bootstrapwp_css_loader function
-
Added application.js to bootstrapwp_js_loader function and removed tablesorter.js
-
Revised pagination section to use ul class=“pager” instead of div id=“pagination”
Page-JSGuide.php
- Updated Javascript Guide Template to match content from Bootstrap javascript.html file
Footer.php
Style.css
-
Updated icon image location to match theme setup
-
Added .icon-white class with corrected image location
-
Removed over-ride of body padding to allow correct spacing with fixed navbar
-
Added styles for comment form
-
Added color primary button colors for comment and search submit buttons
Index.php
- Edited content on index.php template to directly correlate with index.html Bootstrap file
Other/Misc.
-
Updated CSS and JS files to Bootstrap 2 Final Release files
-
Removed “lib” folder and replaced with Bootstrap “less” folder
-
Removed tablesorter.js file – as it is no longer used in Bootstrap 2.0
-
Removed wordpress.css file – as it is no longer used in Bootstrap 2.0
- Task creators are responsible for assigning the to-do on Basecamp.
- Don’t task someone in a comment.
- All to-do’s need a owner and a date.
- Don’t use the messages functionality.
via Daniel R. Odio’s post “How to Basecamp”
Good feedback relates back to goals and user needs. Bad feedback is subjective and prescriptive.
For example “There’s way too much going on here and the “Add to Cart” button gets lost.” That’s excellent feedback. Relates to the goal of the page, which is to apparently sell something, and communicates a problem to be solved, which is to get rid of all the junk on the page.
Avoid personal preferences: “I hate green.” There is absolutely nothing I can do with that statement other than feel sorry for you because there are some very nice green things in the world. Like money—which you’re now wasting by giving me bad feedback.
Prescriptive feedback comes along the lines of “Move the buttons over here.” And, of course, everyone’s favorite: “Make the logo bigger!” These may, in fact, be excellent ideas, but if we talked about the problems you’re trying to solve with these prescriptive solutions we might come up with better solutions or possibly uncover a bigger problem in the overall design system.
via “Giving Better Design Feedback” by Mule Design
When building the new WordPress theme for this site, I wanted it to be responsive to the various device sizes and resolutions visitors were using to read my posts. Testing a website in the latest release of the major desktop browsers is hard enough, testing the different screen sizes and resolutions for mobile phones and tablets was utterly painful.
I have tried many different online services for responsive testing, but Screenfly is my favorite because:
- Moving back and forth among the different devices is simple and fast
- The website displayed is clickable; testing hover states and user interactions can also be done
- Even the small 320×240 Blackberry screen is available as a testing option
- It is free (although I would gladly pay for the service)
Screenfly is a free responsive testing service provided by Quirktools
Note: Screenfly is not a desktop browser testing replacement, it does not offer browser options for desktop or television screen sizes/resolutions.
ImageOptim is an open-source (free) Mac application for optimizing images for the web. The application is fast and easy to use with a drag and drop interface.
ImageOptim has built-in support for the following optimization tools: AdvPNG, OptiPNG, Pngcrush, JpegOptim, jpegtran and Gifsicle. Support for PNGOUT can be easily added manually.
Keep those images tiny, and page load times low.
Download ImageOptim
Whenever a client makes a specific request for something you know is a bad idea, try turning it around and asking them what it is that’s bothering them. Exactly what are they trying to solve? This allows you to first try and get to the root of the problem so that you can come up with a more appropriate way to solve it; rather than just implementing the bad idea.
via Humble Freelancer, Assertive Businessperson – A How To
…it helps a lot to open a new editor window and try to write code that just works. Without being elegant, fast or maintainable. Just something that works properly. And after you manage to put your thoughts into (bad) code, it’s easy to refine it from there and end up with good code.
Just don’t stop at the bad code, like many beginners do. It’s like when designers sketch a rough draft for a logo, before drawing the digital version. Could you imagine how horrible it would be if they wanted to stop there and give the rough sketches to the client instead?
- from To write good code, you sometimes have to write bad code by Lea Verou
I found that Google Labs released Swiffy, a new tool for converting SWF files to HTML5 through a ReadWriteMobile post.
Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads).Swiffy currently supports a subset of SWF 8 and ActionScript 2.0, and the output works in all Webkit browsers such as Chrome and Mobile Safari. If possible, exporting your Flash animation as a SWF 5 file might give better results.
Hopefully, restaurant webmasters will use this tool so I can view their address, phone number, or menu from my phone.
I tested the conversion capabilities of Swiffy with an myself with an SWF5 file. As you can see below, the conversion worked pretty well. No filters are supported so the text, background, and button coloring effects were not included.
I was attending a networking event where the moderator of the event had given us instructions to stand up and introduce ourselves by stating:
- who we are
- why we are special
One by one, we went through giving introductions of ourselves. After the introductions, those that had the crowds around them focused on explaining why they are special and then lead us to a next action.
As I watched this realizing how badly I had blown my introduction, I remembered that this is exactly what I tell my clients to do with their website homepage content.
Your website homepage should:
- Tell me who you are – This is where you communicate your type of business (bank, law firm, non-profit, etc)
- Tell me why you are special – Now why should I care? What separates you from the other banks/law firms/non-profits?
- Call to action – Do you want me to purchase your product, subscribe to your newsletter, hire your services? This should be obvious and easy for your visitors to do.
I am looking forward to my next networking event. I hope to have a few more people standing around me after the introductions.
Photo credit: Cameron Cassan