Category: Blog

Although modern iOS hardware is powerful enough to handle many intensive and complex tasks, the device could still feel unresponsive if you are not careful about how your app performs. In this article, we will look into five optimization tricks that will make your app feel more responsive.
1. Dequeue Reusable Cell

You’ve probably used tableView.dequeueReusableCell(withIdentifier:for:) inside tableView(_:cellForRowAt:) before. Ever wondered why you have to follow this awkward API, instead of just passing an array of cell in? Let’s go through the reasoning of this.

Say you have a table view with a thousand rows. Without using reusable cells, we would have to create a new cell for each row, like this:

 

As you might have thought, this will add a thousand cells to the device’s memory as you scroll to the bottom. Imagine what would happen if each cell contained a UIImageView and a lot of text: Loading them all at once could cause the app to run out of memory! Apart from that, every single cell would require new memory to be allocated during scrolling. If you scroll a table view quickly, a lot of small chunks of memory will be allocated on the fly, and this process will make the UI janky!

To resolve this, Apple has provided us with the dequeueReusableCell(withIdentifier:for:) method. Cell reuse works by placing the cell that is no longer visible on the screen into a queue, and when a new cell is about to be visible on the screen (say, the subsequent cell below as the user scrolls down), the table view will retrieve a cell from this queue and modify it in the cellForRowAt indexPath: method.
Cell reuse queue mechanism
How cell reuse queues work in iOS (Large preview)

By using a queue to store cells, the table view doesn’t need to create a thousand cells. Instead, it needs just enough cells to cover the area of the table view.

Imagine you design a system for data researchers. Or an application for energy management. Or a dashboard for corn traders. Maybe you’re designing something like that right now. In all the mentioned cases, people will expect tables. Not those fancy ones from design inspiration sites but Excel-looking monsters with hundreds of cells and complex interaction.

In this case, a designer faces many challenges. For instance, matching design with existing frontend frameworks or struggling with “uncomfortable” data that smashes the layout. We’ll overcome these problems by means of the following steps: systematize needs, go atomic, and define interaction.
A trendy-looking table with little data versus a busy complex table

Expectation vs. Reality

1. Systematize Needs

So, you’ve interviewed the target audience and figured out their needs and wants. Now it’s time to piece together findings and transform them into an interface structure. For example, one user said, “I need to see how my data affects other parts of the application.” Or while watching another person work with old software you noticed he uses shortcuts and doesn’t touch a mouse at all. What does it mean?

The first user’s words are about input validation and hints. You’ll need to consider attaching alert or help information to a table. Or develop a system of meaningful colors. It depends on the domain and the mental model. The observation of the second user’s work might be a sign you need to design all actions keyboard-accessible. And you’ll probably need to think about shortcuts more profound than just “Cmd + C” and “Cmd + V”.

There’s a good reason the majority of programming languages support regular expressions: they are extremely powerful tools for manipulating text. Text processing tasks that require dozens of lines of code can often be accomplished with a single line of regular expression code. While the built-in functions in most languages are usually sufficient to perform search and replace operations on strings, more complex operations — such as validating text inputs — often require the use of regular expressions.

Regular expressions have been part of the JavaScript language since the third edition of the ECMAScript standard, which was introduced in 1999. ECMAScript 2018 (or ES2018 for short) is the ninth edition of the standard and further improves the text processing capability of JavaScript by introducing four new features:

Lookbehind assertions
Named capture groups
s (dotAll) Flag
Unicode property escapes

As web developers, we are often required to create applications that are responsive as well as media-rich. Having such requirements in place means that we need to work with image breakpoints, as well as media queries since we want to provide the best experience to the end users. Adding to the list of requirements we may need to use a front-end framework such as Angular which is great for creating SPAs and other application types.

In this article, we’ll take a look at image breakpoints, their use-cases and throughout a hands-on example; we’ll implement them in an Angular application using Angular’s own BreakPoint Observer. While using this approach, we’ll also highlight why this popular framework helps us work with the aforementioned techniques in a seamless way.

In the era of responsive layouts (where we capture breakpoints based on the viewport size and based on the breakpoint we change the layout of the page), we also need to make sure that images can be displayed with the right dimensions — even after a layout change. Selecting the right image is quite challenging for modern responsive websites.

