Tag Archives: living

The Nomadic Designer: Tips And Tricks To Work On The Road

Have you ever wondered what it would be like to travel the world while working as a designer? It might sound like a dream, but all that glitters is not gold, and it might not be the right choice for you. In this article, I’ll share some insights from my four years of travel and work that hopefully will be useful for anyone willing to try a nomadic lifestyle, too.

When I wrote the first draft of this article, I was in London, after a long trip to Asia. Now, I’m making changes to it in Mexico, before going to Argentina to visit my family. Changing countries often has become an important part of my life as a designer; and, curiously, it all happened by accident.

I once heard that, while at the office, you should stand up from your desk, stretch your legs, leave the building and never come back. That’s exactly what I did when I was living in Barcelona in March 2014. At the time, I was working for a big company on a project that I didn’t enjoy, and was participating in meetings with people I didn’t know. Sounds like fun, doesn’t it?

Looking back, I see that quitting a stable job to jump into the void of a traveling life was one of the scariest moments of my life. I was going to start a trip to South America, doing design workshops and lectures that would provide me with income to sustain my journey — but in reality, I had no idea what I was doing. Without knowing it, I was becoming a nomadic designer.


doing a lecture


Doing lectures and workshops around the world — and meeting new people because of it — is one of the things I’ve liked most about moving so much. Location: Barcelona.

When that six-month trip ended and I went back to Barcelona, I was never able to settle again. So, what did I do? Of course, I kept traveling! Four years and 60 countries later, I’m still on it.

And I am not alone. I’d like to quote Vitaly Friedman (founder and long-time editor in chief of Smashing Magazine), who once said:

“There is nothing more liberating and sentimental than the sound of a closing door that you will never open again. As memories are flowing by, you turn your back from that door, you hold your breath for just a second and you walk away. At that point you almost sense the change in the wind flowing by. You let go; and knowing and feeling this change is an incredibly empowering, intoxicating experience.”

If this sounds appealing, and you would like to try it for yourself, I hope my article will help you get started. Please note, however, that I’m not going to give you a “how to” guide, with step-by-step instructions that will work for everyone. Instead, I’ll share some insights from my personal experience.

Whatever People Think It Is, It Is Not That

When I tell someone that I’m constantly traveling, usually the person looks amazed. Most of the time, their first question is, “How can you afford to live like that?” I sometimes joke, saying I’m a millionaire with plenty of free time, but it’s not only because of this that I suspect they get the wrong idea about “working and traveling.” Perhaps, some of them imagine plenty of beaches and a lot of comfort and freedom.

Well, guess what? Working from a beach is not that fun or convenient. Or, as Preston Lee puts it, “Freelancing is not sitting on the beach, sipping margaritas, and reading books by Tim Ferriss.”


places to work


I’ve worked in all kind of places: public libraries, hostels, friends’ houses (and, of course, some of them had cats). Can you spot a beach in any of these photos?

But the part about having a lot of freedom is true. I do have a lot of freedom and flexibility — like any other freelancer — with the bonus that I get to know different places, people, cultures and cuisines. The perks of such a lifestyle outweigh the difficulties, but at the same time, not everyone would be willing to handle it.

Today, the “digital nomad” hype is all around, with a lot of people publishing e-books, videos and blog posts selling an ideal lifestyle that’s apparently perfect. Of course, some things are often left out — things like getting tired of packing again and again, being away from family and friends, and starting over often. That’s why people might have a unrealistic idea of what all this is about.

In case you are considering trying something similar, it might help to be aware of some personal characteristics that would be helpful to have.

Comfort With Being Alone

Being a solo traveler allows me to make my own decisions and be wherever I want, whenever I want. I spend a lot of time by myself (luckily, I get along well with myself). Even though it’s fine for me, I know it’s not for everybody. Loneliness is easy to solve, though. Coworking spaces, hostels, couchsurfing hangouts and Meetup are great places when you feel like you need some company and want to meet new friends.

Being Able To Adapt To New Contexts Easily

On a rough average, I move from one place to another every four days. This is very tiring, because every time I switch cities, I have to repeat the same process: book transportation and accommodation, pack my stuff, figure out how to get around, check the weather and find out about the cost of living. Ideally, you won’t be moving that often, but you should be able to grab your things quickly and move to a new place that better meets your expectations.


airport


In my travels, I’ve taken more flights than I would like to admit. That’s a problem when moving so much from one place to another. Location: São Paulo, Brazil.

In some cases, you could plan to stay three or four months in the same spot, but the reality is that you will never know how you’ll feel until you get there. So, my advice is: Go little by little, especially at the beginning.

Flexible But Organized

I think I’ve never been as organized as I’ve been since I started traveling. Apart from the tools that I normally use to generate invoices, track payments and manage projects as a freelance designer, I also have several spreadsheets to organize my flights, accommodation and daily expenses.

The spreadsheet for expenses is divided into different categories and organized by day. I put in there all the money that goes out, so that I know exactly what’s happening, and how close I am to reaching my daily budget. I know there are some apps for this, but so far I haven’t felt comfortable with any of them. The key here is not to cheat (just write down everything) and to be consistent (do it every day) — this will give you good insight into how you are spending your money on the road. Then, it will be easier for you to make decisions based on the data gathered — for example, you could stop buying expensive cocktails so much.

