If your car is good-looking but slow and unreliable, it’s a bad car. The same is true for websites. The words ‘performance’, ‘optimization’ or ‘maintenance’ may sound somewhat boring but without them the website could be useless. So, if you want to have an efficient website, learn this collection of tips on the website performance & speed optimization, security measures, site maintenance, as well as about robots.txt and .ntaccess files.

Website Performance and Speed

1). Website Performance Checklist
http://websiteperformancechecklist.com
by ethercycle: “We curated this checklist to make our own website testing more efficient. We run through it before we launch a client’s site. We’re sharing it with other designers and developers to make the web as a whole better.”

2). 19 Best Tools to Check Website Performance and Speed
http://seobuzzworld.com/19-best-tools-to-check-website-performance-and-speed/
by Shah: “Every webmaster should be careful and curious about the performance and speed of his site in order to take it to desired ranking. Internet has facilitated this process by offering several tools to check the site performance and speed accurately. As we can’t recommend a single tool to determine the performance of your site so we have discussed 19 best tools to check website performance and speed.”

3). How to speed up your website load times
http://www.webdesignerdepot.com/2013/02/how-to-speed-up-your-website-load-times/
by Steve Halvorson: “Do you want your website to load blazing fast? This article will teach you how to make your website load faster than you ever thought possible.”

4). Speeding Up Page Load Times
http://blog.teamtreehouse.com/speeding-up-page-load-times
by Matt West: “In this blog post you are going to learn about a number of techniques that you can use to help reduce the size of your web pages and speed up your page load times.”

5). How to speed up your website
http://www.webdesignerdepot.com/2012/05/how-to-speed-up-your-website/
by Dain Miller: “Site speed is one of the most important things about creating web content, and web applications.”

Website Security

1). 20 Tips To Increase Website Security
http://slodive.com/web-development/website-security/
by Nisha Patel: “It is always better to be safe than sorry, so we have come up with some important measures you should take at once to tighten your website security and review it periodically.”

2). Securing Your WordPress Website
http://www.sitepronews.com/2013/07/31/securing-your-wordpress-website/
by Mark Runyon: “Let’s take a look at some easy ways to protect your WordPress site, helping you sleep a little easier at night.”

3). 12 Steps to a Secure your WordPress Website
http://www.instantshift.com/2013/08/02/secure-wordpress-website/
by Mike Brown: “The very first thing you should do is Beware of Hackers.”

4). Robots.txt – A Comprehensive Guide
http://www.itechcode.com/2013/02/03/robots-txt-a-comprehensive-guide/
by Amit Shaw: “…search engines visit our site regularly and index our content but sometimes indexing of content is not according to what we want. There are some sensitive data that should not be viewed by the whole world. So with the help of robots.txt file can prevent the search engines to index your site.”

Website Maintenance

1). WordPress Website Maintenance Checklist
http://letsbuildwebsites.com/wordpress-website-maintenance-checklist/
by mitz: “Just like computer maintenance, webmasters forget that they need to perform WordPress website maintenance in order to keep their blog or website running smoothly, therefore I would like to share my checklist for website updating and maintenance.”

2). Clean Up Your Website – Things You Should Remove on a Regular Basis
http://letsbuildwebsites.com/clean-up-your-website/
by mitz

.htaccess

1). What is .htaccess?
http://speckyboy.com/2012/07/26/what-is-htaccess/
by Vladislav Davidzon: “Website administrators who are looking to get a greater degree of control over their file permissions, directory access, passwords, error pages, and search engine optimization have no better tool in their arsenal than the standard .htaccess file. This article will attempt to explain the ‘how’ and ‘why’ of the .htaccess file, and it will make the functionality of this important document pretty obvious to users of all experience levels.”

2). .htaccess For All
http://www.sitepoint.com/htaccess-for-all/
by Jonathan Hobson: “Htaccess (HyperText Access) is a simple configuration file that allows designers, developers and programmers alike to alter the configuration of the Apache Web Server in order to provide additional functionality. Such functionality can include redirecting users, URL re-writes and providing password-protected directories; but it can do so much more.”

3). Useful .htaccess Snippets and Hacks
http://speckyboy.com/2013/01/08/useful-htaccess-snippets-and-hacks/
by Ada Ivanova: “.htaccess is one file that every web admin should know and understand. At its basic level it controls access to your sites directories. But there is much more that you can do, as the snippets in this post will show you.”

4). How to Get The Most Out of Your .htaccess File
http://www.instantshift.com/2012/08/21/how-to-get-the-most-out-of-your-htaccess-file/
by Eric Nacul