Anyone possessing the notorious Samsung Galaxy Note 7 smartphone in Pakistan can now get it exchanged or obtain a refund inside the country from Samsung.Samsung has been struggling to contain a snowballing safety crisis as it recalls Note 7 smartphones with exploding batteries that have been catching fire.Although Samsung did not launch the Note 7 in Pakistan, it has decided to cater to customers who acquired the smartphones from abroad or from local vendors.In addition to its request to customers to back up their data and switch off their Note 7 smartphones, Samsung has given Pakistani customers the following options to get rid of the smartphone:

Get a full refund
Customers possessing a proof purchase for their Galaxy Note 7 will be refunded the full amount mentioned on the receipt.In case a customer has no proof of purchase, they will be refunded a fixed amount of $817.

Exchange with S7 edge
Note 7 owners can also opt to exchange their smartphone, with Samsung offering its flagship Galaxy S7 edge and a refund of Rs10,000 in return.

The company has asked customers who pre-booked the phone to “contact the relevant retailers to get a refund”.

PR disaster
The South Korean conglomerate called a halt to worldwide sales and exchanges of the troubled handset, as the federal US consumer regulator issued an alarming warning of the possible dangers the device posed to its owners, their families and homes.

The announcement came a little over a month after the world’s largest smartphone maker announced a recall of 2.5 million Note 7s in 10 markets following complaints that its lithium-ion battery exploded while charging.

The unprecedented move has turned into a PR disaster for the company, which prides itself on innovation and quality, and the situation only worsened when reports emerged a week ago of replacement phones also catching fire.

Today, I’m going to talk to you about Web design trends. I know, the word “trends” sounds so wishy-washy and a little taboo. But keep reading, I have a point, I promise.

First let’s address the elephant in the room: the term’s bad reputation. Web trends aren’t the online equivalent of big 1980s hair – they’re a great indicator of what users want to see, as well as where Web standards are headed. So staying on top of Web trends will give your site an edge that will set the design and usability apart from your competition.

So, who decides what’s trending?

There isn’t a cloak-and-dagger board of Web designers (complete with secret handshakes) that make all the decisions around what rules everyone is supposed to follow. Instead those trends are set by changes in technology, users and other creative fields. Advancements in technology and tools largely determine what designers and developers are able to achieve on the Web. The way users access and utilize a website shapes the way designers and developers make decisions to enhance usability. And finally, other creative fields like traditional graphic design heavily influence design on the Web.

To design is to visually problem-solve.

It’s this type of thinking that breaks boundaries, and what may work in one discipline often times is translated across others. This mixing and matching of methodologies propose new and creative solutions, eventually setting trends.

What’s in store for 2016?

More of the same, and that’s a good thing, it’s all about familiar UI patterns.

It’s 2016, and while I have been saying for years at this point, some of you still don’t have a responsive website. Get it together. It’s not acceptable. Since last April, Google has been slapping you on the wrist with a hit to your search rankings for this serious faux pas.

With responsive websites at the forefront of the new standard of Web, the Internet is starting to look awfully uniform. This isn’t a bad thing – in fact, it’s pretty brilliant.

We’ve changed the way we consume content on the Web, and we expect things to work a certain way, no matter what site we’re on. Think about it: When you purchase a product from an online retailer, you expect it to work just like Amazon. It needs to save all your info and not hold you up over shipping options. You expect it to be that way for all retailers. That experience has to be hiccup free or you abandon your cart, regardless of whether you are on your desktop or your mobile phone. Your tolerance for an experience outside of what you are used to is nil. This doesn’t just apply to shopping carts, but navigation and page layout.

These striking similarities in the way you access and use a website are called UI (user interface) patterns. These very specific patterns have matured to a point where there is little to change or improve upon. They deliver a consistent experience to your user. The minute you require your user to think about how to use your website, you have lost them. Don’t get cute with impactful elements like your navigation, be predictable.

So what “universal” design elements are working?

1. Hamburger Menus

Yes, that little icon to access a menu on a mobile phone has a name. It’s called a hamburger. (Cue the giggling.)

