Menu Search
Jump to the content X
X

Smashing Mystery Riddle Resolved: New York Pizza, Jules Verne And 28 Hong Kong Street

Guess what: those tricky mystery riddles are never easy to design. The idea has to be evaluated and brought into life, just to be crashed by painful user tests and then adjusted over and over again until it's easy enough to solve — but difficult enough to not solve fast.

SmashingConf Singapore is coming in 2017!

When we started out with riddles, we wanted to have an entertaining yet challenging game that wouldn't be easy to crack, and would keep our dear readers busy for quite some time.

Read more...

Building A First-Class App That Leverages Your Website: A Case Study

Mark Zuckerberg once said, “The biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native… because it just wasn’t there. And it’s not that HTML5 is bad. I’m actually, long term, really excited about it.” And who wouldn’t be excited by the prospect of a single code base that works across multiple platforms?

The app as a mix of native and web interfaces

Unfortunately, Facebook felt that HTML5 didn’t offer the experience it was looking to build, and that’s what it’s really about: the experience. I believe what Mark was really trying to say was that their biggest mistake was making a technology-driven decision instead of a user experience-driven decision. At the end of the day, we should be making decisions that deliver value to our customers, and sticking to a particular technology is generally not the best way to achieve that.

Read more...
Advertisement Advertise with us!

Transforming Lufthansa’s Brand Strategy: From The Online To Interactive Age, A Case Study

The first time I became aware of brand inconsistency was four, maybe five years ago. Companies were extending their appearances to apps, social media and other digital channels. And so did the bank I worked for back then. Unfortunately, no style guides were available to cover these channels.

Transforming Lufthansa’s Brand Implementation Strategy: From The Online To Interactive Age, A Case Study

I remember the dilemma while writing specifications: there were some older corporate identity manuals and some static UI style guides. Then, you’d look at newer web projects and none of them reflected the guidelines. So, what was I to do? Strictly obey the guidelines and produce something that looks outdated, or adapt to modern channels and risking a user experience that diverged from existing customer touch points?

Read more...

Freebie: Home Appliance And Real Estate Icons (72 Icons, AI, CSH, EPS, SVG, Webfont, Sketch)

When it comes to web projects, real estate and home appliances go well together, so today we're happy to release a lovely free icon set with 72 related icons. The set includes icons in 4 sizes and in 8 formats: AI, CSH, EPS, SVG, PDF, PNG, Sketch and Webfont. The icon set is free to use in personal and commercial projects. Designed by Funline Icons.

Freebie: Home Appliance And Real Estate Icons (72 Icons AI, CSH, EPS, SVG, PDF, PNG, Webfont)

Feel free to modify the size, color or shape of the icons. No attribution is required, though reselling bundles or individual pictograms isn't allowed (and it isn't cool either). Please note that the set is released under a Creative Commons Attribution 3.0 Unported license. We'd kindly like to ask you to provide credits to the creator and link to this article if you would like to spread the word.

Read more...

Hardware Hacking With JavaScript

The Internet of Things (IoT) has enabled the Internet to reach beyond the browser. Made up of electronically networked devices, these “things” are able to interact with the physical world via sensors that feed data they capture back into their ecosystems.

Hardware Hacking With JavaScript

Currently, these devices are mostly products, designed with a specific purpose in mind, a typical example being a fitness band that tracks activity. It reports the information gathered to an app, which is then able to analyze the data and offer suggestions and motivation to push the user further.

Read more...

Quick Tips Automatically Art-Directed Responsive Images? Here You Go.

In many projects, responsive images aren’t a technical issue but a strategic concern. Delivering different images to different screens is technically possible with srcset and sizes and <picture> element and Picturefill (or a similar) polyfill; but all of those variants of images have to be created, adjusted and baked into the logic of the existing CMS. And that's not easy.

Smartcrop.js

On top of that, responsive images markup has to be generated and added into HTML as well, and if a new image variant comes into play at some point (e.g. a file format like WebP or a large landscape/portrait variant), the markup has to be updated. The amount of extra work required often causes trouble — so if you have a perfect product shot, you need to either manually create variants for mobile and portrait and landscape and larger views, or build plugins and extensions to somehow automate the process.

Read more...

Quick Tips Design Mock-Ups Need Dynamic Content: Tools and Plugins

Nothing is perfect on the web. We can't make sure that our websites always work as intended, but we can try our best to design resilient and flexible websites that aren't that easy to break — both in terms of interface design and security. Yet neither resilience nor flexibility are usually reflected in our deliverables and mock-ups.

In practice, mock-ups usually represent a perfect experience in a perfect context with perfect data which doesn't really exist. A good example for it are “optimal" usernames which are perfectly short, fit on a single line on mobile and wrap nicely, or perfect photography that allows for perfectly legible text overlays. It's not realistic. We need to work with dynamic content in our prototypes, with both average and extremes being represented.

Read more...

Web Development Reading List #123: Meaningful Git Commits and HTTP Status Codes

This week I mostly spent time on fixing bugs, improving a deployment workflow and on getting another new front-end project structured. One major takeaway from this was that it’s good to have a proper deployment workflow in place already in the early stages of a project.

Writing JavaScript modules

To document appropriately in git what has been done in a commit instead of sleazily writing “changed [XY] because of [some arbitrary reason]”. By doing so, it becomes easier for myself, or someone else, to identify bugs at a later stage.

Read more...

JavaScript AI For An HTML Sliding Tiles Puzzle

Sam Loyd (1841–1911), American chess player and puzzle maker, created the sliding tiles puzzle in the 1870s. The puzzle is represented by an m×n grid, where m is number of columns and n is number of rows, and each cell can be any imaginable value (number, letter, image, and so on.)

JavaScript AI For An HTML Sliding Tiles Puzzle

The purpose of the puzzle is to rearrange the initial configuration of the tiles to match another configuration known as the goal configuration. The rearrangement task is achieved by swapping the empty tile with some other tile in all possible directions (up, down, left, and right).

Read more...

Quick Tips Breaking It Down To The Bits: How The Internet, DNS, And HTTPS Work

Smashing Magazine is known for lengthy, comprehensive articles. But what about something different for a change? What about shorter, concise pieces with useful tips that you could easily read over a short coffee break? As an experiment, this is one of the shorter "Quick Tips"-kind-of articles — shorter posts prepared and edited by our editorial team. What do you think? Let us know in the comments! —Ed.

If we want to build high performance applications, we have to understand how the individual bits are delivered.

The Internet is the foundation of our craft. But what do we actually know about its underlying technology? How do DNS, networks and HTTPS work? What happens in the browser when we type a URL in the address bar?

Read more...

↑ Back to top