5.00 score from hupso.pl for:
the-haystack.com



HTML Content


Titlethe haystack | web. design. web design.

Length: 39, Words: 6
Description pusty

Length: 0, Words: 0
Keywords pusty
Robots
Charset UTF-8
Og Meta - Title exist
Og Meta - Description exist
Og Meta - Site name exist
Tytuł powinien zawierać pomiędzy 10 a 70 znaków (ze spacjami), a mniej niż 12 słów w długości.
Meta opis powinien zawierać pomiędzy 50 a 160 znaków (łącznie ze spacjami), a mniej niż 24 słów w długości.
Kodowanie znaków powinny być określone , UTF-8 jest chyba najlepszy zestaw znaków, aby przejść z powodu UTF-8 jest bardziej międzynarodowy kodowaniem.
Otwarte obiekty wykresu powinny być obecne w stronie internetowej (więcej informacji na temat protokołu OpenGraph: http://ogp.me/)

SEO Content

Words/Characters 4332
Text/HTML 51.09 %
Headings H1 5
H2 10
H3 7
H4 0
H5 0
H6 0
H1
the haystack
how i prepare data-merged designs for print using open source software
reality is messy
choosing between min-width and max-width media queries
posts navigation
H2
web. design. web design.
1 things you’ll need
2 creating the inkscape and csv files
3 running inkscape_merge
4 combining the batch files into a single pdf
finally…
what’s your goal?
desktop first and max-width
using max-width against your better judgement
so, what’s the best to use?
H3
2.1 a caveat about the csv file
3.1 a caveat about exporting to pdf
4.1 combining multiple pdfs into a single pdf
4.2 combining multiple pngs into a single pdf
buy my book
recently
categories
H4
H5
H6
strong
b
i
em
Bolds strong 0
b 0
i 0
em 0
Zawartość strony internetowej powinno zawierać więcej niż 250 słów, z stopa tekst / kod jest wyższy niż 20%.
Pozycji używać znaczników (h1, h2, h3, ...), aby określić temat sekcji lub ustępów na stronie, ale zwykle, użyj mniej niż 6 dla każdego tagu pozycje zachować swoją stronę zwięzły.
Styl używać silnych i kursywy znaczniki podkreślić swoje słowa kluczowe swojej stronie, ale nie nadużywać (mniej niż 16 silnych tagi i 16 znaczników kursywy)

Statystyki strony

twitter:title pusty
twitter:description pusty
google+ itemprop=name pusty
Pliki zewnętrzne 21
Pliki CSS 5
Pliki javascript 16
Plik należy zmniejszyć całkowite odwołanie plików (CSS + JavaScript) do 7-8 maksymalnie.

Linki wewnętrzne i zewnętrzne

Linki 51
Linki wewnętrzne 1
Linki zewnętrzne 50
Linki bez atrybutu Title 43
Linki z atrybutem NOFOLLOW 0
Linki - Użyj atrybutu tytuł dla każdego łącza. Nofollow link jest link, który nie pozwala wyszukiwarkom boty zrealizują są odnośniki no follow. Należy zwracać uwagę na ich użytkowania

Linki wewnętrzne

skip to content #content

Linki zewnętrzne

the haystack

web. design. web design.

http://www.the-haystack.com/
home http://www.the-haystack.com/
book http://responsivedesignworkflow.com
speaking http://lanyrd.com/profile/stephenhay/
work http://zerointerface.nl
about stephen http://www.the-haystack.com/about/
how i prepare data-merged designs for print using open source software http://www.the-haystack.com/2016/05/16/data-merged-print-design-with-open-source/
http://www.the-haystack.com/2016/05/16/data-merged-print-design-with-open-source/
design http://www.the-haystack.com/category/design/
ghostscript.cli http://www.the-haystack.com/tag/ghostscript-cli/
imagemagick http://www.the-haystack.com/tag/imagemagick/
inkscape http://www.the-haystack.com/tag/inkscape/
open source http://www.the-haystack.com/tag/open-source/
print http://www.the-haystack.com/tag/print/
stephen http://www.the-haystack.com/author/stephenhay/
inkscape merge https://github.com/borgand/inkscape_merge
inkscape https://inkscape.org/en/
inkscape merge https://github.com/borgand/inkscape_merge
ghostscript http://ghostscript.com/
imagemagick https://imagemagick.org/script/index.php
https://www.linuxjournal.com/content/tech-tip-using-ghostscript-convert-and-combine-files https://www.linuxjournal.com/content/tech-tip-using-ghostscript-convert-and-combine-files
one comment so far http://www.the-haystack.com/2016/05/16/data-merged-print-design-with-open-source/#comments
reality is messy http://www.the-haystack.com/2016/01/05/reality-is-messy/
http://www.the-haystack.com/2016/01/05/reality-is-messy/
babble http://www.the-haystack.com/category/babble/
business http://www.the-haystack.com/category/business/
css http://www.the-haystack.com/category/css/
stephen http://www.the-haystack.com/author/stephenhay/
view all 6 comments http://www.the-haystack.com/2016/01/05/reality-is-messy/#comments
choosing between min-width and max-width media queries http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/
http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/
css http://www.the-haystack.com/category/css/
design http://www.the-haystack.com/category/design/
html http://www.the-haystack.com/category/html/
layout http://www.the-haystack.com/category/layout/
mobile http://www.the-haystack.com/category/mobile/
responsive http://www.the-haystack.com/category/responsive/
web standards http://www.the-haystack.com/category/web-standards/
stephen http://www.the-haystack.com/author/stephenhay/
brad frost https://twitter.com/brad_frost
related topics http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
older posts http://www.the-haystack.com/page/2/
order the book http://www.peachpit.com/store/responsive-design-workflow-9780321887863
read a sample chapter http://www.peachpit.com/articles/article.aspx?p=2040824
how i prepare data-merged designs for print using open source software http://www.the-haystack.com/2016/05/16/data-merged-print-design-with-open-source/
reality is messy http://www.the-haystack.com/2016/01/05/reality-is-messy/
choosing between min-width and max-width media queries http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/
put the “designers should code” debate to rest http://www.the-haystack.com/2015/09/02/put-the-designers-should-code-debate-to-rest/
on diverse speaker lineups at conferences http://www.the-haystack.com/2015/08/21/on-diverse-speaker-lineups-at-conferences/
proudly powered by wordpress https://wordpress.org/

Zdjęcia

Zdjęcia 4
Zdjęcia bez atrybutu ALT 0
Zdjęcia bez atrybutu TITLE 4
Korzystanie Obraz ALT i TITLE atrybutu dla każdego obrazu.

Zdjęcia bez atrybutu TITLE

http://www.the-haystack.com/wp-content/uploads/2016/05/inkscape01.png
http://www.the-haystack.com/wp-content/uploads/2016/05/4badges.png
http://www.the-haystack.com/wp-content/uploads/2016/05/badges-combined.png
http://www.the-haystack.com/wp-content/uploads/2013/05/cover.jpg

Zdjęcia bez atrybutu ALT

empty

Ranking:


Alexa Traffic
Daily Global Rank Trend
Daily Reach (Percent)









Majestic SEO











Text on page:

the haystack web. design. web design. menu skip to content home book speaking work about stephen search for: how i prepare data-merged designs for print using open source software may 16, 2016designghostscript.cli, imagemagick, inkscape, open source, printstephen i co-organize some popular conferences in amsterdam with a few friends/colleagues. as the resident designer, i’m often tasked with making the name badges that everybody wears. i used to make these in adobe indesign, which has a mail merge function that, while kind of weird (i seemed to be required to use utf-16 csv files to merge with), worked pretty well. since i switched my os to ubuntu a while back, i haven’t had a need for indesign. really, the only thing i ever used it for was for making badges. that doesn’t justify the cost to me, not only financially, but also in disk space. :-) so i’ve set out to make these badges in one of my favorite drawing tools: inkscape. since inkscape is an svg drawing program, and svgs are text, i figured there might be some flexibility there. that flexibility and freedom have a price, though. instead of doing everything in one gui app, a few different programs are involved. the workflow involves using the command line. it’s not a perfect process, but it works fairly quickly and well for me. that said, feel free to laugh at my awkward process. open your copy of indesign now. by the time you’ve finished reading this, indesign should be open and ready to go. note that i’m not doing book design here; my use case is fairly simple. if print design were still my profession, i would most likely use the best software for the job. my biggest problem with this workflow is that i kept forgetting what i did the previous time. that’s the main reason for me writing this, and for a couple of people who requested it. it’s essentially documentation for me, so i don’t forget again. that said, someone else somewhere might find it useful. this is for informational purposes only, and may not work on your system. i am unable to provide any support. it’s probably best not to follow along at all if you’re not somewhat comfortable in the command line. i mainly work on a linux machine, and this description is written from that point-of-view. anyone following along on other systems might have to work out discrepancies or weirdness in their own environment. with the disclaimer out of the way, let’s look at the process. this might seem a bit complex, but from my perspective the process is simple, and the following things are true: i draw my artwork in inkscape. i have a csv with attendee data. i type one command to generate a file for each badge. i type one command to combine those files into a single pdf. i send the pdf to the printer. note that in a gui, instead of typing a command, i would probably choose various commands from one or more menus. so, to be clear, from my perpective, this is not more work than doing this all in a gui program. i will concede to the fact that there is more complexity in the tools i use, as you have to install three, and they might not work the same on every os. this process assumes a linux-like os, and enough knowledge on your part to recognize things you might need to change to get them to work on you particular os. instead of indesign (and a tool to convert a utf-8 csv into utf-16), i need three tools, which i’ll describe below. these tools are freely available and don’t take up much space. the time it takes to generate the badges is not longer (and often shorter) than doing the same with commercial tools. badges are made in inkscape, and data from csv is merged using a ruby gem called inkscape merge. it’s not ideal, but it works fairly well in that inkscape can be used and i’m not locked in to a specific software vendor’s software and workflow. the process outlined here is simple and has kinks, but lots of things could be scripted to do more complex stuff, like customizing visual differences between speaker badges and attendee badges, etc. 1 things you’ll need we’re using the following open source tools (please refer to the individual sites for installation instructions): inkscape, for doing the badge artwork in svg inkscape merge, a ruby gem, for doing a “mail merge” of a csv file with the artwork, which results in separate files for each (side of each) badge ghostscript, to merge all the files you generated into a single pdf, if you’ve exported those files themselves as pdfs. if you’re on os x or linux, there’s a good chance this is already on your machine. imagemagick (specifically `convert`), to merge all the files you generated into a single pdf, if you’ve exported those files as bitmaps, e.g. png. if you’re using os x or linux, there’s a good chance ghostscript is already on your machine. the last three tools are command line tools, and even inkscape can be run from the command line (and in fact, inkscape_merge does exactly that). don’t be afraid to try it out, if you’re so inclined. that’s how one gets more comfortable with the command line. 2 creating the inkscape and csv files badges are made in inkscape any way you want. you’ll have to have a separate file for each side of the badge, unless both sides will be identical. i draw my own crop marks for the printer in my document, put them in their own inkscape layer, and lock it. then i draw the rest. you can also do this after the artwork, but i like to get it out of the way at the beginning. if i want to show my colleagues what a badge will look like, i’ll make a selection of the printed area and use inkscape’s “export bitmap” function to make a png of it to show. obviously, i’ve already consulted with the printer about what they need to receive from me before i even start. i’ve worked with printers for whom indesign was literally the only option. we like our current printer. a layout in inkscape with variables text that is to be replaced by csv data should be indicated like so: %var_csvcolumnname%, where csvcolumnname corresponds to a column in the csv. the csv might look like this: name,company,twitter, stephen,zero interface,@stephenhay, ppk,quirksmode,@ppk, krijn,qontent,@krijnhoetmer, martijn,,@martijnvduuren, this is essentially the following structure: name company twitter stephen zero interface @stephenhay ppk quirksmode @ppk krijn qontent @krijnhoetmer martijn   @martijnvduuren if i were to have a bit of text in my inkscape svg file with %var_name%, then when i run inkscape_merge with the above csv file, that variable would be replaced with “stephen”, “ppk”, “krijn”, and “martijn”, each in their own file. the csv file should be utf-8 encoded. 2.1 a caveat about the csv file some weird bug i’ve been getting using inkscape_merge prevents me from changing the column separator to something other than a comma, which is the default. this is a pain, because sometimes you’ll have a field in the csv that uses commas, like “acme, inc.”. i don’t know enough ruby to figure it out. for future reference, this is an example of the type of error i get: inkscape_merge --csv_col_sep='|' -f badge.svg -d data.csv -o batch/badge_%d.pdf /var/lib/gems/1.9.1/gems/inkscape_merge-0.1.3/bin/inkscape_merge:33:in `block (2 levels) in ': undefined method `csv_options' for # (nomethoderror) from /usr/lib/ruby/1.9.1/optparse.rb:1360:in `call' from /usr/lib/ruby/1.9.1/optparse.rb:1360:in `block in parse_in_order' from /usr/lib/ruby/1.9.1/optparse.rb:1347:in `catch' from /usr/lib/ruby/1.9.1/optparse.rb:1347:in `parse_in_order' from /usr/lib/ruby/1.9.1/optparse.rb:1341:in `order!' from /usr/lib/ruby/1.9.1/optparse.rb:1432:in `permute!' from /usr/lib/ruby/1.9.1/optparse.rb:1453:in `parse!' from /var/lib/gems/1.9.1/gems/inkscape_merge-0.1.3/bin/inkscape_merge:11:in `' from /usr/local/bin/inkscape_merge:23:in `load' from /usr/local/bin/inkscape_merge:23:in `