5). .htaccess codes to secure your WordPress site
http://www.gonzoblog.nl/2012/11/14/htaccess-codes-to-secure-your-wordpress-site/
by Jan Rajtoral: “Why should you use the .htaccess file to secure your WordPress site? The answer is very simple – .htaccess files are processed first before any other code on your website. In other words, if you can stop hackers injecting malicious scripts before those scripts even have a chance to reach the php coding in WordPress, you’re doing a good job.”

6). .htaccess Rewrite Rule Examples to Achieve Clean URLs
http://www.codeofaninja.com/2013/04/mod-rewrite-url.html
by Mike Dalisay: “Our code for today will make your website URLs clean and attractive. Clean URLs are user and SEO friendly, it does not contain any query string thus giving your users and search engines (like Google) an idea what your link is all about once it was shared or indexed.”

Sergiy Lavryk is the CEO of HTMLcut, a markup coding company. He is an experienced web and software developer with over 12+ years of practical apps creation.

Why are lists of “10 Best / Popular / etc Things for Some People” so popular? Of course, such blog posts are very easy to read, understand and remember. But perhaps the main reason is that it’s some kind of game because people like to find their own favorite thing and say: “Yeah, I always knew that this CSS framework is the best one, and it was a right choice to use it in that project!” or “Oh, it’s impossible, they forgot the best HTML code editor, I must fix that right now in the comments!” In any case we’ve decided to make such a list too . This time it’s a collection of fresh lists from other blogs which may be interesting and useful for web designers and developers.

• HTML5, CSS, JavaScript, and PHP
• Webdev Tools
• Bonus

HTML5, CSS, JavaScript, and PHP

1). 10 Amazing HTML5 Tools For Web Designers and Developers
http://www.psdtohtmlhint.com/10-amazing-html5-tools-for-web-designers-and-developers/
by Arnold Foster: “…some very beneficial HTML5 tools that will aid you enhance your HTML5 abilities.”

1). 20 Fresh Responsive CSS Frameworks For Developers
http://templatesledger.com/responsive-css-frameworks/
by templatesledger: “…a list of 20 Fresh Responsive Frameworks For Developers. So check them out, pick the ones you like the best and take advantage of them.”

1). 10 Great jQuery Plugins Which Developers Should Make Use of
http://www.bestdesigntuts.com/10-great-jquery-plugins-which-developers-should-make-use-of
by Andrew Smith: “Here are top 10 jQuery plugins having great importance when it comes to web development.”

1). 10 Useful Free PHP Scripts for Developers
http://codegeekz.com/10-useful-free-php-scripts-for-developers/
by Gavin: “The following php scripts are easy to install, configure and useful and will help you to achieve desired results rapidly.”

1). 50+ fantastic free tools for designers
http://www.webdesignerdepot.com/2013/09/50-fantastic-free-tools-for-designers/
by Juan Pablo Sarmiento: “This great selection has over 50 free resources including coding tools for developers, icons sets, fonts, PSD and vector design sets, patterns and flat UI kits, and many more, meant to dazzle everyone with your next mobile projects, website or blog.”

1). 10 Free Web Development Tools To Make Job Easier
http://inspiretrends.com/10-free-web-development-tools-make-job-easier/
by inspiretrends: “…a newest collection which can help your production in fanatic way. The tools are mixture of CSS, Html, PHP, JavaScript and frameworks.”

1). 10 Free Tools For Web Designers
http://www.webdesigntalks.com/free-tools-for-web-designers/
by Jayanth Majety: “Suppose, if a web designer is in need of a feature that has to be used in his current activity he just can’t start coding it right from the beginning. It’s a lengthy process. To overcome this, we have got some web design tools.”

Webdev Tools

1). Top 10 Code Syntax Highlighter jQuery Plugins
http://bloggerspath.com/top-10-code-syntax-highlighter-jquery-plugins/
by Amit: “These code syntax highlighter plugins give you ease to enter your code lines with normal text and your code would get highlighted in different styles other than normal text.”

1). 10 Free Chat Applications for Your Websites
http://codegeekz.com/10-free-chat-applications-for-your-websites/
by Gavin: “10 Free Chat Applications for Your Websites which will help you communicate with your visitors and help you to enhance your business and sales. Following chat applications would easily integrate to your website and give your website an e-commerce website look and feel.”

1). 10 Handy Responsive Design Testing Tools For Designers and Developers
http://designdrizzle.com/10-handy-responsive-design-testing-tools-for-designers-and-developers/
by Steve Smith: “…a few but beneficial responsive design testing tools. Let us take a look at these 10 great tools and optimistically, these will make your testing life much simpler.”