Before Packing: Find A Remote-Friendly Job

If you’ve decided to give it a try, then, as a minimum, plan your start, and don’t leave home without at least one or two months of contracted work. This will keep you busy for the first part of your trip, so you’ll only have to worry about settling in a new place.

When I went to South America at the very beginning of my new life, I contacted several design organizations, schools and agencies that could help me organize design workshops and lectures in different countries. I did this because, a few months before leaving, I, along with a friend (¡hola José!) self-published a book that gained some popularity among designers in Latin America, and I was willing to teach its contents and show how to put them into practice. Doing things like that provided me with at least some idea of dates and an approximate income, while leaving other things to improvisation.

In my case, I’ve always liked being a freelancer, so I give myself a bit more flexibility in managing my schedule. One of the last projects I worked on was for a team in Barcelona and in which the words “remote” and “freelance” were clear in our agreement from the very beginning. This is what allowed me to keep going from country to country, splitting my time between work and getting to know new places and people.

Just so you know how “glamorous” this way of working is, at the beginning of this project I tried to hide my background during video calls or said that I couldn’t turn video on, because I was a bit embarrassed. By the end, though, my teammates didn’t care about that, and so later on, usually the first question of a video call was to ask me for a tour of the place I was staying at, to everyone’s amusement.

Of course, freelancing is not the only way. Working at a remote-friendly company could also be a good option for you. While you’ll lose some of the freedom to move around, if you plan to stay longer in places, then this could be the way to go: Hubspot, Basecamp, Bohemian Coding (of Sketch fame) and Automattic are some examples of companies that successfully work with designers and developers remotely, and there are many more.

A few websites list remote positions for design, so be sure to check them often: We Work Remotely, Remote OK, Working Nomads and Designer News — to name just some of them.

Regardless of whether you are freelancing or working for someone else, I have to say that face to face contact with members of your team is necessary from time to time to time, especially when planning meetings at the beginning of a project, when things are not all that clear. This will partly determine the location you choose, so best to pick a place that allows you to conveniently go where your team is based when needed.

Choosing Your Next Destination

After finding work that allows you to be on the move, the next big thing is to decide where to base yourself. The good thing is that you can work from any place with a decent Internet connection and easy access to coffee (which is essential).


wi-fi sign


I always say that, to work, I need only an Internet connection and a laptop. So, this place at almost 5,000 meters up is a good place to get stuff done. Location: somewhere near Uyuni, Bolivia.

So far, I’ve been in 60 countries, more or less. Many of them were in Europe, where it is easy to move from one place to another and where you can sometimes cross countries without even noticing. (True story: I once missed a whole country because I fell asleep on the train.)

When choosing where to go next, keep in mind the following.

Reliable Access To Internet

You’ll never know how good the Internet connection is until you get there, but at least you can research which countries have the best and worst. This is important. Even if you’re tempted to spend a few days in the middle of a forest, if there is no access to Internet, it will probably be a no-go.

Time Zones

Choose a place where you’ll be in the same time zone with the rest of your team, or maybe a couple of hours ahead or behind. You’ll thank me when you have to schedule your first online meeting and it’s not 4:00 am.

Work Facilities

I’ve said that I can work from almost anywhere, but I have to make sure that my next destination at least has some good coffee shops, libraries or coworking spaces. You could also work from your hostel, hotel or rented flat, but then you’d have to make sure it’s a proper environment to work in.

Design Ecosystem

It’s always good to be surrounded by like-minded people, so many times before going somewhere, I’ll check whether there’s a designer, a design studio or a meetup where I could visit and get in touch with others. Luckily, some people are always willing to meet new pals, and they’ll give you good insight into how the local design community works. You can exchange and share tools of the trade, and you can make new friends as well.


camel


Sometimes I don’t choose my destinations right… at least for getting some work done. Being in the middle of snowy places forced me to take unplanned vacations. Location: Mongolia.

In my case, sending some emails in advance enabled me to meet such talented people as Michael Flarup in Copenhagen and Sacha Greif in Osaka. Just don’t be afraid to ask if you can drop by for a short visit!

Besides that, other factors are at play when you’re deciding where to go: affordability, transportation, safety, weather, etc. Fortunately, Nomad List rounds up the “best” cities,, which you can use as a reference when choosing where to head to next.

Of course, sooner or later, you’ll make some mistake. I’ve learned the hard way that planning where to work is indeed important. I once had to take a few unintended days off when I took the Trans-Siberian train to go from St. Petersburg to Beijing via Mongolia. At some point, the temperatures in the middle of Siberia were so low — the worst day was -50º Celsius — that my phones’ batteries suddenly drained — and being lost in the middle of a snowy small town is anything but fun. (The Russians there thought I was crazy for traveling during winter, and I now know they were right. But if you are like me and go there during wintertime anyway, always keep a paper copy of directions and important information, and bring warm boots and a pocket-sized bottle of vodka.)

Packing And Gear

If you already have a job and know where you are heading to, then you are ready to pack! Someone once said that before starting a trip, you should take half the things you plan to carry and double the money you have budgeted. While the last thing is not always an option, packing light is doable! You’ll thank me when you find your accommodation is uphill.