I’m not a fan of messing with what works when it comes to navigation, but the hamburger menu is an exception. It’s not exactly recent news that more searches are performed on mobile than on desktop, so experiment with your navigation by using this to your advantage. Users are familiar with the hamburger icon, so why not add it to your desktop site? Just because a user is accessing your site from a desktop doesn’t mean they suddenly stop identifying with the hamburger.

This shift in thinking can provide you with additional options for your navigation. The best practice has always been to keep a main navigation at around five options, more and it’s just overwhelming to not only the user but the page. The hamburger menu let’s you move outside this “rule.” With a hamburger, the menu stays hidden until a user makes the conscious decision to access it. From here, you can incorporate as many options as necessary to deliver a user with the best experience possible as opposed to a contrived and condensed menu.

2. Long Scroll

This is your one warning, readers. Don’t ever insert the words “above the fold” into a conversation with me unless you are referring to the latest issue of the New York Times. Here me now: There is no “fold” on a website – it’s a hierarchy tactic to sell newspapers on a stand, not a Web design standard. So get over it and move it; it doesn’t exist.

With that moment of necessary tough love out of the way, let’s talk about why this is the case.

Thanks to mobile apps like Facebook, Pinterest and Twitter, we are used to a long, continuous scroll. We use apps like these so often that scrolling when accessing a website is second nature. So don’t be afraid of a long homepage layout.

When a site utilizes a long scroll homepage, they allow themselves an opportunity to tell their story in a clear, concise and well-planned manner. When you aren’t cramming everything about yourself in the first 600 pixels of your website, you allow the users to take in your messaging, understand your differentiators, and be able to actually read the information on the page. Whitespace, similarly to the “less is more” concept, isn’t finished having it’s moment.

I really enjoy designing long homepages; they are super versatile and support an agile methodology. As an added bonus, I find that it gives users an extra avenue to browse your site. Yes, they can move through your site through the main navigation, but what if they blow past your navigation because they anticipate a long scroll? Use this to your advantage by providing relevant links to the next logical step through your site in specifically planned “bands”.

3. Card Layouts

Shoutout to Pinterest for this one.

Card layouts present information in small, scannable, bite-sized chunks that are perfect for users needing to digest loads of information quickly.

From a usability perspective, each card becomes it’s own singular content container. This is perfect for responsive organization and delivers a super consistent experience no matter the device.

4. Hero Images

Yes, hero images still make this list. But before your eyes start to glaze over, listen up. Hero images are being utilized in new ways, keeping them a very relevant part of the web trends conversation.

Vision is the strongest human sense, so the quickest way to grab a user’s attention is with a bold, relevant, high-quality image. Seriously, don’t skimp on quality. It’s 2016, so we live in a world where bandwidth and data compression are at an all time high. Don’t diminish the quality, because you don’t have to.

If you aren’t feeling the ambiguous homepage photo, you can still utilize a hero image. Illustration is becoming more and more relevant in contrast to the HD photo route. There is something about illustration that is tactile, timeless and personal. It can translate a concept in a less literal way allowing the user to interpret what you are trying to say as opposed to forcing them to listen. An illustration can connect with a user much more seamlessly than a photo that features horribly posed stock models.

5. Flat Design

This isn’t a new concept, and it’s something we have seen make this list over the last two years. But if a concept has matured to the height of relevancy, who are we to ignore it?

Flat design has become and will continue to be the dominant design aesthetic. Why? Responsive design. Flat design produces not only a cleaner design, but cleaner code and reduced load times. Mobile browsing has risen to total power and every design decision has to cater toward it. Hell, even Google caved to flat design.

Expect to see more minimalist designs, vibrant color schemes, simple and bold typography, as well as thumb-sized buttons.

Jump, But Don’t Me Ask How High

If I’ve prompted you to send an email to your designer at this very moment, pump the brakes.

Just because these items are trending doesn’t mean you need to implement every single one right now. Keeping up with the latest in Web trends is incredible important, but the implementation of any of these trends needs to be in the best interest of your users.

Set up a meeting with your designer, review your audience personas and do some user testing. Could any of these trends enhance the usability and overall experience of your website? If they will, implement them slowly and test the results. A growth-driven design strategy is the best possible approach to introducing and implementing design trends to and for your users.