Bonus

1). Top 10 Movies for Programmers
http://www.programcreek.com/2013/09/top-10-movies-for-programmers/
by admin: “A lot of concepts in computer programming world have been used in movies. Some of them are just so cool, and they even help programmers to understand some programming concepts. The following are my list of top 10 movies and my understanding of programming concepts they use.”

Sergiy Lavryk is the CEO of HTMLcut, a markup coding company. He is an experienced web and software developer with over 12+ years of practical apps creation.

Recently WebdesignerDepot has published an interesting post by Kendra Gaines. In her article Kendra asked: Are coders an endangered species? …Sure, high-end development is necessary. Someone has to build the drag and drop tools for a start. But what about your average front-end developer, coding HTML and CSS; could they be on the brink of extinction?

Below I’d like to share some thoughts that came to mind after reading Kendra’s article.

Website Builders

Among the main coders’ offenders Kendra has pointed out website builders. If we look at the problem a little more broadly and take into account all tools which automate or facilitate the process of front-end coding, then we should also mention various frameworks, preprocessors, libraries, code generators, CMS’s, and so forth.

French artist Villemard believed in 1910 that the tailor’s work would be completely automated in 2000.
Did this come true? What about website building in 2020?

Image Credit

I think that emergence of such tools is a positive and inevitable phenomenon. Let’s compare this situation with programming in other languages, for example, C or C++. How many people can write a windows-based program from scratch? A lot of programmers can create complex applications for Windows but quite often they have a vague idea about the basic structure of such programs, I mean the event (message) loop and other low-level elements. Really, they have got accustomed to using such Integrated Development Environments (IDE) as Qt, Eclipse, MS Visual Studio, as well as UI libraries and many other tools which automate programming of standard parts of the program. As a result, the developer mainly elaborates event handlers related to interaction with the user and realization of the business logic. Of course, such programs may be larger in size and slower in speed in comparison with fully hand-made apps. However, time and money saved by using IDE’s completely pay off all these shortcomings.

Also, many frameworks and libraries generalize best practices and experience in their field and therefore help to write code which is more reliable, stable, and maintainable.

The prediction for 2000 from 1910: “Makeup will be applied with the press of few buttons.”
What about HTML/CSS markup in 2020? Will it be done “with the press of few buttons”?

Image Credit

Moreover, availability of advanced ‘infrastructure’ can be very critical from the point of view of sustainability of the programming technology. Take a look at FORTRAN. It was the first high-level programming language and had a number of pitfalls. However, FORTRAN overcame the difficulties and according to Wikipedia:

…has been in continual use for over half a century in computationally intensive areas such as numerical weather prediction, finite element analysis, computational fluid dynamics, computational physics and computational chemistry. It is one of the most popular languages in the area of high-performance computing and is the language used for programs that benchmark and rank the world’s fastest supercomputers.

Not so bad for such an old ‘man’, eh? One of the reasons of FORTRAN survivability is its mathematical, physical, engineering, and statistical libraries. Most of them are written by the leading specialists from the best scientific organizations and universities, they are well-documented, quite effective, and have open code. Despite numerous attempts, rewriting these libraries in other languages is not still reasonable.

Another example is Java with its great virtual machine, IDEs and other programming infrastructure that make Java the usual choice for enterprise software development now.

Designing in the Browser

A very interesting trend is designing directly in the browser. If this trend grows, one day such industry standard tools as Photoshop may be substituted for ones which make the design process more integrated and straightforward by removing an intermediate phase of creating detailed (and time-consuming) PSD mockups. Many designers say that they have used Photoshop in order to draw buttons with round corners, shadows and so forth. Now such features are easily done with the help of CSS3, and there is no need in Photoshop anymore for them.

“Heating with radium.”
Sometimes it’s difficult to predict how a new technology will work in reality. But at the conceptual level the prediction may be true.

Image Credit

Does this trend mean that all web designers have to learn HTML/CSS coding? Or there will arise a number of tools which combine graphic editor possibilities with editing of HTML/CSS code and make designing in the browser so simple that it will be a common practice for most of designers? Regardless of the answer, this reduces the necessity in HTML/CSS coding as a separate speciality, too.

Price-Based Competition

Another coders’ offender mentioned by Kendra Gaines is a price-based (low-price-based) competition.