I started traveling with a 50-liter backpack for my personal things, and a smaller one for work-related items that I carry separately. After some time, I switched the smaller one for a daypack that I can roll up and put into the big one when I don’t need it. Everything (including the laptop) weighs 10 kilograms or so, but I keep assessing what else can I take off in order to have fewer things to carry. Similarly to when working on a design, try to get rid of the unnecessary.

For my work, I chose a MacBook Air because I knew I was going to travel a lot, and I wanted something lightweight and compact. Even though it’s a bit old now, it’s been enough for my requirements so far. I also carry two phones (iPhone and Android, with their corresponding chargers) because I do a lot of UX design for mobile and I often need to test on different devices.

I do have more gadgets and stuff, of course. I carry a remote to control my slides (for conferences and workshops), all kinds of adaptors, and noise-cancelling headphones (very useful for when you travel by train or plane.) But, in general, it is a good idea not to over-buy in advance, and pick up items only when you need them.

Where To Work

I have worked in all kinds of places: buses, trains, coffee shops, airport lounges, libraries, shared rooms in hostels, private rooms in hotels — sometimes anywhere I can set my laptop horizontally… or kind of. I’ve even gotten used to not using a mouse at all, because there is not always a place to put it next to my laptop.

Chances are the room where you stay is also going to be where you will work, so choose carefully. Airbnb is now pretty much widespread, so renting your own room with a desk should be enough — but be sure to mark “laptop friendly” in the search filters.

I try to keep a low budget, so most of the time I stay in a hostel. After a bit of training, I’ve learned to identify places that look better for work — like ones with spacious common areas — just by looking at the pictures. Of course, “party hostels” are not an option if you want to get work done, so if you see a lot of people having fun on the property’s website, that’s a red flag.


hostel room


I sleep in shared dorms in hostels most of the time, to keep my budget low and meet new people, but there’s not much privacy. Location: Sofia, Bulgaria.

One of the main problems is that you never know how good the Internet connection will be. So, if you have difficulty with the Wi-Fi at your hostel, go to a coffee shop, coworking space or even a public library. (Interestingly, public libraries are where I’m most productive, perhaps because of the silence and the fact that I cannot make calls or participate in online meetings.)

Tip: More than once, I’ve visited a coworking space and offered to give a free design lecture to members in exchange of a few days’ worth of using a desk. It’s also nice because afterwards people will know who you are and will approach you openly to share ideas! Feel free to try it yourself.

Finally, a couple of websites could be useful when you’re looking for a place to work — namely, Workfrom and Places to Work.

Things To Keep In Mind When Living On The Road

A few things are important for any traveling designer but are too complex to address completely in one article, so I’ll just briefly mention a few of them, in the hope that it will still be useful.

Please keep in mind that everybody’s situation is different. There’s no one-size-fits-all answer, so you might have to adapt the following to your case.

Taxes

What is convenient for you will depend on your case, and it’s difficult to advise on what’s best, so be aware of the legislation of your home country and of the country where you plan to work. I’ve also been exploring the possibilities that Estonia is offering with its e-citizenship. I’m already an Estonian e-resident, but I haven’t done anything practical with this as of yet.

Managing Your Finances

Besides keeping spreadsheets for expenses, one thing that I discovered (perhaps too late) is that it is normally far more convenient to create an account in an app such as Monzo or Revolut (and there are plenty of others, like N26), so that, when making withdrawals, you pay fewer fees and get better exchange rates. This is especially useful in places where credit or debit cards are not normal; this way, you can also avoid the excessive fees that traditional banks often charge.

Also, check the exchange rate of your home currency before arriving at your next destination. In some cases, I’ve arrived in a new country and bought a very expensive coffee because I didn’t do my homework beforehand. One app I use to avoid situations like this is Currency, an elegant and simple currency converter.

Visas

The situation will depend on where you’re from and where you’re going, so check well in advance regarding the requirements for the passport you are holding.

Something useful I learned when applying for a visa that requires a tentative itinerary is to book hostels and planes that you can later on cancel for free, and print out and bring those booking confirmations.

Health And Insurance

Plenty of companies offer health insurance for travel, so I cannot recommend any one of them. The only thing I can advise is not to leave home without it. An accident in a foreign country, besides being annoying, could also be very expensive. So, prepare in advance.


car in a desert


You never know where you’ll be when there’s a problem at work, so try to find ways to stay connected on the go. Location: somewhere near Jericoacoara, Brazil.

Getting Connected

What I normally do is buy a prepaid SIM card in each country I stay, with a data plan that will be enough for my stay there. I do a bit of research beforehand to see which carrier has the most widespread coverage, and I check if there’s any information in English on their website to make recharges when necessary.

A SIM card is more necessary in some countries than in others. For example, in Russia, most open Wi-Fi networks require you to fill in a phone number, to which a validation code will be sent, before you are able to use the network. Japan, on the other hand, is full of convenience stores with free internet (such as 7-Eleven), so a SIM card is not so necessary. Meanwhile, Europe now has a more convenient way to handling roaming, called “Roam like at home”, and getting a new SIM card in every country is not so necessary anymore.

In any case, before buying a SIM card, make sure it will work across the country, especially if the country is large with many different regions.
Another important thing to check beforehand: Will your current phone number work in the new country? Luckily, there’s a website where you can check that information.

Preparing To Be Offline