Remember, despite what the design world may be feverishly tweeting about, every decision to change your website has to be influenced by your users.

Whether you’re in a mood of designing a website yourself or hiring a developer, it’s important to know exactly what you want from your website. For most business owners, that’s leads. Converting visitors of your site to potential sales should be the main focus of your website, no matter what. So how do you do that? Follow this guideline which breaks down the science behind designing a website for maximum leads.

Does it pass the squint test?

An easy way to determine if the focus of your page is clear is to perform the squint test. This simply requires you to take a step back from the screen and squint your eyes at the display. What do you see? Likely a blur with only basic shapes jumping out. This gives you a rare but telling perception of the visuals on your page. If you find yourself confused by what you see or your eyes darting around to try to grab onto a single focal point, your design may be flawed. If you find yourself looking in the right direction, at your call to action, you probably have achieved the layout for maximum conversions.

Less is more.

Maybe you have a list of all the things you want on your website. Or maybe you have bookmarked all the websites that you like. While inspiration is key to reaching your design goals, you don’t want to get greedy and try to squeeze too much into your website. Shave down your list to a few main focuses, and narrow those to two or three. At the end of the day you want your website to tell a succinct story with a beginning, middle and end (one that guides your visitor to a call to action). If your website design isn’t well organized, you’ll end up with a little bit of everything and a whole lot of nothing.

Make your call to action clear.

Your call to action should be clear from the moment a user arrives on your page. The landing page should only have one CTA and it should be blatantly obvious. Choosing your CTA is simple. What do you want the visitors of your website to do? Buy your product? Call your business? Determine the most important thing you want visitors to do and make that the top priority of the page.

Identify what makes your company different.

You’re likely not the only dentist around or the sole lawyer in your city — but there is probably something that makes you unique. Your website should identify to visitors what your unique value proposition is. If you think because they’re on your site, they are already interested, you might be wrong. They could have ended up there because they are interested in finding a dentist or lawyer, but not necessarily because they are interested in you. If your website doesn’t sell them on why they should hire you over your competitors, they may keep browsing.

Each page should validate that you’re trustworthy.

While consumers want the best, they also want to feel comfortable. Comfortable in the decisions they make and the products and services they spend their money on. Quiet your visitors’ concerns and confirm that your company is in fact trustworthy through your website. There are many ways to give evidence of your credibility. You can share the satisfaction of past customers by including testimonials on your site, show off your client roster by displaying their logos, and displaying positive reviews through press features. If your site is an ecommerce store, in addition to trust your customer will want to feel secure to shop. Show them they are by advertising the security badges your site holds.

Balance text and visual elements.

Many websites say too little or don’t say enough. You want your website to be visually pleasing while also providing helpful information. Be straightforward and concise in your copy, keeping your brand’s tone and voice in mind. Use visuals to attract your visitors and entice them to read more. When your site has a good balance of text and visual the harmony will be apparent, and the experience for the user will be much better.

Here we will discuss Classic landing page mistakes. One of the biggest clashes in design has been the question of whether to strip down your landing page to the point where it’s so minimal that it has no navigation at all. Proponents argue that the only thing on a landing page should be the call to action button, so as to eliminate all distractions and increase conversions; opponents will say that’s too extreme. So how do designers know what the best course of action is when it comes to landing page design?

In general, your landing page should absolutely be as minimal as you can make it because distractions (ie. anything that takes users and leads away from your page goal) will cost your site money.

Remove navigation

One of the reasons this discussion still exists today is the fact that many landing pages still have navigation bars, sad to say. Just16% of all landing pages are free of navigation, which is alarming because of all the lost conversion opportunities. Designers who include navigation on their landing pages aren’t looking out for the best interests of their clients.

If you happen to have a client who insists on navigation on the site’s landing page, it’s your job as the designer to educate him. Point him to numerous studies like this one, backed by hard data, that show that taking navigation away from a landing page increases conversion rates. This is true for any type of content that the page is offering, from free trials and demos to ebook templates and content-creation kits.

Sure, your client may push back because of various reasons such as disbelieving the data, branding (company logo on the navigation menu), or refusing to prioritize the importance of removing the navigation on a landing page. In all these situations, gently persuade your client by consistently impressing him with case study after case study:

• Child-minding site Mindersincreased its conversion rates by 90% after removing navigation
• Kitchen tool-maker Yuppie Chefincreased its conversion rates by 100% after removing navigation

The Light Phone site gives you two simple options: pre-order, or scroll for more information.

Drop stock images

With the navigation menu gone, the next thing on your list to ax is stock images. These dreaded and generic nightmares that celebrate insincerity will hurt your clients’ conversion rates, too. Stock images fail to inspire trust on a landing page because it’s almost like a business concealing who’s behind it.

So on your landing page, be sure to use real images of the people behind the product or service, as nothing inspires conversions like credibility.

Further, be sure to place images on top of the landing page headline. This is highly important, as marketing guru David Ogilvy himself found when he conducted research, headlines underneath images are read by 10% more viewers. Of course, when more people read your page’s headline, more continue reading down the page.

Now that you have images under control, you have to make your page’s flow work its way toward the all-important call to action button.

Irving Farm’s site uses real photographs to pack the site with the company’s brand personality.

Focus on calls to action

One of the hardest things to possibly design on a landing page is the call to action button. It requires a lot of thought and consideration because it is the star of your page, the whole reason it exists. If your page flow and information architecture make your offer persuasive and clear, then visitors should have no problem clicking on the button.

There are a couple of things to get right.

First, there’s the color: it should feature good color contrast so that your visitors can easily find and click it.

Then, there’s the size: it has to be big enough to be easily read.

You can also add a directional cue next to the button to make it all the harder to miss.

Don’t neglect the button copy. It should be persuasive and use a sense of urgency. This means using action-based words like “hurry,” which is also one of the most persuasive words in the English language, and “now,” which also speaks of urgency.

As web designers and web developers you are already familiar with Design and Development Terminology, there is a certain amount of terminology that we use on such a regular basis that it often doesn’t occur to us that other people that we’re working with, including our customers, might not know what some of the things we’re referring to are. We’re working on a bit of a ‘glossary of terms’ at the moment to help clarify some of words we use – this is helpful in that we can provide a copy to clients to refer to as and when they choose, but it’s also helping us to become more aware of the words and phrases that we commonly use without necessarily explaining. And hopefully this awareness is helping us to communicate better with our customers.

So as we are progressing and adding more terms to our glossary, I thought it might be useful to share a few of the most commonly questioned ones.

Responsive Design

As an industry we’ve got so caught up in the importance of responsive design that sometimes when we talk to our customers we forget to explain exactly what responsive design is and why it’s so important.

A website design that is responsive is called such as it will respond to the size of the screen on which it is being viewed. So rather than there being a ‘mobile version’ and ‘desktop version’ of your website, there is only one version, but it is designed with the various screen sizes in mind and the content of each page will move and resize to suit that size.

Content Delivery Network (CDN)

We’re all aware of the negative impacts of a slow website, and we often recommend the use of a content delivery network (CDN) to our customers, especially for image heavy sites such as an ecommerce site.

A content delivery network is a method of duplicating website content on a series of servers based at strategic locations across the Internet. The fundamental purpose of using a content delivery network is to minimise the time it takes for web pages to load or for site users to download digital content.

Content delivery networks work on the principle that the shorter the physical distance data has to travel over a network, then the fewer the number of intermediate nodes and servers there are between the data source and the end user.

So by hosting your content on a series of local servers, the fewer the steps your information generally has to take on its way to the end users. And, as a result, not only are your web pages loaded more quickly but also more reliably.

A content delivery network is also essential in ensuring continuity of service. If a neighbourhood server goes down then another will take over temporary responsibility for delivering your content, meaning that your website still remains available.

Cookies

With changing laws and guidance on data protection, you’ve probably noticed the message that appears on a website the first time that you visit a new website informing you about the site’s use of cookies and asking you to accept or perhaps just close the message.

But what exactly are cookies? Cookies are small text files that are placed on to a users’ computer by the website’s server. They are unique to the web browser that you are using and contain anonymous information such as unique identifiers. Only that website’s servers can retrieve the contents of that cookie.

So what is the point of cookies? Cookies allow a website to store information about your preferences so that content of the website can be tailored to you.