Yes, nowadays it looks like everyone and their dog are web designers or HTML/CSS coders. In 2011 we wrote in the post PSD to HTML Conversion at the Crossroads that this market is quite glutted. Nevertheless, almost every week or even more often you can come across a press release announcing that another IT firm has launched a new PSD to HTML conversion service. To win the market most of such newcomers use the price competition.

“Wars will be fought by ‘combat cars’ …”
So, wars will be…

Image Credit

If you take into account freelancers as well as online automated services, you’ll get that the price situation in the PSD to HTML market is quite stressful. And sooner or later the PSD to HTML conversion bubble will burst somehow or other. Who will survive after this burst? That is the question.

Growing Website Complexity

One more factor that should be considered when analyzing the coders’ future is that HTML/CSS coding isn’t a final product. Today a website functionality is becoming more and more complex. The share of JavaScript coding increases double quick, but the share of simple HTML/CSS decreases. As a result, front-end web developers (rather than pure HTML/CSS coders) are increasingly in demand because they are more effective in many cases.

New Times and New Approaches

So, is it reasonable to learn HTML/CSS? My answer is ‘Yes’. I’m sure that every web professional should know HTML and CSS, at least at the basic level. Moreover, in the era of widespread use of the Internet HTML/CSS should be learned at school as an important element of the computer literacy. This will help to foster a new generation of clients and users who understand the difference between, for example, an ‘automated’ website created on wordpress.com and a custom website developed on the basis of the software from wordpress.org.

“Horses will be so rare that people will pay to see them.”
Will this be true for HTML/CSS coders?

Image Credit

So, what is the way out for HTML/CSS coders?

1. Find Your Niche

PSD to WordPress, PSD to Drupal or Magento, and PSD to email templates are examples of such niches. A very interesting field is responsive web design. As you can see, all these specializations are not ‘pure’ HTML/CSS coding. All of them require you to know much more than just HTML tags. But as a consequence, you can provide your clients with full-fledged products and, therefore, are less dependent on other designers, companies or web design trends.

2. Optimize Your Coding Process

Seasoned coders usually have a set of tools, scripts, code snippets and other reusable things that help to make the coding process faster and more reliable. If you are a newbie, just google for what famous web designers and developers use for such purposes or try above-mentioned frameworks. As for the frameworks, always find out the range of their application, their restrictions and shortcomings. In other words, employ them only consciously and for a real reason.

3. Know Your Clients

People are different, and clients are no exception. Some of them need pixel-perfect quality, but some prefer fast turnaround. If you exactly understand why clients buy your services, you not only better satisfy them but also save some time and energy for other projects (because you won’t do unnecessary work) and can be more flexible in pricing. Moreover, a satisfied client very often is a regular client plus a number of referrals.

4. Learn New Technologies and Tools

Here I completely agree with Kendra: the more you know, the easier is to differentiate your niche, find a profitable job and good clients. Moreover, analyze your automated competition, for example, website builders. On closer inspection all of them have some restrictions or bottlenecks in managing and developing websites, so, they may be great to test the waters or understand what you want to get from the web, but when it comes to more complex business or creative tasks they could be limiting. If you know these limitations, you can promote your own services more convincingly or (why not?) advise other people how to deal with them.

Summary

Whether HTML/CSS coders are in danger or not, time will show. The only thing which is clear now is that the web design landscape is changing very fast. And this is so exciting!

Sean Brown is the editor of HTMLcut blog. Starting as a software developer (FORTRAN, Lisp, C, C++, HTML / CSS / JS), now he is wearing the hat of marketing and copywriting manager.

This is an F-post: there are a lot of words with the letter “F” in it. Really, we’ll talk about Flat web design, it’s Friday today, and it’s Funny, so why not .

Finally, a fabulous set of flat icons and UI freebies is finished for our friends and followers! For me, flat design is a very fruitful trend. First and foremost, it focuses on fundamental features rather than decoration and ‘furniture’. Any facet of flat websites (a ‘facade’, footer, even fonts) looks fresh and fashionable. Flat design forms a new flow with better media flexibility. Where will the flat be in five years? I can’t forecast. Just a few years ago Flash was among favorites too. Even FPhotoshop might finish like those fools (sorry, tools) for which the future firstly was “forever” but in fact they were forgotten much faster than formal farewell with them or their official “funeral” took place. However frankly, I feel flat design isn’t just a fad, it’s here to stay.

Enjoy the fair of flat icons below, use them in your next fantastic flat web design, and stir up the flight of your fancy.

• Flat Icons
• Flat Buttons and UI Sets

Flat Icons