Moving from one place to another involves a lot of time spent on the road, and in some cases you won’t have the chance to find Wi-Fi or good data network coverage. At these times, Spotify and Netflix are my best friends, because both allow me to download music and TV shows, respectively, so I can use them without an Internet connection. This was especially useful when I had to take several connecting trains to cross Siberia, spending in some cases around 30 hours straight in a railroad car before my next stop.


Seven Rila Lakes


I still had an Internet connection in these mountains in Bulgaria! However, being offline from time to time and enjoying the natural surroundings is really advisable. Location: Seven Rila Lakes region, Bulgaria.

For the same reason, I always download a map of my next destination, using Google Maps (Maps.me has the same functionality).

If you want more information of this kind, check out another article I wrote, with more travel hacks and tips from my years of traveling.

Final Thoughts

Before I board my next train, let me tell you that becoming a nomadic freelance designer is by far one of my best decisions of my life so far. I have the flexibility that any freelancer has, but I also meet new people and see new places all the time. And it’s not as expensive as you might think. If you control your budget, traveling could be cheaper than living in a big city. So, I can afford to work four to five hours every day, and I use the rest of the time to get to know the place I’m visiting, to work on personal projects and to write articles for Smashing Magazine.

Traveling also makes it a bit hard to separate pleasure from work, because everything seems more enjoyable when you’re moving around. I’ve had to remind myself sometimes that I’m not on a vacation and to focus on getting things done. After a while, though, I’ve found a good balance. Now, I allow myself some moments to just move around, travel and enjoy the ride, doing nothing. It’s not all about work, after all!


on a train


Taking a train in Siberia. It’s not all about work. You also have to let yourself go and enjoy your ride. Location: somewhere in Russia.

Living like this is sometimes challenging and tiring, but I find it much richer than being in an office Monday to Friday, 9:00 to 5:00. And with all of the current technology, it’s easy for any designer to embrace this lifestyle. The most difficult part is finding a job to sustain your travel, but once you’ve found it, the next part is just to let it flow.

The nomadic lifestyle is not right for everyone, but the only way to know for sure is to try. Neale Donald Walsch once said that life starts where your comfort zone ends, and I completely agree. If you can afford to take the risk, go for it and enjoy a part of life that might not last long but will give you a life-changing experience, teach you new things and change the way you see the world forever.

If, for some reason, it doesn’t work, you can always go back to your previous life, right? Whether you are ready to give it a try or still have some questions about it, feel free to let me know. I’ll do my best to help you out. See you on the road!

Further Reading

Smashing Editorial
(mb, ra, al, yk, il)

Read more – 

The Nomadic Designer: Tips And Tricks To Work On The Road

As Far As The Eye Can See: Colorful Sceneries, Posters And Covers

With the lovely weather we’ve been having here in Belgium, all of my senses actively engage when I’m riding my bike. I find myself picking up colorful sceneries while the smell of fragrant flowers and the birds’ singing somehow doesn’t manage to escape me. Oh yes, it’s Summer alright!
Not sure about you, but this is the period when I usually feel most inspired, probably, because I’m spending way more time outside.

Original source: 

As Far As The Eye Can See: Colorful Sceneries, Posters And Covers

Designing Modular UI Systems Via Style Guide-Driven Development


Using a style guide to drive development is a practice that is gaining a lot of traction in front-end development — and for good reason. Developers will start in the style guide by adding new code or updating existing code, thereby contributing to a modular UI system that is later integrated in the application. But in order to implement a modular UI system, we must approach design in a modular way.

Designing Modular UI Systems Via Style Guide-Driven Development

Modular design encourages us to think and design a UI and UX in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, we would start the design process by understanding how the UI system is structured and how its components can be used to create the user flow.

The post Designing Modular UI Systems Via Style Guide-Driven Development appeared first on Smashing Magazine.

Link:  

Designing Modular UI Systems Via Style Guide-Driven Development

Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

Design patterns often have a bad reputation. They are often considered to be quick, lazy, off-the-shelf solutions that are applied blindly without consideration of the context of a problem. Solutions such as the almighty off-canvas navigation, the floating label pattern or carousels for featured products are some of the prominent ones.
This article isn’t about these patterns, though. This article features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction.

Read More: 

Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

Thumbnail

Web Development Reading List #134: AI, Keyboard Interactions And Living Style Guides

For a great project, we need a well-functioning team, solid style guides, smooth workflows and well-organized kick-off meetings. Last week, I found a couple of resources that help you achieve just that.
And, a bit further down the road, the developers shouldn’t miss out on anything either, of course, — having a proper workflow is essential to be productive, and that’s why it might be a good idea to start playing with Docker.

Link – 

Web Development Reading List #134: AI, Keyboard Interactions And Living Style Guides

Thumbnail

Designing For Print With CSS

If you mention printing with CSS to many people who work on the web, print style sheets1 are the use that comes to mind. We are all well used to creating a style sheet that is called upon when a web document is printed. These style sheets ensure that the print version is legible and that we don’t cause a user to print out huge images. However, CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all.

In this article, we’ll take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. I’ll explain how the selectors, properties and values that they introduce work. I’ll finish up with a working example that you can use as a starting point for your own experiments. For that example, we’ll need a user agent that supports this specialized CSS. I’ll be using Prince, which is a commercial product. However, Prince has a free version that can be used for non-commercial use, making it a good tool to try out these examples.

