FLS blog

share the best free resources



Design Principles

Category : Help, school · No Comments · by Mar 9th, 2015
Design Principles

Learn Design Principles is an easy-to-follow guide to a variety of design principles, all in one place. It gives a…

Responsive Design Explained Brilliantly

Category : Help, Inspiration · No Comments · by Nov 28th, 2014

What is responsive design? Most people vaguely understand that it refers to websites that work just as well on desktops as they do on smartphones, but there’s a lot more to it than that, leading to widespread confusion.

But the principles of responsive design aren’t that hard to understand, thanks to this amazing collection of animated GIFs. Spend just a few minutes with these GIFs, and you’ll never be hoightily corrected by a design pedant about “responsive websites” versus “adaptive websites” ever again. In fact, you can be that hoighty pedant!

The GIFs below show many of the basic principles of responsive designs. Responsive designs fluidly expand, whereas adaptive designs hitch as you expand a browser or viewport.

responsive-vs-adaptive-01

Positioning your designs elements using pixels as X,Y coordinates can cause a site designed for one screen to look weird on another. Use relative units, like percent of the screen, instead of static units like pixels.

relative-units-vs-static-units

“As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down. It’s called the flow.”

flow-vs-static

“Breakpoints allow the layout to change at predefined points, i.e. having three columns on a desktop, but only one column on a mobile device.”

with-breakpoints-vs-without-breakpoints

By using nesting elements, you can make it so collections of onscreen elements adapt to a shrinking or expanding screen as one, instead of individually.

nested-vs-not-nested

“Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense.”

max-width-vx-no-max-width

“Technically there isn’t much of a difference if a project is started from a smaller screen to a bigger screen (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first.”

desktop-first-vs-mobile-first

“Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image.” A vector image can more properly adapt to different resolutions.

vectors-vs-images

 

Original post: http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Cheatsheets for Web Designers

Category : Help · (2) Comments · by Nov 24th, 2014

It doesn’t matter how many years of experience you have of a programming language, framework or CMS, you will always need a handy quick reference cheatsheet. Here’s a collection of useful cheatsheets, references, guides, checklists and docs, covering almost all aspects of web design.

CSS HTML JavaScript PHP Markdown
WordPress Ghost Joomla ModX Concrete5
Drupal Browsers Git Sublime Text Newsletters
Social Media SEO Licenses Graphic Editors Checklists
HTTP

Web Languages

CSS – Cascading Style Sheets

CSS Cheatsheet via OverAPI.com Web View
CSS Vocabulary Web View
Media Queries Cheat Sheet Web View
Responsive Web Design Cheatsheet PDF View
fontfamily.io – Check Compatabilty of Default Local Fonts Web View

Popular CSS Frameworks

Master Cheatsheet for Bootstrap 3 PDF View
Complete Font Awesome Icon Reference Cheatsheet Web View
Bootstrap 3 Glyphicons Cheatsheet Web View
Foundation 5 Cheatsheet Web View

HTML – HyperText Markup Language

HTML Vocabulary Web View
HTML5 Tag Cheatsheet PDF View
HTML 5 Cheat Sheet Infographic PDF View
HTML Elements Index Web View
HTML Canvas Web / PDF View

JavaScript & jQuery

jQuery Quick API Reference Web Web View
Javascript Cheatsheet via OverAPI.com Web Web View
JavaScript Regular Expression Cheatsheet Web View
Emmet Cheatsheet Web View

PHP

PHP Cheatsheet via OverAPI.com Web View
PHP Date & Timestamp Converter Web View

Markdown

Markdown Quick Reference Cheatsheet Web View
Printable Markdown Cheatsheet PDF View

CMS Cheatsheets

WordPress

Official WordPress Code Reference Web View
WordPress Codex Web View
Copy/Paste WordPress Cheatsheet PDF Web View

Ghost

Ghost Cheatsheet Web View
Ghost Developer Guides Web View

Joomla!

Joomla! Official Documentation Web View
Joomla! 3.x Templates Cheatsheet PDF View

MODx Revolution

MODx Revolution Documentation Web View
MODx Revolution’s Cheatsheets PDF View

Concrete5

Concrete5 Official Docs Web View
Concrete5 Cheatsheet Web View

Drupal 7

Drupal Community Docs Web View
Drupal 7 Database Cheatsheet PDF View
Drupal jQuery Cheatsheet PDF View
Drupal 7 Translation Cheatsheet PDF View

Browser Dev Tools

Chrome Devtools Cheatsheet Web View
Firebug Keyboard and Mouse Shortcuts Cheatsheet Web View

Git & GitHub

Git Cheatsheet via Git-Tower PDF View
Git Cheatsheet via GitHub Training PDF View
GitHub Visual Cheatsheet by Zack Rusin PNG View
A List of Cool Features of Git and GitHub Web View
Git Pretty Flowchart PDF View

Sublime Text

Commonly Used Sublime-Text Command Cheatsheet Web View
Sublime Text 3 OSX Cheatsheet Web View

Email & Newsletters

MailChimp Merge Tags Cheatsheet Web View
Campaign Monitor Template Cheatsheet PDF View

Social Media

Social Media Dimensions Cheatsheet PSD View
Social Media Cheatsheet PDF View

SEO

The Web Developer’s SEO Cheatsheet via Moz.com PDF View
On-Page SEO Cheatsheet Web View
Punctuation, Symbols & Operators in Search Web View

Software Licenses

TLDRLegal – Software Licenses Explained in Plain English Web View

Graphic Editors

Sketch

Sketch 3 Visual Cheatsheet by Manuel Ebert PNG View
Keyboard Shortcuts for Sketch App Web View

Adobe Photoshop

Adobe Photoshop Keyboard Shortcuts (AZERTY) JPG View
Adobe Photoshop Keyboard Shortcuts (QWERTY) JPG View
Adobe Photoshop Reference Cheatsheet via Cheetyr Web View

Adobe Illustrator

Adobe Illustrator Keyboard Shortcuts (QWERTY) JPG View
Adobe Illustrator Keyboard Shortcuts (AZERTY) JPG View
Adobe Illustrator Reference/Cheatsheet via Cheetyr Web View

Handy Checklists

Web Developer Checklist Web View
Web Developer Checklist Chrome Extension CE View
Visual Web Design Checklist Web View
Launch Check List for Professional WordPress Websites Web View
Web Accessibility Checklist Web View
Usability Checklist Web View
IxD – Interaction Design Checklist Web View

Handy References

Can I use… Support tables for HTML5, CSS3, etc Web View
Findguidelin.es – Quicklinks to Style Guides Web View

HTTP

How to Switch from HTTP to HTTPS Web, PDF View