1). Free download: 12 Flat SEO icons
http://www.webdesignerdepot.com/2013/07/free-download-12-flat-seo-icons/
by Ben Moss: “This set of 12 flat SEO icons is perfect for adding a light-hearted and playful tone to sites.”

2). Free download: Flat but not flat rounded social icons
http://www.webdesignerdepot.com/2013/07/free-download-flat-but-not-flat-rounded-social-icons/
by Ben Moss: “Flat design is all the rage, and trend-conscious clients are beginning to ask for redesigns to meet the current fad for all things flat.”

3). Ultimate Collection of Various Helpful Flat Icons Packs from 2013
http://www.land-of-web.com/resources/ultimate-collection-ov-various-helpful-flat-icons-packs-from-2013.html
by admin: “Today I have completed a comprehensive collection of various truly valuable flat icons that were released during this half-year. You will find icons for social media, mobile apps, navigation and much more.”

4). 20 Free Flat Icon Sets
http://speckyboy.com/2013/05/29/20-free-flat-icon-sets/
by Paul Andrew: “…today we have some more flat resources for you, namely free flat icon sets.”

5). 35 Beautiful Free Flat Icons Sets that You can Use
http://www.onextrapixel.com/2013/07/04/35-beautiful-free-flat-icons-sets-that-you-can-use/
by Rahul Chowdhury: “Flat icons are a new trend in designing UI, and they are perfect if you are looking for a good and minimalist design to capture your audience’s attention, and nothing can be better than a collection of some awesome and beautiful free flat icons.”

6). Exclusive Freebie for Noupe’s Readers: Freepik’s 200 Beautiful Flat Icons
http://www.noupe.com/freebie/exclusive-freebie-for-noupes-readers-freepiks-200-beautiful-flat-icons-77112.html
by Dieter Petereit: “Flat Icon Set: 200 Symbols as PNG, AI and EPS.”

7). 20 Flawless Flat Icon Sets Which Works Perfectly On Any Modern Graphic Design Project
http://www.topdesignmag.com/20-flawless-flat-icon-sets-which-works-perfectly-on-any-modern-graphic-design-project/
by Bogdan: “Below you can see a collection of 20 flat icon sets which will help you create a fluent visual navigation.”

8). Flat icons: More than 3600 icons
http://www.iconshock.com/icon_sets/flat-icons/
by admin: “it is time for some free icon bounty, for today it’s a softly colored yet vibrant flat-styled iconset comprised of more than 3600 flat icons. (without counting the 3 sizes included) Free for commercial or personal use.”

9). 6 Blue Flat Icons
http://www.bestpsdfreebies.com/freebie/6-blue-flat-icons/
by Michael Reimer: “If you like flat UI, these elements are for you.”

10). Flat Social Media Icons
http://www.bestpsdfreebies.com/freebie/flat-social-media-icons/
by Michael Reimer: “10 beautifully flat designed social media icons.”

11). 48 Free Flat Icons by Pixel Fabric
http://enfuzed.com/48-free-flat-icons-by-pixel-fabric/
by Enfuzed: “These 48 free flat icons are brought to you courtesy of Lukas Jurik of Pixel Fabric.”

12). 24 Flat Icons (PSD)
http://www.premiumpixels.com/freebies/24-flat-icons-psd/
by Jan Dvořák: “4 flat style icons contributed by super-talented Jan Dvořák. The PSD includes all 24 icons which are fully layered for easy customisation.”

13). Epic Flat 510+ icon set
https://creativemarket.com/EpicShop/6021-Epic-Flat-icon-set(200-and-counting)
by EpicShop: “I plan to make it the biggest flat icon set on the web so will be adding 20+ icons every week.”

14). 48 Flat Icons
http://dajzafree.net/2013/05/48-flat-icons/
by DAJZAFREE: “CREDITS: Lukas Jurik.”

15). Adobe CS6 Custom Flat Icons Freebie
http://www.supercolortuts.com/adobe-cs6-custom-flat-icons-freebie/
by Adrien de Broglio: “In this pack you will find custom CS6 software icons, Files icons and Filetype icons with some nice soft colours.”

16). Flat Icons Freebie
http://dribbble.com/shots/1076502-Flat-Icons-Freebie
by [removed]

17). Social icons – freebie
http://dribbble.com/shots/1114918-Social-icons-freebie
by Pierre Borodin: “Nothing special just only social icons.”

18). Flat Icons Brownie Theme
http://dribbble.com/shots/1113492-Flat-Icons-Brownie-Theme
by Sunbzy: “I want to eat a brownie while working. and trendy flat icons
is hot right now.”