' the only workaround i have right now, since i currently don’t encounter many fields containing commas, is to create separate svgs with hand-entered data for each row in the csv that uses in-field commas, and convert these separately. it’s an awful workaround, but my last set of badges only had two instances, so no one dies. btw, no, using double-quotes in the csv doesn’t work, as inkscape_merge seems to skip rows containing them. joy. 3 running inkscape_merge first, make sure there’s a directory to put the batch input. inkscape_merge is going to create one file for each row in the csv. this might be a lot. let’s say that directory’s name is batch. inkscape_merge is then run as follows: inkscape_merge -f sourcefile.svg -d datafile.csv -o batch/badge_%d.pdf where sourcefile and datafile are the names of your svg artwork and csv file, respectively. the %d will be replaced, for each file, by the number of the csv row. this will put as many files in the batch directory as there are rows in your csv. remember that rows containing in-field commas should simply be exported by hand from handmade svg copies of the artwork in which you’ve entered the actual data of that row instead of %var_whatever%. you can do that from the command line: inkscape --without-gui --export-pdf=outputfile.pdf --export-dpi=300 sourcefile.svg where sourcefile is the specific svg file and outputfile is the name of the file you want to end up with. a little trick i use is to leave double-quotes around fields containing commas in the csv. since inkscape_merge doesn’t output these, i know which ones i have to do manually, and i also know how i should name them according to row, and these filenames are missing from the batch directory since they haven’t been generated. 3.1 a caveat about exporting to pdf inkscape allows you to do lots of stuff with svgs, and these things don’t always export well to pdf. it’s hard to say exactly what, but sometimes i notice problems with transparency and masking/clipping. if you run a batch to pdf and open one and see that it’s not as you intended, you can export all your rows to png instead. since the dpi is set to 300, this should suffice for most print work: inkscape_merge -f sourcefile.svg --format png -d datafile.csv -o batch/badge_%d.png this will give you a bunch of png files instead of pdf. you’ll also have to export your infield-comma exceptions to png manually. a separate file is created for each row in the csv file. 4 combining the batch files into a single pdf printers generally want pdfs, so whether our batch consists of pdfs or pngs, we’re combining them into a pdf. make sure you’re in the batch directory first. 4.1 combining multiple pdfs into a single pdf to do this with pdfs, we use ghostscript: gs -sdevice=pdfwrite \ -dnopause -dbatch -dsafer \ -soutputfile=combined.pdf \ `ls` for more info and variations, see https://www.linuxjournal.com/content/tech-tip-using-ghostscript-convert-and-combine-files. the `ls` turns the output of the ls command into input for the gs command. you could also use * or $(ls) instead, in this case. if you’re in the batch directory, the output of ls is a list of all the files that we generated before. 4.2 combining multiple pngs into a single pdf for pngs, we’ll use imagemagick’s convert command: convert -limit memory 2mb `ls` combined.pdf we’re limiting memory usage to 2mb here, because otherwise with many files, sometimes the system will kill the process because it’s using too much memory. the separate files are now combined into a single pdf file finally… that’s it! this is how we’ve been making most of our conferences badges for over a year now (except for one which involved html, css and php). the above process is pretty painless once you’ve run through it a few times, and generating a file with about 300 badges only takes a few minutes. since svgs are text, and inkscape_merge variables can replace any text in the svg, you can customize colors per badge or practically anything else. you could potentially do any kind of scripting you like. and of course, you could wrap all of this in a tidy bash script for easy execution. i’m in the process of making a demo video of this workflow, in which i also demonstrate using variables for colors. this should be done in a day or two, and i’ll post a link here when it’s done! one comment so far reality is messy january 5, 2016babble, business, cssstephen we like to believe that the right framework, method, approach, or conventions will allow us to create perfect projects. our code will be beautiful, pure, performant, and maintainable. outside of some developer blogs however, this is often not the case. reality is messy. some people are fortunate enough not to have to deal with this reality on a daily basis. there are people who work for browser-makers. their projects are not most projects. there are people who work for large-scale and popular “startups”, who have the luxury of focusing on a limited number of components. their projects are not most projects. although we can (and do) learn a lot from posts on medium about month-long experiments in link underlining, many of us have pressing deadlines. processes can be messy because they involve other people and limited resources, tight budgets, difficult stakeholders and ridiculous time constraints. outside of the product world, many of us work in creative and/or technical services. our job is to help our clients. these clients have concerns during the design and development process that we need to address. sometimes, we can’t do everything exactly as we would like. client needs trump our own. i’ll give you an example: a project i worked on where my job was to help take an existing desktop-centric design and make it responsive. my task was to determine exactly how everything would work responsively. my deliverable was a series of more than 20 design comps built with html and css. the comps were themselves responsive, so stakeholders and the developers knew what the end result should be. here’s the thing: there were extreme time constraints. we basically had two months to get this fairly complex website responsive. in order to do this, the developer would change as little html as possible, as this would mean rewriting components all over the place. yes, we wanted to see that happen, but it wasn’t feasible. so i used the existing html whenever possible, and i cringed while doing it, because holy shit, this html (with all due respect to the developers; you know cmses). but it was practical and allowed the developer to reuse a lot of my css. which was a lot more css than i would have had to write if i were able to rewrite the html. could i have said no? sure, but i wouldn’t have been helping anyone, least of all myself, by doing so. this client has interesting challenges, and i wasn’t willing to just say no to four months of work with them because of a tight deadline. another issue i had to deal with was working in weekly (!) sprints. coming up with responsive strategies for each component of certain screen types and then prototyping them in one week was not easy. in order to do it without creating conflicts and still get things done on time, i had to namespace each logical group of components, like this: .product { /* styles, including media queries, here. */ } .account { /* same idea, different logical group */ } while doing this for each round of logical prototype groups allowed me to avoid conflicts with prototypes i had done or those i would do in future sprints, it made me repeat myself across those blocks, since i had literally no time to constantly refactor. and it was not my job to create the front-end code, though i knew the developer was using and altering snippets from my css to save time. result: my comps had way too much css. could i have an approach like bem? yes, i could have. but since some css methodologies eschew inheritance, i lose a huge time benefit. and remember, html changes were required to be minimal, and that’s not feasible when choosing a css approach that involves moving the dirty work into class attributes. what’s your goal? in the project above, the thing that kept me sane was focusing on the specific reason i was asked to join the project: to decide how everything should look and work responsively, and to visualize this for stakeholders and the developers, in such a way that they could actually experience it on actual devices so that it is clear what needs to be done. that had to be my focus. we finished the work in two months with just a few people. and a phase two was planned to go in and refactor, to improve lots of things, including performance. that’s the right time for optimizing html and css, and improving things like performance. ideal? certainly not. realistic based on the needs of the client? absolutely. this particular client sees their website (100% of their revenue comes from the website) as a process rather than a product. i think that’s a healthy way of looking at things. it means they have a responsive site, built within two months time, that customers could enjoy right away. that site, even with sub-optimal html and css, performed twice as well as the previous desktop version. customers don’t care about what the source looks like, and phase two, almost underway, is intended for code optimization and other quality improvements. messy, isn’t it? it certainly is. but really, it’s often the reality of a service business. it’s natural to try and find processes or approaches that work for every project, but you won’t. and they don’t. embracing this fact is one step toward pleasing clients, and also helps deal with the frustration that we can’t always make everything as perfect as we’d like it to be. of course, that shouldn’t keep us from trying. i start every project with a lofty goal of achieving perfection. i’ve never reached it. i make mistakes all the time. i look back and immediately see things i would have done differently. i try to learn from those mistakes. i try to remember that making those mistakes and dealing with the messy reality of the work, while still trying to do my best work, puts me on a path of constant improvement. we need to give ourselves a break. i hope i’m learning more and becoming just slightly better every day. i hope you are, too. in our line of work, where everything moves so quickly, that’s something to be happy about. here’s to a better imperfect year than the last one. view all 6 comments choosing between min-width and max-width media queries december 23, 2015css, design, html, layout, mobile, responsive, web standardsstephen i’m often asked a variation of the following question: should i use min-width or max-width media queries? the obvious answer is, of course, “yes”. but you know what they’re asking: which of the two is better? those for whom responsive design has become second nature might find it an odd question, and will know that the answer is, “it depends”. but having seen lots of responsive design implementations, it’s clear to me that many designers and developers aren’t quite sure. and i’m happy to share my own opinion of what “it depends” means regarding this particular question. desktop first and max-width there’s a decent number of designers/developers that still think of “the desktop” as their primary design manifestation, with other (generally smaller) sizes as secondary; often these appear as afterthoughts, since there can be significant visual clues as to the amount of effort that has gone into these other screen sizes when compared to their desktop counterparts. often, when one examines the css of these sites, `max-width` is the media feature of choice. this makes sense. if a design is built desktop-first, then all the css for the desktop-ish version of the design has been written, and must be overridden with more css for any other breakpoints. if a given desktop-ish width is our baseline and we are unwilling or unable to refactor our css, then it seems logical to override what is now our base css for all viewport widths with those we only want to apply to smaller widths. this can lead to a situation i’ve often joked about: writing styles only to undo them later. this is an example i often use (assume .related takes the form of a sidebar): .content { width: 60%; } .related { width: 40%; } @media screen and (max-width: 37.4em) { .content, .related { width: 100%; } } the above example omits a lot, but i’m sure you get the idea. this approach, when used over a bunch of components, can greatly increase the amount of css needed to complete the project. but the main problem is how illogical it is, because when embracing the fact the block-level elements are 100% of their parent by default, then the following makes much more sense: @media screen and (min-width: 37.5em) { .content { width: 60%; } .related { width: 40%; } } here, we’re making use of the default state of block-level elements, and overriding them when they need to change from the default. again, it might seem clear to some readers, but it doesn’t take looking at the source of many websites before you understand why i’m clarifying it here. using max-width against your better judgement there are a couple of reasons why, even when you know better, you might deliberately choose to use an approach similar to max-width approach above: you’re a developer and you received desktop-only, desktop-first, or other-sizes-as-an-afterthought comps from the designer. how can you know? if you’ve only designed or received designs for desktop-ish widths, this is what you’re dealing with. if you’ve got nice detailed desktop-ish designs with a few “mobile” or “tablet” examples thrown in there, this is what you’re dealing with. in these cases, may the max-width be with you, unless you have a budget and/or schedule that allows you to refactor during development. you’re making an existing website responsive, and the existing css is design baggage you’ve inherited and cannot change, for whatever reason. you’re compensating for the fact that we don’t currently have element queries, and you’re handling this with css instead of using a javascript polyfill for a non-existent spec. so, what’s the best to use? here’s my clarification of “it depends” for this particular question. and remember it’s just my own opinion based on my own experiences: look at default display of a given element. if you have to override this default for smaller screens, use max-width. if the default is usable on small screens, use min-width, and only when the element needs to deviate from the default. and of course, i recommend letting the content determine where that happens. a good example of using max-width to override an element’s default display so that it works better on smaller screens is when using tables. imagine a table that contains too much content to display in its default form on small screens. one approach might be: @media only screen and (max-width: 30em) { .big-table tr, .big-table td { display: block; } } this turns each row (and cell) into a block on narrow screens. the table can become quite long vertically and more styling is usually required, but it’s often better than the back-and-forth horizontal scrolling that would otherwise be required to read the content. in this case, it makes all the sense in the world to leave the table in default form, except for in browsers that understand the media query and where the screen is no larger than, in this case, 30em. other elements (i would venture to say most other elements) that have defaults that work fine on smaller screens, only need changing when necessary on larger screens; using min-width is then a solid choice. in short: let element defaults help determine which media feature to use in your media queries. thanks to brad frost for reviewing this. he also has a post with related topics. posts navigation ← older posts buy my book the book discusses why web design workflow is the way it is, the challenges relating to responsive design, and presents a different view on current processes and deliverables. order the book read a sample chapter recently how i prepare data-merged designs for print using open source software reality is messy choosing between min-width and max-width media queries put the “designers should code” debate to rest on diverse speaker lineups at conferences categoriescategories select category accessibility babble book review browsers business copyright creativity css design events html humor layout mobile presentations productivity psychology redesign responsive satire sightings vim visualization web web standards proudly powered by wordpress


