Design Counts

Skin Builder and Yahoo Pure Resposive CSS

Have you heard of Pure and Skin Builder? no! well it is time you checked out a couple of powerful and free web development solutions from Yahoo.

Skin Builder is an online web based ap that allows you to design css forms etc - check it out http://yui.github.io/skinbuilder/

Pure is a small set of css modules you can use as the basis of a responsive website design - just add your own css code to complement it and make it your own unique design - http://purecss.io/

Expression Web from Microsoft

Expression Web 4 Screenshot

What is better than paying for a great product from one of the leading software companies in the World? - getting it legally for nothing! Several years ago I spend several hundreds of hard earned £ to buy Microsoft Expression just to see if I liked using it better than my old trusty Dreamweaver. Well I discovered I still liked to use Dreamweaver so I gave my software to a friend who has used it ever since. Recently my friend went online to see if he could buy an upgrade for his web development software only to find that Microsoft was no longer developing it and he e-mailed me how dissapointed he was not being able to buy an upgrade. He used to use FrontPage before I gave him my licenced copy of Microsoft Expression so he just felt he was on yet another slippery slope of having out of date software. Well I checked on the Microsoft website and discovered that while Microsoft are no longer developing Expression Web they are now giving version 4 away for free. So if you want to learn website development, or you simply have an older copy of Microsoft Expression then why not upgrade to the latest version for free.

While the web page says it is a trial it is actually a fully functional, fully licenced copy of Microsoft Expression Web 4. Check it out on the Microsoft Expression Web 4 download page. The only downsize to the software is that it is not going to be developed further and is now community supported. It does however give you a proper grown up web development software - for free.

Responsive Web Design

What is Responsive Web Design? To keep the answer simple responsive design is where a website / blog is designed to show the web page in a range of devices from large 22 inch monitors down to a mobile phone, or the other way round, it is design from mobile up to desktop. The idea is that your content should be accessible and easily read on a number of screen sizes without having separate mobile specific site or content.

If you use Blogger and Wordpress then you will find some of the latest templates are Responsive. The easiest way to see if you are using a responsive web designed is to resize your browser, if the content changes to fit your changing web page size then you are looking at a web page that has been designed to be Responsive, it responds to the size of your browser screen and device you are using.

Many web developments have abandoned support for older mobile phone devices and create a single page that can be viewed and read from 320px wide screens up to a large desktop monitor.

Recommended Reading

Responsive Web Design by Nathan MarcotteResponsive Web Design by Ethan Marcotte - I bought my copy from A Book Apart website and paid $9 (about £6) for the electronic version as the printed version on Amazon is in French (at the present time) so get it direct and download it and save some dosh.

If you read French then please go ahead and buy the printed paperback copy of the book from Amazon UK

What I enjoyed about this book is that it explains why we should use Responsive Web Design as well as a straightforward way of how to do it.

Suggested Reading

Responsive Web Design by - HTML5 and CSS3Responsive Web Design with HTML5 and CSS3 By Ben Frain.

Learn how to design websites according to the new “responsive design” methodology, allowing a website to display beautifully on every screen size. Follow along, building and enhancing a responsive web design with HTML5 and CSS3. The book provides a practical understanding of these new technologies and techniques that are set to be the future of front-end web development.

Responsive HTML5 & CSS3 Free Templates

You look at your website / blog on your desktop computer with a lovely large monitor and it looks great, you look at it using your 7" or 10" tablet and it looks ok, you open your web page on your Smartphone and it is terrible, you have to scroll across the page and it feels amateurish. So what is the solution, is it to develop a separate mobile website or to do something different? The answer depends of course on your website and what you are doing with it, in some cases a separate mobile site may be the correct solution, or more likely it is to create a Responsive based site that displays your content based on the device used to view the web pages. So your website / blog / e-commerce site looks great on a Smartphone, tablet or large desktop screen.

Below is a list of websites that offer free templates / to help you on your way to creating a Responsive website:

Bootstrap

Amazium

GroundworkCSS

HTML5 UP

Skeleton

HTML5 Boilerplate

Read about more CSS Responsive boilerplates and Frameworks on Mashable.

Responsive Slides

I am sure you have been impressed with range of ways to display pictures on the web, media gallery software can be downloaded for free that allows you to create photographic and other media gallery where your visitors can vote for and add comments. I use Coppermine to add photographs, it is database driven so you do need web hosting that provides MySQL databases.

Another way to display pictures is to use a slides and you can spend a few pennies to several £ on buying slide software for a website. I have spent money buying licences for slide show software only for it to be abandoned as I did not really like the software or because the software supplier wanted ongoing payment for "updated software". While I have no problem paying for software and scripts I am happy with it does get kind of irksome when the software is just not as good as one expected and then they want you to pay for fixing it.

So what is available for free in the Responsive Slide market, and yes I want a slide show or gallery to resize to suit my visitors web browsing size. Well the appropriately named ResponsiveSlides.js can be downloaded for free and was developed by web developer Viljami Salminen. Not only is this script / plugin free, it also works wonderfully well.

Font Awesome

I purchased a Responsive Menu which uses some simply amazing font icons in the css menu. Not all of the icons the menu developer used suited my website so I investigated how the icons were created and I discovered Font Awesome.

The icons are free to use and can be used with Twitter Bootstrap or your own website development, visit the website to learn more - Font Awesome.

Example:

Ambulance or make it bigger!

 

Responsive Menus

If you have a responsive web design then you need to consider how your menu system is going to work with the different sizes of screen that it will have to work under. A nice wide top menu that has lots of items in it as well as drop-downs may work well on a medium to large computer screen, but what happens when you look at the same page on your Samsung or iPhone, or on your tablet in portrait mode. Yes it can be a problem. The solution many developers have chosen is to collapse the menu into a single button when the width of the screen is smaller than the full menu can show properly, the visitor on a small screen device can then click on the menu button for the menu to appear and be selected or scrolled past.

I have come across and purchased a Responsive Menu through CodeCanyon and it costs as little as $3 (£1.50). I am still learning how to use this gem of a CSS / html5 based menu system and while I like the design of the Responsive Menu I have found that it does not suit some browsers, so back to the drawing board. It is however worth trying out to see if it suits your needs.

Memorandum to self

Sass

Photographer of the Year Award

Copyright www.designcounts.co.uk 2013 - Privacy & Cookies

Design Counts