19). 100 Flat Icons for Graphic Designers
http://blog.karachicorner.com/2013/03/100-flat-icons-for-graphic-designers/
by admin: “100 flat icons pack come in 11 different sizes from 16*16px to 4096 to 4096px and in .PNG format.”

20). 3D Flat Icons
http://www.behance.net/gallery/3D-Flat-Icons/9071419
by Blues design

21). 35 Flat Icons and Web Elements for UI Design
http://graphicdesignjunction.com/2013/04/flat-icons-and-web-elements-for-ui-design/
by Yasir Jawaid: “…a huge collection of Flat Icons, UI Kits and Flat Web Elements for user interface designing.”

22). Flat Jewels Icon Set
http://pixelkit.com/kits/flat-icon-set
by admin: “Pack contains 133 different icons.”

23). 40 New and Free Icon Sets
http://speckyboy.com/2013/07/09/40-new-free-icon-sets/
by Speckyboy Editors: “…all of the sets below have been professionally designed and are perfect for any project. You will find web icon sets, glyphs, pictograms, mini-icons, social service icons, a few new iOS 7 icons sets and plenty more in-between.”

Flat Buttons and UI Sets

1). Flat UI Kit (free download)
http://www.webdesignerdepot.com/2013/05/flat-ui-kit-free-download/
by Ben Moss: “You can use the file for personal and commercial uses.”

2). Freebie: Colorful Flat GUI Set part4
http://www.land-of-web.com/freebies/psd/freebie-colorful-flat-gui-set-part4.html
by admin: “Today’s freebie is our fourth part of colorful trendy flat GUI pack… Free for personal and commercial use.”

3). Flat UI Free – PSD&HTML User Interface Kit
http://designmodo.com/flat-free/
by Adrian: “Flat UI Free is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers.”

4). 10 UI Kits For Flat Web Design
http://whodesigntoday.com/ui-kits-for-flat-web-design/
by David Martin: “User interface templates such as PSDs or coded GUI files simply allow you to save time on a project. You can quickly build a concept or live prototype which can be super handy if your on a limited budget or time restriction.”

5). Metro UI PSD Set
http://freepsdfiles.net/buttons/metro-ui-psd-set/
by Free PSD Files: “Metro UI PSD set containing a large amount of objects – more than 20! We’ve designed buttons, sliders, tabs, navigations and lots of graphics in clean, flat style. Download the whole set now for free.”

6). Flat UI Kits, Best for Web and App UI Design
http://blog.karachicorner.com/2013/05/best-flat-ui-kits-for-web-and-app-ui-design/
by admin: “In this roundup you can find Flat UI Kits and Web Elements for Web and Mobile App UI Design.”

7). Flat iPhone 4/5 Mockups (PSD)
http://www.premiumpixels.com/freebies/flat-iphone-45-mockups-psd/
by Josh Laincz: “…a set of flat style iPhone mockups, is a sweet contribution from designer Josh Laincz. The pack includes both the iPhone 4 and 5 in a fully layered and scalable format.”

8). Kanso – Semantic Flat Buttons
http://www.kolszewski.com/kanso/
by Kris Olszewski: “Kanso (簡素), in Japanese aesthetics, means simplicity or elimination of clutter. Things are expressed in a plain, simple, natural manner. Reminds us to think not in terms of decoration but in terms of clarity, a kind of clarity that may be achieved through omission or exclusion of the non-essential.”

9). FlatDSGN – Freebies and Inspiration Resources in the Flat Design
http://flatdsgn.com
by admin

 
Please note:
To find more (the most fresh) resources and articles on flat web design, follow our Pinterest board Flat Web Design.

Sean Brown is the editor of HTMLcut blog. Starting as a software developer (FORTRAN, Lisp, C, C++, HTML / CSS / JS), now he is wearing the hat of marketing and copywriting manager.

The idea to design directly in the browser was boosted after the concept of responsive web design had been pulled out. Now a lot of responsive websites have already been developed and new ones are created every single day but designing in the browser is still a controversial subject. Maybe in the word combination ‘web designer’ it is much more from ‘designer’ and creativity, passion, taste, and colors, rather than from ‘web coding’ with its analytics, order, logic, control, and realism. Or simply there is no decent alternative – really suitable and handy tools to design in the browsers?

To find the answer we’ve collected a number of articles and posts on this debatable topic.

The Concept and Recommendations How to Use It