Why HTML And CSS Make Sense For Print

It may seem a bit strange that content not particularly destined for the web should be maintained as HTML and formatted with CSS. It seems less strange when you realize that popular eReader formats such as EPUB and MOBI are HTML and CSS under the hood. In addition, even if the entirety of a manuscript or catalog isn’t to be published on a website, some of it likely will be. HTML becomes a handy format to standardize on, far easier to deal with than having everything in a Word document or a traditional desktop publishing package.

The Differences Between CSS For The Web And CSS For Print

The biggest difference, and conceptual shift, is that printed documents refer to a page model that is of a fixed size. Whereas on the web we are constantly reminded that we have no idea of the size of the viewport, in print the fixed size of each page has a bearing on everything that we do. Due to this fixed page size, we have to consider our document as a collection of pages, paged media, rather than the continuous media that is a web page.

Paged media introduces concepts that make no sense on the web. For example, you need to be able to generate page numbers, put chapter titles in margins, break content appropriately in order that figures don’t become disassociated from their captions. You might need to create cross-references and footnotes, indexes and tables of content from your document. You could import the document into a desktop publishing package and create all of this by hand, however, the work would then need redoing the next time you update the copy. This is where CSS comes in, whose specifications are designed for use in creating paged media.

Because the specifications are designed for paged media, we won’t be considering browser support in this article — it wouldn’t make a lot of sense. Later on, we’ll look at a user agent designed to turn your HTML and CSS into a PDF using these specifications.

The Specifications

Much of the CSS you already know will be useful for formatting for print. Specifically for print, we have the “CSS Paged Media Module2” and the “CSS Generated Content for Paged Media Module293” specifications. Let’s look at how these work.

The @page Rule

The @page rule lets you specify various aspects of a page box. For example, you will want to specify the dimensions of your pages. The rule below specifies a default page size of 5.5 by 8.5 inches. If you intend to print a book, perhaps by a print-on-demand service, then finding out the sizes you can use is important.

@page 
  size: 5.5in 8.5in;

In addition to specifying sizes with length values, you may also use paper size keywords, such as “A4″ or “legal.”

@page 
  size: A4;

You may also use a keyword to specify the page’s orientation — “portrait” or “landscape.”

@page 
  size: A4 landscape;

Understanding the Page Model

Before going any further, we should understand how the page model for paged media works, because it behaves somewhat differently to how things work on screen.

The page model defines a page area and then 16 surrounding margin boxes4. You can control the size of the page area and the size of the margin between the edge of the page area and the end of the page itself. The table in the specification explains very well how these boxes are sized.

1-image-margin-boxes-opt5
(See large version6)

The page area is the space on the page into which your page’s content will flow. When it runs out of room, another page will be created. The margin boxes are used only for CSS-generated content.

Left and Right Page Spreads

Another aspect of the page model is that it defines pseudo-class selectors for the left and right pages of your document. If you look at any printed book you have on hand, you’ll probably see that the margin’s size and the margin’s content are different on the left and right pages.

We can use these selectors to define different margin sizes for our pages.

@page :left 
  margin-left: 3cm;


@page :right 
  margin-left: 4cm;

Two other pseudo-class selectors are defined. The :first selector targets the first page of a document.

@page :first 


The :blank pseudo-class selector targets any page that is “intentionally left blank.” To add this text, we can use generated content that targets the top-center margin box.

@page :blank 
  @top-center  content: "This page is intentionally left blank." 
}

Generated Content and Paged Media

In the last example, we used CSS-generated content to add the text to the top-center margin box. As you will discover, generated content is vitally important to creating our book. It’s the only way things can be added to our margin boxes at all. For example, if we want to add the title of the book to the bottom-left margin box of right-hand pages, we would do this using generated content.

@page:right 
  @bottom-left 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  
}

Page Breaks

Also part of the “Paged Media” specification is information about how to control page breaks. As already described, once the content fills a page area, it will move onto a new page. If a heading has just been written to the page, you might end up with a page that finishes with a heading, with the related content beginning on the next page. In a printed book, you would try to avoid this situation. Other places you might want to avoid a break are in the middle of a table and between a figure and its caption.

Starting a new chapter of a book with an h1 heading is common. To force this heading to always be the beginning of a page, set page-break-before to always.

h1 
  page-break-before: always;

To avoid breaks directly after a heading, use page-break-after.

h1, h2, h3, h4, h5 
  page-break-after: avoid;

To avoid breaking figures and tables, use the page-break-inside property.

table, figure 
  page-break-inside: avoid;

Counters

Books are all about numbering things — pages, chapters, even figures. We can actually add these numbers via CSS, saving us from having to renumber everything because we decided to, say, add a new figure partway through a chapter. We do this using CSS counters7.

The obvious place to start is with page numbers. CSS gives us a predefined page counter; it starts at 1 and increments with every new page. In your style sheet, you would use this counter as the value of generated content, to put the page counter in one of your margin boxes. In the example below, we are adding page numbers to the bottom-right of right-hand pages and the bottom-left of left-hand pages.

@page:right
  @bottom-right 
    content: counter(page);
  
}

@page:left
  @bottom-left 
    content: counter(page);
  
}

We’ve also created a counter named pages. This counter will always be the total number of pages in your document. If you want to output “Page 3 of 120,” you can.