Here you find all texts from your page as Google (googlebot) and others search engines seen it.

Words density analysis:

Numbers of all words: 4118

One word

Two words phrases

Three words phrases

the - 6.1% (251)
and - 2.99% (123)
you - 1.77% (73)
for - 1.77% (73)
that - 1.38% (57)
all - 1.26% (52)
this - 1.24% (51)
with - 1.12% (46)
file - 1.07% (44)
work - 1.04% (43)
our - 1.02% (42)
inkscape - 0.87% (36)
are - 0.85% (35)
design - 0.85% (35)
use - 0.83% (34)
one - 0.78% (32)
here - 0.78% (32)
from - 0.7% (29)
out - 0.7% (29)
merge - 0.68% (28)
csv - 0.68% (28)
have - 0.68% (28)
width - 0.66% (27)
per - 0.63% (26)
pdf - 0.61% (25)
not - 0.61% (25)
thing - 0.53% (22)
able - 0.51% (21)
but - 0.51% (21)
css - 0.51% (21)
badge - 0.51% (21)
using - 0.46% (19)
can - 0.44% (18)
inkscape_merge - 0.44% (18)
what - 0.41% (17)
like - 0.41% (17)
ever - 0.41% (17)
any - 0.41% (17)
time - 0.41% (17)
was - 0.39% (16)
row - 0.39% (16)
some - 0.39% (16)
svg - 0.36% (15)
files - 0.36% (15)
only - 0.34% (14)
there - 0.34% (14)
it’s - 0.34% (14)
print - 0.34% (14)
process - 0.34% (14)
need - 0.34% (14)
now - 0.34% (14)
end - 0.34% (14)
each - 0.34% (14)
two - 0.34% (14)
batch - 0.32% (13)
line - 0.32% (13)
command - 0.32% (13)
screen - 0.32% (13)
would - 0.32% (13)
when - 0.32% (13)
responsive - 0.32% (13)
into - 0.32% (13)
default - 0.32% (13)
other - 0.32% (13)
too - 0.32% (13)
put - 0.32% (13)
make - 0.32% (13)
max-width - 0.29% (12)
more - 0.29% (12)
will - 0.29% (12)
desktop - 0.29% (12)
get - 0.29% (12)
you’re - 0.29% (12)
name - 0.29% (12)
take - 0.29% (12)
these - 0.29% (12)
how - 0.29% (12)
media - 0.29% (12)
should - 0.29% (12)
your - 0.29% (12)
source - 0.29% (12)
might - 0.29% (12)
web - 0.27% (11)
see - 0.27% (11)
badges - 0.27% (11)
them - 0.27% (11)
way - 0.27% (11)
html - 0.27% (11)
project - 0.27% (11)
data - 0.27% (11)
every - 0.27% (11)
which - 0.27% (11)
had - 0.24% (10)
since - 0.24% (10)
png - 0.24% (10)
step - 0.24% (10)
things - 0.24% (10)
ruby - 0.24% (10)
gem - 0.24% (10)
developer - 0.24% (10)
than - 0.24% (10)
export - 0.24% (10)
script - 0.24% (10)
often - 0.24% (10)
their - 0.24% (10)
don’t - 0.22% (9)
tool - 0.22% (9)
lock - 0.22% (9)
i’m - 0.22% (9)
fact - 0.22% (9)
own - 0.22% (9)
table - 0.22% (9)
they - 0.22% (9)
look - 0.22% (9)
element - 0.22% (9)
form - 0.22% (9)
could - 0.22% (9)
doing - 0.22% (9)
those - 0.22% (9)
lot - 0.22% (9)
about - 0.22% (9)
know - 0.22% (9)
has - 0.22% (9)
stephen - 0.22% (9)
read - 0.19% (8)
also - 0.19% (8)
follow - 0.19% (8)
file. - 0.19% (8)
deal - 0.19% (8)
content - 0.19% (8)
you’ve - 0.19% (8)
instead - 0.19% (8)
where - 0.19% (8)
approach - 0.19% (8)
then - 0.19% (8)
tools - 0.19% (8)
over - 0.19% (8)
width: - 0.19% (8)
making - 0.17% (7)
here’s - 0.17% (7)
is, - 0.17% (7)
even - 0.17% (7)
work, - 0.17% (7)
rows - 0.17% (7)
most - 0.17% (7)
side - 0.17% (7)
open - 0.17% (7)
because - 0.17% (7)
block - 0.17% (7)
many - 0.17% (7)
small - 0.17% (7)
screens - 0.17% (7)
that’s - 0.17% (7)
client - 0.17% (7)
better - 0.17% (7)
were - 0.17% (7)
single - 0.17% (7)
printer - 0.15% (6)
takes - 0.15% (6)
part - 0.15% (6)
convert - 0.15% (6)
example - 0.15% (6)
want - 0.15% (6)
field - 0.15% (6)
view - 0.15% (6)
min-width - 0.15% (6)
book - 0.15% (6)
separate - 0.15% (6)
try - 0.15% (6)
queries - 0.15% (6)
run - 0.15% (6)
order - 0.15% (6)
i’ve - 0.15% (6)
artwork - 0.15% (6)
people - 0.15% (6)
few - 0.15% (6)
case - 0.15% (6)
done - 0.15% (6)
who - 0.15% (6)
required - 0.15% (6)
reality - 0.15% (6)
output - 0.15% (6)
messy - 0.15% (6)
everything - 0.15% (6)
following - 0.15% (6)
indesign - 0.15% (6)
me, - 0.15% (6)
let - 0.15% (6)
directory - 0.15% (6)
type - 0.15% (6)
generate - 0.15% (6)
code - 0.12% (5)
martijn - 0.12% (5)
long - 0.12% (5)
logical - 0.12% (5)
been - 0.12% (5)
well - 0.12% (5)
above - 0.12% (5)
post - 0.12% (5)
perfect - 0.12% (5)
projects - 0.12% (5)
ppk - 0.12% (5)
krijn - 0.12% (5)
related - 0.12% (5)
workflow - 0.12% (5)
text - 0.12% (5)
ghostscript - 0.12% (5)
involve - 0.12% (5)
help - 0.12% (5)
just - 0.12% (5)
allow - 0.12% (5)
first - 0.12% (5)
component - 0.12% (5)
does - 0.12% (5)
website - 0.12% (5)
sure - 0.12% (5)
software - 0.12% (5)
smaller - 0.12% (5)
combine - 0.12% (5)
draw - 0.12% (5)
sourcefile - 0.12% (5)
developers - 0.12% (5)
seem - 0.12% (5)
commas - 0.12% (5)
create - 0.12% (5)
change - 0.12% (5)
linux - 0.12% (5)
(and - 0.12% (5)
give - 0.12% (5)
right - 0.12% (5)
while - 0.12% (5)
though - 0.12% (5)
much - 0.12% (5)
pdfs - 0.12% (5)
used - 0.12% (5)
main - 0.12% (5)
clear - 0.1% (4)
sometimes - 0.1% (4)
comps - 0.1% (4)
existing - 0.1% (4)
say - 0.1% (4)
needs - 0.1% (4)
months - 0.1% (4)
round - 0.1% (4)
remember - 0.1% (4)
course, - 0.1% (4)
variable - 0.1% (4)
hand - 0.1% (4)
job - 0.1% (4)
current - 0.1% (4)
containing - 0.1% (4)
method - 0.1% (4)
css, - 0.1% (4)
column - 0.1% (4)
replace - 0.1% (4)
combining - 0.1% (4)
product - 0.1% (4)
csv. - 0.1% (4)
components - 0.1% (4)
base - 0.1% (4)
svgs - 0.1% (4)
designs - 0.1% (4)
doesn’t - 0.1% (4)
there’s - 0.1% (4)
made - 0.1% (4)
reason - 0.1% (4)
refactor - 0.1% (4)
generated - 0.1% (4)
older - 0.1% (4)
i’ll - 0.1% (4)
we’re - 0.1% (4)
you’ll - 0.1% (4)
it. - 0.1% (4)
display - 0.1% (4)
specific - 0.1% (4)
visual - 0.1% (4)
complex - 0.1% (4)
gui - 0.1% (4)
elements - 0.1% (4)
lots - 0.1% (4)
particular - 0.1% (4)
ready - 0.1% (4)
exactly - 0.1% (4)
.related - 0.1% (4)
fairly - 0.1% (4)
different - 0.1% (4)
line. - 0.1% (4)
still - 0.1% (4)
bit - 0.1% (4)
me. - 0.1% (4)
best - 0.1% (4)
desktop-ish - 0.1% (4)
pdf. - 0.1% (4)
@media - 0.07% (3)
posts - 0.07% (3)
worked - 0.07% (3)
around - 0.07% (3)
names - 0.07% (3)
processes - 0.07% (3)
with. - 0.07% (3)
number - 0.07% (3)
why - 0.07% (3)
outputfile - 0.07% (3)
actual - 0.07% (3)
stakeholders - 0.07% (3)
100% - 0.07% (3)
after - 0.07% (3)
datafile - 0.07% (3)
sourcefile.svg - 0.07% (3)
exported - 0.07% (3)
learn - 0.07% (3)
here. - 0.07% (3)
works - 0.07% (3)
free - 0.07% (3)
group - 0.07% (3)
this, - 0.07% (3)
300 - 0.07% (3)
once - 0.07% (3)
sense - 0.07% (3)
certain - 0.07% (3)
combined - 0.07% (3)
problem - 0.07% (3)
system - 0.07% (3)
here, - 0.07% (3)
set - 0.07% (3)
projects. - 0.07% (3)
memory - 0.07% (3)
pngs - 0.07% (3)
time. - 0.07% (3)
except - 0.07% (3)
choosing - 0.07% (3)
`ls` - 0.07% (3)
asked - 0.07% (3)
writing - 0.07% (3)
screens, - 0.07% (3)
improve - 0.07% (3)
find - 0.07% (3)
first, - 0.07% (3)
same - 0.07% (3)
said - 0.07% (3)
designers - 0.07% (3)
weird - 0.07% (3)
sites - 0.07% (3)
override - 0.07% (3)
mean - 0.07% (3)
design, - 0.07% (3)
inkscape, - 0.07% (3)
built - 0.07% (3)
may - 0.07% (3)
css. - 0.07% (3)
good - 0.07% (3)
responsive, - 0.07% (3)
“it - 0.07% (3)
already - 0.07% (3)
between - 0.07% (3)
result - 0.07% (3)
replaced - 0.07% (3)
imagemagick - 0.07% (3)
variables - 0.07% (3)
layout - 0.07% (3)
last - 0.07% (3)
depends” - 0.07% (3)
before - 0.07% (3)
receive - 0.07% (3)
business - 0.07% (3)
makes - 0.07% (3)
sizes - 0.07% (3)
mobile - 0.07% (3)
widths - 0.07% (3)
file, - 0.07% (3)
conferences - 0.07% (3)
three - 0.07% (3)
rest - 0.07% (3)
start - 0.07% (3)
is. - 0.07% (3)
write - 0.07% (3)
mistakes - 0.07% (3)
back - 0.07% (3)
dealing - 0.07% (3)
merged - 0.07% (3)
enough - 0.07% (3)
.content - 0.07% (3)
simple - 0.07% (3)
commas, - 0.07% (3)
clients - 0.07% (3)
design. - 0.07% (3)
default. - 0.07% (3)
determine - 0.07% (3)
types - 0.05% (2)
willing - 0.05% (2)
events - 0.05% (2)
challenges - 0.05% (2)
review - 0.05% (2)
week - 0.05% (2)
yes, - 0.05% (2)
larger - 0.05% (2)
allowed - 0.05% (2)
select - 0.05% (2)
fine - 0.05% (2)
it, - 0.05% (2)
wasn’t - 0.05% (2)
babble - 0.05% (2)
world - 0.05% (2)
practical - 0.05% (2)
respect - 0.05% (2)
defaults - 0.05% (2)
coming - 0.05% (2)
browsers - 0.05% (2)
without - 0.05% (2)
feature - 0.05% (2)
conflicts - 0.05% (2)
given - 0.05% (2)
intended - 0.05% (2)
styles - 0.05% (2)
service - 0.05% (2)
embracing - 0.05% (2)
goal - 0.05% (2)
never - 0.05% (2)
trying - 0.05% (2)
constant - 0.05% (2)
hope - 0.05% (2)
happy - 0.05% (2)
one. - 0.05% (2)
variation - 0.05% (2)
60%; - 0.05% (2)
obvious - 0.05% (2)
answer - 0.05% (2)
become - 0.05% (2)
second - 0.05% (2)
version - 0.05% (2)
quite - 0.05% (2)
opinion - 0.05% (2)
question. - 0.05% (2)
desktop-first, - 0.05% (2)
amount - 0.05% (2)
choice. - 0.05% (2)
customers - 0.05% (2)
site, - 0.05% (2)
time, - 0.05% (2)
experience - 0.05% (2)
case, - 0.05% (2)
.big-table - 0.05% (2)
components, - 0.05% (2)
including - 0.05% (2)
screens. - 0.05% (2)
queries, - 0.05% (2)
its - 0.05% (2)
prototype - 0.05% (2)
myself - 0.05% (2)
feasible - 0.05% (2)
what’s - 0.05% (2)
phase - 0.05% (2)
40%; - 0.05% (2)
whatever - 0.05% (2)
performance. - 0.05% (2)
budget - 0.05% (2)
certainly - 0.05% (2)
based - 0.05% (2)
think - 0.05% (2)
looking - 0.05% (2)
understand - 0.05% (2)
means - 0.05% (2)
block-level - 0.05% (2)
(max-width: - 0.05% (2)
received - 0.05% (2)
uses - 0.05% (2)
possible, - 0.05% (2)
install - 0.05% (2)
artwork, - 0.05% (2)
refer - 0.05% (2)
speaker - 0.05% (2)
tools, - 0.05% (2)
utf-8 - 0.05% (2)
os. - 0.05% (2)
so, - 0.05% (2)
themselves - 0.05% (2)
choose - 0.05% (2)
typing - 0.05% (2)
printer. - 0.05% (2)
badge. - 0.05% (2)
data. - 0.05% (2)
attendee - 0.05% (2)
let’s - 0.05% (2)
pdf, - 0.05% (2)
linux, - 0.05% (2)
anyone - 0.05% (2)
printers - 0.05% (2)
twitter - 0.05% (2)
company - 0.05% (2)
this: - 0.05% (2)
csvcolumnname - 0.05% (2)
literally - 0.05% (2)
whom - 0.05% (2)
like, - 0.05% (2)
chance - 0.05% (2)
colleagues - 0.05% (2)
show - 0.05% (2)
unless - 0.05% (2)
creating - 0.05% (2)
gets - 0.05% (2)
out, - 0.05% (2)
machine. - 0.05% (2)
way, - 0.05% (2)
written - 0.05% (2)
interface - 0.05% (2)
utf-16 - 0.05% (2)
inkscape. - 0.05% (2)
drawing - 0.05% (2)
space. - 0.05% (2)
really, - 0.05% (2)
haven’t - 0.05% (2)
pretty - 0.05% (2)
kind - 0.05% (2)
flexibility - 0.05% (2)
function - 0.05% (2)
mail - 0.05% (2)
popular - 0.05% (2)
data-merged - 0.05% (2)
prepare - 0.05% (2)
skip - 0.05% (2)
menu - 0.05% (2)
text, - 0.05% (2)
involves - 0.05% (2)
comfortable - 0.05% (2)
essentially - 0.05% (2)
along - 0.05% (2)
probably - 0.05% (2)
unable - 0.05% (2)
only, - 0.05% (2)
else - 0.05% (2)
forget - 0.05% (2)
couple - 0.05% (2)
quickly - 0.05% (2)
previous - 0.05% (2)
kept - 0.05% (2)
note - 0.05% (2)
finished - 0.05% (2)
copy - 0.05% (2)
process. - 0.05% (2)
said, - 0.05% (2)
zero - 0.05% (2)
@stephenhay - 0.05% (2)
be. - 0.05% (2)
year - 0.05% (2)
easy - 0.05% (2)
like. - 0.05% (2)
colors - 0.05% (2)
times, - 0.05% (2)
html, - 0.05% (2)
involved - 0.05% (2)
otherwise - 0.05% (2)
day - 0.05% (2)
combined.pdf - 0.05% (2)
2mb - 0.05% (2)
list - 0.05% (2)
case. - 0.05% (2)
input - 0.05% (2)
turns - 0.05% (2)
info - 0.05% (2)
demo - 0.05% (2)
two, - 0.05% (2)
pngs, - 0.05% (2)
during - 0.05% (2)
knew - 0.05% (2)
deliverable - 0.05% (2)
task - 0.05% (2)
responsive. - 0.05% (2)
can’t - 0.05% (2)
development - 0.05% (2)
and/or - 0.05% (2)
link - 0.05% (2)
constraints. - 0.05% (2)
tight - 0.05% (2)
limited - 0.05% (2)
focusing - 0.05% (2)
outside - 0.05% (2)
approach, - 0.05% (2)
comment - 0.05% (2)
multiple - 0.05% (2)
pdfs, - 0.05% (2)
quirksmode - 0.05% (2)
figure - 0.05% (2)
`block - 0.05% (2)
batch/badge_%d.pdf - 0.05% (2)
error - 0.05% (2)
future - 0.05% (2)
out. - 0.05% (2)
something - 0.05% (2)
parse_in_order' - 0.05% (2)
changing - 0.05% (2)
getting - 0.05% (2)
caveat - 0.05% (2)
@martijnvduuren - 0.05% (2)
@krijnhoetmer - 0.05% (2)
qontent - 0.05% (2)
@ppk - 0.05% (2)
/usr/lib/ruby/1.9.1/optparse.rb:1360:in - 0.05% (2)
/usr/lib/ruby/1.9.1/optparse.rb:1347:in - 0.05% (2)
generally - 0.05% (2)
entered - 0.05% (2)
bunch - 0.05% (2)
dpi - 0.05% (2)
always - 0.05% (2)
stuff - 0.05% (2)
allows - 0.05% (2)
leave - 0.05% (2)
little - 0.05% (2)
datafile.csv - 0.05% (2)
(required)>' - 0.05% (2)
seems - 0.05% (2)
double-quotes - 0.05% (2)
in-field - 0.05% (2)
fields - 0.05% (2)
currently - 0.05% (2)
workaround - 0.05% (2)
/usr/local/bin/inkscape_merge:23:in - 0.05% (2)
standards - 0.05% (2)
in the - 0.53% (22)
of the - 0.46% (19)
if you - 0.27% (11)
this is - 0.27% (11)
at the - 0.27% (11)
the csv - 0.27% (11)
and the - 0.24% (10)
into a - 0.22% (9)
that i - 0.22% (9)
for each - 0.22% (9)
have a - 0.19% (8)
csv file - 0.19% (8)
with the - 0.19% (8)
to the - 0.17% (7)
from the - 0.17% (7)
a single - 0.17% (7)
i would - 0.17% (7)
have to - 0.17% (7)
is the - 0.17% (7)
single pdf - 0.17% (7)
i have - 0.15% (6)
command line - 0.15% (6)
instead of - 0.15% (6)
but it - 0.15% (6)
work in - 0.15% (6)
all the - 0.15% (6)
with a - 0.15% (6)
the developer - 0.15% (6)
should be - 0.12% (5)
since i - 0.12% (5)
need to - 0.12% (5)
the default - 0.12% (5)
on you - 0.12% (5)
the command - 0.12% (5)
can be - 0.12% (5)
the process - 0.12% (5)
the following - 0.12% (5)
{ width: - 0.12% (5)
if you’re - 0.12% (5)
for the - 0.12% (5)
media queries - 0.12% (5)
lots of - 0.1% (4)
what the - 0.1% (4)
separate file - 0.1% (4)
side of - 0.1% (4)
my own - 0.1% (4)
open source - 0.1% (4)
there are - 0.1% (4)
to use - 0.1% (4)
you know - 0.1% (4)
to create - 0.1% (4)
if you’ve - 0.1% (4)
as the - 0.1% (4)
put the - 0.1% (4)
row in - 0.1% (4)
there’s a - 0.1% (4)
you can - 0.1% (4)
for in - 0.1% (4)
had to - 0.1% (4)
each row - 0.1% (4)
of course, - 0.1% (4)
on your - 0.1% (4)
batch directory - 0.1% (4)
the above - 0.07% (3)
i draw - 0.07% (3)
and max-width - 0.07% (3)
work for - 0.07% (3)
css for - 0.07% (3)
those files - 0.07% (3)
the artwork - 0.07% (3)
in their - 0.07% (3)
designs for - 0.07% (3)
too much - 0.07% (3)
it was - 0.07% (3)
a good - 0.07% (3)
the name - 0.07% (3)
deal with - 0.07% (3)
and to - 0.07% (3)
the work - 0.07% (3)
people who - 0.07% (3)
the printer - 0.07% (3)
the default. - 0.07% (3)
be replaced - 0.07% (3)
dealing with - 0.07% (3)
to override - 0.07% (3)
file with - 0.07% (3)
to have - 0.07% (3)
to pdf - 0.07% (3)
will be - 0.07% (3)
this particular - 0.07% (3)
two months - 0.07% (3)
want to - 0.07% (3)
html and - 0.07% (3)
is messy - 0.07% (3)
file for - 0.07% (3)
it out - 0.07% (3)
to get - 0.07% (3)
do this - 0.07% (3)
responsive design - 0.07% (3)
you could - 0.07% (3)
max-width media - 0.07% (3)
the design - 0.07% (3)
the files - 0.07% (3)
in one - 0.07% (3)
that it - 0.07% (3)
from my - 0.07% (3)
work on - 0.07% (3)
default for - 0.07% (3)
artwork in - 0.07% (3)
screen and - 0.07% (3)
for me - 0.07% (3)
in this - 0.07% (3)
“it depends” - 0.07% (3)
it works - 0.07% (3)
it’s not - 0.07% (3)
you have - 0.07% (3)
might be - 0.07% (3)
the time - 0.07% (3)
command line. - 0.07% (3)
to make - 0.07% (3)
the only - 0.07% (3)
reality is - 0.07% (3)
required to - 0.07% (3)
to merge - 0.07% (3)
their own - 0.07% (3)
using a - 0.07% (3)
for print - 0.05% (2)
was to - 0.05% (2)
this for - 0.05% (2)
this case, - 0.05% (2)
it’s often - 0.05% (2)
an existing - 0.05% (2)
the thing - 0.05% (2)
the table - 0.05% (2)
my job - 0.05% (2)
on the - 0.05% (2)
like this: - 0.05% (2)
source software - 0.05% (2)
on smaller - 0.05% (2)
so that - 0.05% (2)
between min-width - 0.05% (2)
needs to - 0.05% (2)
we need - 0.05% (2)
to leave - 0.05% (2)
how everything - 0.05% (2)
see that - 0.05% (2)
could i - 0.05% (2)
i prepare - 0.05% (2)
i used - 0.05% (2)
in order - 0.05% (2)
the existing - 0.05% (2)
while doing - 0.05% (2)
the book - 0.05% (2)
in two - 0.05% (2)
of all - 0.05% (2)
of components, - 0.05% (2)
of work - 0.05% (2)
using open - 0.05% (2)
data-merged designs - 0.05% (2)
is, the - 0.05% (2)
then a - 0.05% (2)
logical group - 0.05% (2)
had two - 0.05% (2)
built with - 0.05% (2)
other elements - 0.05% (2)
when the - 0.05% (2)
phase two - 0.05% (2)
over a - 0.05% (2)
using max-width - 0.05% (2)
to some - 0.05% (2)
to change - 0.05% (2)
use of - 0.05% (2)
of their - 0.05% (2)
block-level elements - 0.05% (2)
it is, - 0.05% (2)
clear to - 0.05% (2)
particular question. - 0.05% (2)
the main - 0.05% (2)
bunch of - 0.05% (2)
the amount - 0.05% (2)
and you - 0.05% (2)
the css - 0.05% (2)
media feature - 0.05% (2)
and (max-width: - 0.05% (2)
@media screen - 0.05% (2)
more css - 0.05% (2)
40%; } - 0.05% (2)
width is - 0.05% (2)
} .related - 0.05% (2)
and we - 0.05% (2)
width: 60%; - 0.05% (2)
to refactor - 0.05% (2)
an approach - 0.05% (2)
is what - 0.05% (2)
based on - 0.05% (2)
would have - 0.05% (2)
of using - 0.05% (2)
.content { - 0.05% (2)
smaller screens, - 0.05% (2)
than a - 0.05% (2)
looking at - 0.05% (2)
the previous - 0.05% (2)
often the - 0.05% (2)
reality of - 0.05% (2)
that work - 0.05% (2)
and they - 0.05% (2)
we can’t - 0.05% (2)
try to - 0.05% (2)
you’re dealing - 0.05% (2)
default display - 0.05% (2)
look at - 0.05% (2)
remember that - 0.05% (2)
and remember - 0.05% (2)
the best - 0.05% (2)
dealing with. - 0.05% (2)
than the - 0.05% (2)
choosing between - 0.05% (2)
min-width and - 0.05% (2)
what you’re - 0.05% (2)
use min-width - 0.05% (2)
answer is, - 0.05% (2)
prepare data-merged - 0.05% (2)
in which - 0.05% (2)
outside of - 0.05% (2)
and data - 0.05% (2)
pdf. i - 0.05% (2)
pdf to - 0.05% (2)
note that - 0.05% (2)
or more - 0.05% (2)
doing this - 0.05% (2)
fact that - 0.05% (2)
the same - 0.05% (2)
you might - 0.05% (2)
to work - 0.05% (2)
tools are - 0.05% (2)
is not - 0.05% (2)
than doing - 0.05% (2)
are made - 0.05% (2)
ruby gem - 0.05% (2)
command to - 0.05% (2)
works fairly - 0.05% (2)
i’m not - 0.05% (2)
is simple - 0.05% (2)
more complex - 0.05% (2)
doing the - 0.05% (2)
a ruby - 0.05% (2)
separate files - 0.05% (2)
merge all - 0.05% (2)
you generated - 0.05% (2)
single pdf, - 0.05% (2)
exported those - 0.05% (2)
linux, there’s - 0.05% (2)
is already - 0.05% (2)
files into - 0.05% (2)
type one - 0.05% (2)
generated into - 0.05% (2)
with this - 0.05% (2)
print using - 0.05% (2)
i’m often - 0.05% (2)
make these - 0.05% (2)
mail merge - 0.05% (2)
csv files - 0.05% (2)
thing i - 0.05% (2)
since inkscape - 0.05% (2)
svgs are - 0.05% (2)
using the - 0.05% (2)
that said, - 0.05% (2)
by the - 0.05% (2)
is fairly - 0.05% (2)
use the - 0.05% (2)
workflow is - 0.05% (2)
a file - 0.05% (2)
what i - 0.05% (2)
that’s the - 0.05% (2)
a couple - 0.05% (2)
might find - 0.05% (2)
not work - 0.05% (2)
a linux - 0.05% (2)
out of - 0.05% (2)
might seem - 0.05% (2)
process is - 0.05% (2)
draw my - 0.05% (2)
i type - 0.05% (2)
one command - 0.05% (2)
to generate - 0.05% (2)
files you - 0.05% (2)
pdf, if - 0.05% (2)
time constraints. - 0.05% (2)
combining multiple - 0.05% (2)
in your - 0.05% (2)
that row - 0.05% (2)
file and - 0.05% (2)
containing commas - 0.05% (2)
i also - 0.05% (2)
a caveat - 0.05% (2)
you to - 0.05% (2)
and these - 0.05% (2)
to png - 0.05% (2)
this should - 0.05% (2)
give you - 0.05% (2)
a bunch - 0.05% (2)
combining the - 0.05% (2)
output of - 0.05% (2)
this will - 0.05% (2)
the output - 0.05% (2)
is how - 0.05% (2)
kind of - 0.05% (2)
of this - 0.05% (2)
like to - 0.05% (2)
the right - 0.05% (2)
to deal - 0.05% (2)
are people - 0.05% (2)
who work - 0.05% (2)
their projects - 0.05% (2)
are not - 0.05% (2)
most projects. - 0.05% (2)
many of - 0.05% (2)
many files - 0.05% (2)
csv file, - 0.05% (2)
you’ve exported - 0.05% (2)
you’ll have - 0.05% (2)
inkscape_merge does - 0.05% (2)
badges are - 0.05% (2)
made in - 0.05% (2)
then i - 0.05% (2)
make a - 0.05% (2)
about what - 0.05% (2)
they need - 0.05% (2)
for whom - 0.05% (2)
we like - 0.05% (2)
look like - 0.05% (2)
i were - 0.05% (2)
when i - 0.05% (2)
caveat about - 0.05% (2)
csv that - 0.05% (2)
where sourcefile - 0.05% (2)
example of - 0.05% (2)
-o batch/badge_%d.pdf - 0.05% (2)
from /usr/lib/ruby/1.9.1/optparse.rb:1360:in - 0.05% (2)
parse_in_order' from - 0.05% (2)
from /usr/lib/ruby/1.9.1/optparse.rb:1347:in - 0.05% (2)
from /usr/local/bin/inkscape_merge:23:in - 0.05% (2)
that uses - 0.05% (2)
rows containing - 0.05% (2)
make sure - 0.05% (2)
inkscape_merge is - 0.05% (2)
is then - 0.05% (2)
-f sourcefile.svg - 0.05% (2)
-d datafile.csv - 0.05% (2)
web standards - 0.05% (2)
a single pdf - 0.17% (7)
into a single - 0.17% (7)
in the csv - 0.17% (7)
the command line - 0.12% (5)
the batch directory - 0.1% (4)
this is a - 0.1% (4)
.related { width: - 0.07% (3)
the csv file - 0.07% (3)
for each row - 0.07% (3)
each row in - 0.07% (3)
in the batch - 0.07% (3)
in the csv. - 0.07% (3)
in their own - 0.07% (3)
and max-width media - 0.05% (2)
i would have - 0.05% (2)
stakeholders and the - 0.05% (2)
to deal with - 0.05% (2)
many of us - 0.05% (2)
not most projects. - 0.05% (2)
in two months - 0.05% (2)
we need to - 0.05% (2)
choosing between min-width - 0.05% (2)
how i prepare - 0.05% (2)
this particular question. - 0.05% (2)
my own opinion - 0.05% (2)
this is what - 0.05% (2)
using open source - 0.05% (2)
designs for print - 0.05% (2)
i prepare data-merged - 0.05% (2)
in this case, - 0.05% (2)
you have to - 0.05% (2)
is what you’re - 0.05% (2)
you’re dealing with. - 0.05% (2)
they need to - 0.05% (2)
are people who - 0.05% (2)
width: 60%; } - 0.05% (2)
100% of their - 0.05% (2)
{ width: 40%; - 0.05% (2)
60%; } .related - 0.05% (2)
.content { width: - 0.05% (2)
this is an - 0.05% (2)
the amount of - 0.05% (2)
their projects are - 0.05% (2)
a bunch of - 0.05% (2)
projects are not - 0.05% (2)
linux, there’s a - 0.05% (2)
print using open - 0.05% (2)
svgs are text, - 0.05% (2)
but it works - 0.05% (2)
a couple of - 0.05% (2)
i draw my - 0.05% (2)
one command to - 0.05% (2)
i type one - 0.05% (2)
badges are made - 0.05% (2)
a ruby gem - 0.05% (2)
merge all the - 0.05% (2)
files you generated - 0.05% (2)
pdf, if you’ve - 0.05% (2)
exported those files - 0.05% (2)
is already on - 0.05% (2)
people who work - 0.05% (2)
or linux, there’s - 0.05% (2)
a good chance - 0.05% (2)
on your machine. - 0.05% (2)
are made in - 0.05% (2)
a separate file - 0.05% (2)
of the way - 0.05% (2)
if i were - 0.05% (2)
to have a - 0.05% (2)
csv that uses - 0.05% (2)
fields containing commas - 0.05% (2)
allows you to - 0.05% (2)
data-merged designs for - 0.05% (2)
to do this - 0.05% (2)
the output of - 0.05% (2)
min-width and max-width - 0.05% (2)

Here you can find chart of all your popular one, two and three word phrases. Google and others search engines means your page is about words you use frequently.

Copyright © 2015-2016 hupso.pl. All rights reserved. FB | +G | Twitter

Hupso.pl jest serwisem internetowym, w którym jednym kliknieciem możesz szybko i łatwo sprawdź stronę www pod kątem SEO. Oferujemy darmowe pozycjonowanie stron internetowych oraz wycena domen i stron internetowych. Prowadzimy ranking polskich stron internetowych oraz ranking stron alexa.