1). Designing in the Browser (2009)
http://patrickhaney.com/thinktank/2009/07/15/designing-in-the-browser
by Patrick Haney: “Andy Clarke recently gave a talk at An Event Apart Boston called Walls Come Tumbling Down in which he presented the idea of doing design work directly in the browser to the audience.”

2). Make Your Mockup in Markup (2009)
http://24ways.org/2009/make-your-mockup-in-markup/
by Meagan Fisher: “In a very scientific and official survey I conducted, close to 90% of respondents said they design in Photoshop before the browser… Recently… I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser.”

3). Responsive Web Design in the Browser Part 1: Kill Photoshop (2012)
http://blog.teamtreehouse.com/responsive-web-design-in-the-browser-part-1-kill-photoshop
by Josh Long: “Let’s explore the next stage in the evolution of the web and one where Photoshop is a waste of our valuable time. Here’s how to kill Photoshop and do responsive web design in real-time with the only app we need: the browser.”

4). Designing in the browser – Divya Manian (2012)
http://www.webdirections.org/resources/designing-in-the-browser-divya-manian/
by admin: “Learn how to create a prototype from start to finish using these new technologies while taking advantage of quick prototyping tools.”

5). Is Photoshop dead? (2013)
http://www.webdesignerdepot.com/2013/02/is-photoshop-dead/
by Javier Ghaemi: “I guess a more suitable title might be ‘is Photoshop still an appropriate tool for designing typography on the web?’ But that lacks the dramatic appeal of the above.”

6). How to Design Responsively (2013)
http://davidwalsh.name/design-responsively
by Krasimir Tsonev: “Web applications run in the browser. Why not make the design there. It’s actually a little bit strange that we didn’t think about this earlier.”

7). Designing in the Browser with Zoe Gillenwater
http://blog.teamtreehouse.com/designing-in-the-browser-with-zoe-gillenwater
by Treehouse: “Zoe Gillenwater, author of Stunning CSS3, sits down with Treehouse’s Dan Gorgone to discuss the effect CSS3 has had on front-end design, as well as accessibility, mobile first design, and learning how to code.”

7a). Designing in the Browser – An Interview with Brad Frost
http://blog.teamtreehouse.com/designing-in-the-browser-an-interview-with-brad-frost
by Treehouse: “Brad Frost is one of the thought leaders in regards to web design, responsive web design, and designing in the browser. In this episode of Treehouse Friends, we sat down with Brad to pick his brain on designing in the browser.”

8). Tips for Designing in the Browser
http://webdesign.tutsplus.com/articles/workflow/tips-for-designing-in-the-browser/
by Aaron Lumsden: “It’s often thought that designing in the browser is a modern approach to web design. In fact, before the advent of tools such as Photoshop, there was little other choice. Only in the last few years, since the dawn of responsive design, have designers gone back to their roots and started designing in the browser.”

9). Designing In the Browser Is Easier Than You Think
https://medium.com/design-ux/b41e0a05c39f
by Bryan Rees: “Designing in the browser is going to require more than just a working knowledge of HTML, CSS & JS, but it’s not as hard as you think. As with anything, with practice and dedication it won’t take long for it to become second nature and a fruitful means by which to express design ideas.”

10). 12 Killer Tips for Designing in the Browser
http://designshack.net/articles/css/12-killer-tips-for-designing-in-the-browser/
by Joshua Johnson: “This article will provide you with the tools and tricks you need to create brilliant, working mockups as your very first step in the design process.”

11). 3 Steps to Designing in The Browser
http://isotope11.com/blog/3-steps-to-designing-in-the-browser
by Brandon Adams: “I recently had the opportunity to work on a project that I decided to design in the browser and wanted to share what I believe are 3 steps that will help you get started with in-browser design.”

12). Continuous Design and the NoPSD Movement
http://thoughtworks.github.io/p2/issue02/continuous-design.html
by Ryan Boucher and Mike Gardiner: “Andrew says he’ll still do some sketching and Photoshop here and there, but it’s for wireframing and layout, not for perfecting pixels. Just like the NoSQL movement was about using alternative data stores to support better data-modelling, the NoPSD movement is about alternatives that better support the real movement: Continuous Design.”

13). Designing with elements and modules
http://www.netmagazine.com/opinions/designing-elements-and-modules
by Chris Allwood: “The decisions should have been made in the browser. Despite this, I believe that graphics editors still play an important role in how we visualise and deliver our websites… I propose that we begin to use our graphics editor to design ‘elements’ and ‘modules’ of the site.”

Designing in the Browser is Good. Or Evil