@page:left
  @bottom-left 
    content: "Page " counter(page) " of " counter(pages);
  
}

You can create your own named counters and increment and reset them as you require. To create a counter, use the counter-reset property, increment it with counter-increment. The CSS rules below will create a counter for chapters named chapternum and increment it with each h1 — being the start of a chapter in this book. We then use the value of that counter in generated content to add the chapter number and a period before the chapter’s actual title.

body 
  counter-reset: chapternum;


h1.chapter:before 
  counter-increment: chapternum;
  content: counter(chapternum) ". ";

We can do the same for figures in the book. A common way to number figures is to use chapternum.figurenum. So, “Figure 3-2″ would be the second figure in chapter 3. On the h1, we could reset figurenum in order that it starts from 1 for each chapter.

body 
  counter-reset: chapternum figurenum;


h1 
  counter-reset: figurenum;


h1.title:before 
  counter-increment: chapternum;
  content: counter(chapternum) ". ";


figcaption:before 
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";

Setting Strings

Take a look at a printed book again. As you leaf through a chapter, you’ll probably see that the chapter’s title is printed on the left or right page. As strange as it may sound, the “Generated Content for Paged Media” specification lets us achieve this using CSS.

We do this using a property named string-set in the selector that we want to take the content from. For the chapter title, this would be the h1. The value of string-set is the name you would like to give this content and then content(). You can then output this as generated content using string().

h1  
  string-set: doctitle content(); 


@page :right 
  @top-right 
    content: string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 8pt;
  
}

When your paged media is generated, each time an h1 occurs, the content is written to doctitle and then outputted in the top-right margin box of right-hand pages, changing only when another h1 occurs.

Footnotes

Footnotes are a part of the “CSS Generated Content for Paged Media Module8” specification. The way footnotes work is that you would add the text of your footnote inline, wrapped in HTML tags (probably a span), with a class to identify it as a footnote. When the page is generated, the content of that “footnote element” is removed and turned into a footnote.

In your CSS, use the footnote value of the float property to create a rule for your footnote class.

.fn 
  float: footnote;

In your document, use that class to wrap any footnote text.

<p>Footnotes<span class="footnotes">Footnotes and notes placed in the footer of a document to reference the text. The footnote will be removed from the flow when the page is created.</span> are useful in books and printed documents.</p>

Footnotes have a predefined counter that behaves in the same way as the page counter. Typically, you will want to increment the counter by 1 each time a fn class occurs and reset it at the beginning of each chapter.

.fn 
  counter-increment: footnote;


h1 
  counter-reset: footnote;

The various parts of a footnote can be targeted with CSS pseudo-elements. The footnote-call is the numeric anchor in the text that indicates there is a footnote. This uses the value of the footnote counter as generated content.

.fn::footnote-call 
  content: counter(footnote);
  font-size: 9pt;
  vertical-align: super;
  line-height: none;

The footnote-marker is the numeric marker placed in front of the footnote text in the footer of your document. These behave in a similar way to the numbers generated for an ordered list in CSS.

.fn::footnote-marker 
  font-weight: bold;

The footnotes themselves are placed in the margin, within a special area of the page named @footnotes. You would target and style that area as follows.

@page 
  @footnotes 
    border-top: 1pt solid black;
  
}

Cross-References

Before moving on to a working example of everything we’ve learned, let’s look at cross-references. On the web, we cross-reference things by adding links. In a book or other printed document, you would normally refer to the page number where that reference is to be found. Because page numbers might change according to the format that the book is printed in — and between editions — doing this with CSS saves us from having to go through and change all of the numbers.

We use another new property, target-counter, to add these numbers. Start by creating links in your document, giving them an href, which is the ID of the element in the document that you want to target. Also, add a class to identify them as a cross-reference, rather than an external link; I’m using xref.

<a class="xref" href="#ch1" title="Chapter 1">Chapter 1</a>

Then, after the link, use generated content again to output (page x), where x is the number of the location in the book where that ID can be found.

a.xref:after 
  content: " (page " target-counter(attr(href, url), page) ")";

We’ll be looking at this technique in practice when we create a table of contents for the working example.

Putting It All Together: An Example Book

We’ve looked at a lot of different properties here in isolation. They make more sense once you put them to use by building a book.

To actually create a book using this CSS, you’ll need a user agent that supports it. Currently, very few things implement this specification well; the one that is most accessible is Prince129. A standalone commercial license for Prince is expensive, however, you may use Prince free of charge for non-commercial projects. This means that if you just want to try out these techniques, you can. Additionally, if you do have non-commercial uses for this technology, you may use Prince to format those books.

I have extracted passages from one of my favorite books on Project Gutenberg, Our Cats by Harrison Weir10. I’ve chosen this book because I like cats and because it has images and footnotes that I can use to demonstrate formatting.

You can find the files I am using, plus a generated PDF, over on GitHub11. If you want to experiment with the CSS and build the book yourself, then you will need to download and install Prince129. Prince is a command-line tool on the Mac, and although there is a Windows GUI, I’ll use the command line because it really is very simple.

Using a Terminal window, switch to your book’s directory or the location where you downloaded my files from GitHub.

cd /Users/username/smashing-css-books

Now, run Prince:

prince -s pdf-styles.css book.html builds/book.pdf

This will create a PDF in the builds folder named book.pdf. Now, if you make any changes to the CSS or HTML, you can run Prince to see what is different.

The HTML Document

My entire “book” is compiled in a single HTML document. Compiling documents in Prince is possible, but I’ve found it simpler to just deal with one large document. Before the chapters, which start with an h1, I have a div that contains the cover image, and then the table of contents for the book.

The table of contents links to the IDs of the chapters’ h1 headings.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
  <head>
  <meta charset="utf-8" />
  <title>Our Cats and All About Them</title>
  <meta name="author" content="Harrison Weir"/>
  <meta name="subject" content="Cats. Their Varieties, Habits and Management; and for show, the Standard of Excellence and Beauty"/>
  <meta name="keywords" content="cats,feline"/>
  <meta name="date" content="2014-12-05"/>
  </head>
  <body>
    <div class="frontcover">
    </div>
    <div class="contents">
      <h1>Extracts from Our Cats and All About Them by Harrison Weir</h1>

        <ul class="toc">
          <li><a href="#ch1">The First Cat Show</a></li>
          <li><a href="#ch2">Trained Cats</a></li>
          <li><a href="#ch3">General Management</a></li>
          <li><a href="#ch4">Superstition and Witchcraft</a></li>
        </ul>

    </div>

    <h1 id="ch1" class="chapter">The First Cat Show</h1>
      <p>… </p>

    <h1 id="ch2" class="chapter">Trained Cats</h1>
      <p>… </p>

    <h1 id="ch3" class="chapter">General Management</h1>
      <p>… </p>

    <h1 id="ch4" class="chapter">Superstition and Witchcraft</h1>
      <p>… </p>

  </body>
</html>

The CSS then uses all of the things we have described so far. To start, we need to set up a size for the book using the @page rule. We then use the :first pseudo-class selector to remove the margin on page 1, because this page will have the cover image.

@page 
  size: 5.5in 8.5in;  
  margin: 70pt 60pt 70pt;


@page:first 
  size: 5.5in 8.5in;  
  margin: 0;

We then deal with the image for the front cover, making sure that it covers the whole page area.

div.frontcover  
  page: cover; 
  content: url("images/cover.png");
  width: 100%;
  height: 100%; 

2-image-cover-opt13
(See large version14)

Next, we deal with the specifics of the left- and right-hand pages, using the :right and :left spread pseudo-classes.

The right-hand spread will have the title of the book in the bottom-left margin box, a page counter in the bottom-right, and the chapter’s title in the top-right. The chapter’s title is set using string-set further down in the style sheet.

@page:right 
  @bottom-left 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  

  @bottom-right  
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  

  @top-right 
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  
}
3-image-spread-right-opt15
(See large version16)

The left-hand spread has the book’s title in the bottom-right and the page counter in the bottom-left.

@page:left 
  @bottom-right 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  

  @bottom-left  
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  
}
4-image-spread-left-opt17
(See large version18)

For the first page, which contains the cover image, we’ll make sure that no generated content appears by setting it to normal.

@page:first 
  @bottom-right 
    content: normal;
    margin: 0;
  

  @bottom-left 
    content: normal;
    margin: 0;
  
}

The next section of the style sheet deals with counters. In addition to the preset page counter, we are defining counters for chapters and figures.

/* Reset chapter and figure counters on the body */
body 
  counter-reset: chapternum figurenum;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  line-height: 1.5;
  font-size: 11pt;


/* Get the title of the current chapter, which will be the content of the h1.
Reset figure counter because figures start from 1 in each chapter. */
h1 
  string-set: doctitle content();
  page-break-before: always;
  counter-reset: figurenum;
  counter-reset: footnote;
  line-height: 1.3;


/* Increment chapter counter */
h1.chapter:before 
  counter-increment: chapternum;
  content: counter(chapternum) ". ";


/* Increment and display figure counter */
figcaption:before 
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";

Chapters now have their number placed before the title. Figures also display their number.

5-image-figure-number-opt19
(See large version20)

We create footnotes as in the explanation earlier, superscripting the footnote’s call.

.fn 
  float: footnote;


.fn 
  counter-increment: footnote;


.fn::footnote-call 
  content: counter(footnote);
  font-size: 9pt;
  vertical-align: super;
  line-height: none;


.fn::footnote-marker 
  font-weight: bold;


@page 
  @footnotes 
    border-top: 0.6pt solid black;
    padding-top: 8pt;
  
}
6-image-footnotes-opt21
(See large version22)

We then add some rules to control where pages break. You need to be fairly careful about being too heavy handed with this. If your book has a lot of tables and figures, then adding many specific rules here could cause a lot of long gaps in the book. Experimenting and testing will show how far you can take the control of breaks. I have found the rules below to be a good starting point.

Remember that this is a suggestion to the user agent. In some cases, keeping a table from breaking will be impossible if the table doesn’t fit on a page!

h1, h2, h3, h4, h5 
  font-weight: bold;
  page-break-after: avoid;
  page-break-inside:avoid;


h1+p, h2+p, h3+p 
  page-break-before: avoid;


table, figure 
  page-break-inside: avoid;

Finally, we style the table of contents, and we use an interesting trick here. When describing cross-references, I explained how we use target-counter to display the page number that the ID is on. This is what we’ll do for our table of contents. The rule below puts the page number after the link to each chapter in the table of contents.