1). Building a Better User Experience by Designing in the Browser
http://uxmag.com/articles/building-a-better-user-experience-by-designing-in-the-browser
by Jared Rogers: “Comps are part of an old design process, so stop catering to your client with inauthentic, hypothetical experiences. Present your work in the browser to give everyone the real experience.”

2). Designing in the browser leads to better quality builds
http://csswizardry.com/2010/10/designing-in-the-browser-leads-to-better-quality-builds/
by Harry Roberts: “Last night I got to thinking that the majority of design and build I have done in the past few years I have done straight into the browser… I maintain that the build quality of a site designed in the browser can be far greater than if it started its life in Photoshop.”

3). Designing in the Browser
http://andysearles.com/designing-in-the-browser/
by Andrew Searles: “Although on the outside, it might seem more restrictive to the creative process, in-browser design has actually made me more creative.”

4). I can’t design in the browser
http://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/
by Sarah Parmenter: “Designing straight into the browser isn’t an option for me though, I still need to go through that creative process in my graphics editor away from the structure of div’s and presentational code, but after getting some initial designs down on paper. Thankfully, I know I’m not alone.”

5). The debate: is it possible to develop the mockup of a website directly on the browser?
http://www.yourinspirationweb.com/en/the-debate-is-it-possible-to-develop-the-mockup-of-a-website-directly-on-the-browser/
by Sarah: “Today’s controversy pertains to an interesting – and at the same time subversive – article by Meagan Fisher on 24ways.org in which the ‘death of Photoshop’ is literally praised in favor of a mockup carried out directly on the browser.”

6). Design in the browser is ‘stifling’
http://www.netmagazine.com/news/design-browser-stifling-132752
by Craig Grannell: “David Bushell argues against design extremism and instant dismissal.”

7). Designing in the Browser is Not the Answer
http://www.andybudd.com/archives/2012/03/designing_in_the_browser_is_not_the_answ/
by Andy Budd: “The argument for ‘designing in the browser’ seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment?”

8). Designing Websites In Browser (gasp!)
http://stackoverflow.com/questions/432849/designing-websites-in-browser-gasp
“I’m interested in people’s opinions on the pros and cons, or downright hell no’s on designing websites in the browser, and moving away from Photoshop, Fireworks, etc.”

9). What to do when you can’t design in the browser
http://www.allisongrayce.com/what-to-do-when-you-cant-design-in-the-browser/
by Allison Grayce: “With this new process, we’ve solved most of our issues here with designing in the browser. I feel like it’s a happy middle ground to saving time and energy that Photoshop has cost us in the past, without sacrificing the creative aspect of designing a website. It will still be a big change, but a bit less drastic than completely killing off Photoshop and diving right into code.”

10). Designing in the browser and client conversations
http://css-tricks.com/forums/discussion/24456/designing-in-the-browser-and-client-conversations
Discussion

11). Design In The Browser Means An Iterative Workflow
http://www.vanseodesign.com/web-design/iterative-workflow/
by Steven Bradley: “I wanted to share… where my own process is when it comes to designing and developing a site.”

12). How Working in a Browser Shapes Your Design
http://www.vanseodesign.com/web-design/medium-shapes-design/
by Steven Bradley: “The medium is simply one more tool you have to work with and the more you work with it, the better you’ll be able to express yourself using it.”

13). Why I Design In The Browser
http://kyleledbetter.com/why-i-design-in-the-browser/
by Kyle Ledbetter: “We migrated our massive codebase over to Bootstrap, began designing in the browser and never looked back.”

Tools

1). Easel
https://www.easel.io
“Design & build in your browser. (It’s the fastest way to ship.)”

2). Froont
http://froont.com
“Responsive web design, the visual way. Design websites directly in the browser with a simple drag and drop interface.”

3). Webflow
http://webflow.com
“Design Responsive Websites Visually. Build using our powerful and intuitive UI. Export production-ready HTML & CSS.”

4). ICEcoder
http://codevisually.com/icecoder-in-browser-code-editor/
“ICEcoder is an open-source code editor that lets you work directly within the browser, whether you’re online or offline. It includes broken tag indicators, highlighting themes, secure login, and much more.”

5). 5 tools to help you designing in the browser
http://www.ireckon.com/design/designing-in-the-browser/
by Joel: “Below are some tools that can help you speed up designing in a browser, and encourage moving a lot of the design decision process out of your image editing program and into the browser.”

Sean Brown is the editor of HTMLcut blog. Starting as a software developer (FORTRAN, Lisp, C, C++, HTML / CSS / JS), now he is wearing the hat of marketing and copywriting manager.