ul.toc a::after 
  content: target-counter(attr(href), page);

7-image-toc-numbers-opt23
(See large version24)

Commonly in books, however, you would use leader dots to line up all of the page numbers against the right margin. Amazingly, CSS gives us a way to do this, by adding leader() before the number in the generated content.

ul.toc a::after 
  content: leader('.') target-counter(attr(href), page);

8-image-toc-leader-opt25
(See large version26)

We now have a complete style sheet with which to build our book. I’ve avoided spending a lot of time on typography here, concentrating instead on the specifics of creating a book. From this point, however, you can experiment and add your own styles to create a unique book design.

Not Just Books!

Remember that these techniques are not just for books. You could use them to generate print and PDF versions of a product catalog directly from the HTML of a website that you have developed for a client. Or you could create flyers and brochures from web content.

If you want to create PDF documents from a website using Prince, then DocRaptor27 is a great option. This service uses Prince via an API. You can send documents via the API and receive a PDF — perfect for allowing users to download content as a PDF on the fly. Everything we have looked at in this article is possible via an API integration with DocRaptor.

Even if you don’t have an immediate need for PDF generation, it’s a fascinating aspect of CSS — and it’s a useful skill to have tucked away, so that you know what is possible when a use case presents itself.

Resources And Further Reading

(vf, al, il)

Footnotes

  1. 1 http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/
  2. 2 http://www.w3.org/TR/css3-page/
  3. 3 http://www.w3.org/TR/css-gcpm-3/
  4. 4 http://www.w3.org/TR/css3-page/#margin-boxes
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg
  7. 7 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
  8. 8 http://www.w3.org/TR/css-gcpm-3/#footnotes
  9. 9 http://princexml.com
  10. 10 http://www.gutenberg.org/ebooks/35450
  11. 11 https://github.com/rachelandrew/css-for-print
  12. 12 http://princexml.com
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/12/2-image-cover-large-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/12/2-image-cover-large-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/12/3-image-spread-right-large-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/12/3-image-spread-right-large-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/12/4-image-spread-left-large-opt.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/12/4-image-spread-left-large-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/12/5-image-figure-number-large-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/12/5-image-figure-number-large-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/12/6-image-footnotes-large-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/12/6-image-footnotes-large-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/12/7-image-toc-numbers-large-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/12/7-image-toc-numbers-large-opt.jpg
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/12/8-image-toc-leader-large-opt.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/12/8-image-toc-leader-large-opt.jpg
  27. 27 https://docraptor.com/
  28. 28 http://www.w3.org/TR/css3-page/
  29. 29 http://www.w3.org/TR/css-gcpm-3/
  30. 30 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
  31. 31 https://books.spec.whatwg.org/
  32. 32 http://www.princexml.com/doc/
  33. 33 http://24ways.org/2013/how-to-write-a-book/
  34. 34 http://alistapart.com/article/building-books-with-css3
  35. 35 http://alistapart.com/article/boom
  36. 36 http://rachelandrew.co.uk/archives/2014/01/07/html-epub-mobi-pdf-wtf-creating-an-ebook/

The post Designing For Print With CSS appeared first on Smashing Magazine.

Read the article:  

Designing For Print With CSS

Good Content Is Too Valuable To Die

When I started developing websites back in the day, I was lucky to have hundreds of valuable, practical articles that would help me become better at what I did. I could learn day and night, and whenever I discovered a new tool or technique, I would bookmark it on Delicious for future reference. I knew the value of each article and of each bookmark, and I kept revisiting and carefully tagging them for months and months — almost every day.

View the original here: 

Good Content Is Too Valuable To Die

Design Language: The Mystery of Organic Ambigram

The ambigram is one of the few modern letterforms that engage both your intellect and intuition simultaneously. It reads as a word while also communicating a deeply familiar pattern. This is something beyond the ambigram’s obviously clever construction. I’ve thought quite a bit about why I love this word-image hybrid, and I’ll set out here to uncover just what it is about the ambigram’s design and structure that makes it so captivating.

More:

Design Language: The Mystery of Organic Ambigram

Design Patterns: When Breaking The Rules Is OK

We’d like to believe that we use established design patterns for common elements on the Web. We know what buttons should look like, how they should behave and how to design the Web forms that rely on those buttons.
And yet, broken forms, buttons that look nothing like buttons, confusing navigation elements and more are rampant on the Web. It’s a boulevard of broken patterns out there.
Further Reading on SmashingMag: Taking Pattern Libraries To The Next Level An Exploration Of Carousel Usage On Mobile E-Commerce Websites An In-Depth Overview Of Living Style Guide Tools Boost Your Mobile E-Commerce Sales With Mobile Design Patterns This got me thinking about the history and purpose of design patterns and when they should and should not be used.

Link to original:

Design Patterns: When Breaking The Rules Is OK

10 Things To Think About When Designing Your iPad App

Like most well-designed things, the magic of an iPad app comes from a union of usefulness, usability and meaning. Games aside, the app must be useful by solving a problem that people actually have through the right set of functionality at the right time. It must be easy to use and, just as importantly, easy to get started using, without a lot of pesky setup and learning steps.
And it must hold meaning for the user through visual beauty, an emotional connection, personal insights, etc.

Continued – 

10 Things To Think About When Designing Your iPad App