Active Record Without a Rails App

Original Source: http://blog.teamtreehouse.com/active-record-without-rails-app

When you want to work with Ruby on Rails models, even if you’re just playing around, you have to go through a few steps:

Create an app directory
Create a database
Generate model classes
Run migrations

But sometimes you need something much more lightweight. When I was creating code challenges for our new Active Record Associations in Rails course recently, I needed to simulate a full Rails environment without actually loading Rails (which would have been too slow). So I created a setup that:

Loads just the Active Record library, not all of Rails
Creates a database entirely in RAM, not on disk
Sets up the database without running migrations

I wanted to share my results with all of you, so you can experiment with new Rails models without having to create full Rails apps.

Start learning to code today with a free trial on Treehouse.

The Code

The bulk of our simulated Rails app resides in a single file. This particular setup mimics an app for a veterinary office, including an Owner model that has_many instances of a Pet model. (But you can substitute model classes of your own, if you want).

Create a file named vet.app, in any folder you want, and paste in this code. (We’ll explain all the code in a bit.)

File: vet.rb

# Instead of loading all of Rails, load the
# particular Rails dependencies we need
require ‘sqlite3’
require ‘active_record’

# Set up a database that resides in RAM
ActiveRecord::Base.establish_connection(
adapter: ‘sqlite3’,
database: ‘:memory:’
)

# Set up database tables and columns
ActiveRecord::Schema.define do
create_table :owners, force: true do |t|
t.string :name
end
create_table :pets, force: true do |t|
t.string :name
t.references :owner
end
end

# Set up model classes
class ApplicationRecord < ActiveRecord::Base
self.abstract_class = true
end
class Owner < ApplicationRecord
has_many :pets
end
class Pet < ApplicationRecord
belongs_to :owner
end

Now to actually use these models. In the same folder, create another file (you can name it anything you want).

File: your_code.rb

# Load the above file
require ‘./vet’

# Play around!
owner = Owner.create(name: “Jay”)
owner.pets.create(name: “Max”)
owner.pets.create(name: “Chai”)
p Owner.first.pets

If you run the above file from your terminal, the model objects will be created and saved to the in-memory database!

$ ruby your_code.rb
— create_table(:owners, {:force=>true})
-> 0.0193s
— create_table(:pets, {:force=>true})
-> 0.0008s
#<ActiveRecord::Associations::CollectionProxy [
#<Pet id: 1, name: “Max”, owner_id: 1>,
#<Pet id: 2, name: “Chai”, owner_id: 1>
]>
$

And when Ruby exits, the database will be removed from memory, leaving you with a clean slate again. You don’t need a Rails app directory or a SQLite database file; all you need is these two Ruby code files.

How it Works

If we’re just playing with Active Record models, we don’t need all of Rails, we just need a database adapter and Active Record itself. These two lines load the necessary libraries:

require ‘sqlite3’
require ‘active_record’

If you use the special value of “:memory:”, SQLite3 can write everything to a database in RAM, rather than a file on disk. Sure, everything disappears when Ruby exits, but that’s actually preferable when you’re just playing around. These lines set Active Record up to use an in-memory database:

ActiveRecord::Base.establish_connection(
adapter: ‘sqlite3’,
database: ‘:memory:’
)

Your model classes won’t work unless the database contains the appropriate tables and columns. A Rails app maintains its database setup in a file named db/schema.rb, and that file can be used to recreate a database from scratch, without running migrations. But the schema doesn’t have to be kept in a separate file; we can just throw it straight into our single-file app!

ActiveRecord::Schema.define do
create_table :owners, force: true do |t|
t.string :name
end
create_table :pets, force: true do |t|
t.string :name
t.references :owner
end
end

And then we need the actual model classes. These lines set them up:

class ApplicationRecord < ActiveRecord::Base
self.abstract_class = true
end
class Owner < ApplicationRecord
has_many :pets
end
class Pet < ApplicationRecord
belongs_to :owner
end

Now to load your makeshift Active Record environment, and set up the database. This line looks in the current directory for a file named vet.rb, and runs the code it contains:

require ‘./vet’

Once that’s done, you’re free to create new instances of your model classes, save them to the in-memory database, and load them back out again!

owner = Owner.create(name: “Jay”)
owner.pets.create(name: “Max”)
owner.pets.create(name: “Chai”)
p Owner.first.pets

Other Stuff to Try

You don’t even have to create multiple files for this – you can house all your code in a single file. For example, here’s a mini-app that lets you play with Post and Comment models from a blog.

The next time you’re troubleshooting an issue with your models, or you just want to show off your code, you don’t have to share a whole Rails app. Instead, you can create one of these miniature apps, and share everything you need with a single file!

P.S.: If you liked this post, you should try out our new Active Record Associations in Rails course!

The post Active Record Without a Rails App appeared first on Treehouse Blog.

From Web Development to iOS Developer: Laurie’s Story

Original Source: http://blog.teamtreehouse.com/web-developer-to-ios-developer

We first met Laurie Gray, an inspiring Scottish Treehouse student, two years ago when he shared his story with us. In less than a year of learning with Treehouse, Laurie had learned to code, switched career paths, started his own freelance business and landed a part-time job as an in-house web developer, which later became a permanent position. Since then, Laurie’s career has continued to evolve, and his journey as a programmer has taken a new direction. Today, Laurie has reached his dream career as a full-time iOS developer. Not only does his role satisfy his thirst for knowledge and intrigue for technology, but he also now works alongside a team of other talented developers.

We reconnected with Laurie to hear more about his experience evolving from web developer to iOS developer and to share his advice with other aspiring iOS developers.

Start learning to code today with a free trial on Treehouse.

What first encouraged you to learn to code and pursue a career in the tech industry?

From the moment I first saw the iOS App Store, heard about the iPhone and saw the power to put apps in people’s hands that they could physically interact with, I became increasingly interested in development. Programming suddenly became very relevant to me, however, at the time it was still shrouded in total mystery; it seemed to be like magic that code could make such amazing things. At the time I didn’t even know how to use a semi-colon correctly in English, never mind whilst programming, so I essentially had to learn everything from the very beginning.

I didn’t even know how to use a semi-colon correctly in English, never mind whilst programming, so I essentially had to learn everything from the very beginning.

I started to get into web development as a means of transitioning from my job at the time and did this outside of my working hours supporting my family as the sole-provider of income for our household. Initially, it was very difficult to pick up some of the most basic concepts, especially when learning Javascript, but over time it began to make more sense and my skills started to grow. I managed to get a part-time position as a frontend developer shortly afterward and then it became my full-time occupation. It was a marvelous feeling developing every day and I loved every second of that job, however, I began to develop apps for the company I was with and I was delighted to begin transitioning into my dream career of being an iOS app developer.

You’re now a full-time enterprise iOS developer. Tell us a little about how your career has evolved since you last shared your story with us.

When I last shared my story I was just starting out on my journey as a programmer. It was my dream to be one day working as an iOS developer, particularly on large-scale enterprise applications and I had no idea how much I would learn on the journey to making that dream become a reality. I have met many incredible and inspirational people along the way to help me reach where I am now (both inside and outside of the tech industry).

I was always the sole developer in my last position which was an interesting challenge. Now I am surrounded by phenomenal developers who constantly share their knowledge openly and don’t mind taking the time to help out when I’m really stuck.

One of the things which I’m so grateful for is that I have several mentors now. Having someone to direct you, give you helpful hints every now and then as well as show you ways of doing things that stretch your thinking has drastically changed the way I approach problems and coding in general. It has really pushed me forward these last few months and seeing their sheer fluency in several technologies has raised the bar for what I expect of myself and provided me with someone to model myself on.

web developer to ios developer

Having someone to direct you, give you helpful hints every now and then as well as show you ways of doing things that stretch your thinking has drastically changed the way I approach problems and coding in general.

What have you found the greatest challenge while learning to code?

The most challenging thing about learning to code is learning on your own for long periods of time. Traditional education gives you small outcomes with planned curriculums which may or may not be relevant to your end goal. Programming contrasts wildly with this! You tend to spend most of your time on the very edge of what you can understand and are trying to use that knowledge – while it is still very fresh – to solve some problem. Furthermore, a lot of this time is spent on your own, without anyone to show you if you’re doing it correctly or not. This can be very incredibly frustrating, especially when you don’t know why your code doesn’t work!

It can be easy to lose direction when you’re working towards being proficient in a certain language or framework and this can lead you into a place where you might get a bit lost on your journey.

What has the value of a Treehouse education meant to you?

Treehouse gave me something that I couldn’t find anywhere else: a track to follow with encouraging teachers. With the mountain of information out there I would have found it difficult to create anything concrete if I didn’t have some sort of route with a definite goal at the end. It was incredibly practical with less theory and more hands-on development and it met my thirst for knowledge where I could take several tracks in order to learn the skills I needed to be employable.

The teachers are super encouraging and somehow that really comes across in the videos. Positivity has an infinite impact on you and you need every bit of it you can get whilst learning to code.

Positivity has an infinite impact on you & you need it whilst learning to code.
Click To Tweet

What are your favorite aspects of working in the tech industry compared to your past career?

My thirst for knowledge has only ever been satisfied when working in tech. It is the only career I’ve had where every single day I am absolutely set to give my all from morning to night and I rise the next day loving it even more. I simply can’t get enough of it. The people within the community are so inspirational and creating things all day is just the best thing on earth. There is nothing quite like it!

What advice would you share with aspiring iOS developers?

I remember going to the stories page on Treehouse when I was starting out to read of people who had managed to transition into a job as an app developer. It really helped me get excited that it was possible and I want to tell those who are reading my humble story that in all honesty being an iOS developer is the most fulfilling job I have ever had. I absolutely love it. However, when you’re working towards making that dream a reality it is incredibly difficult. It feels like you’re going at it every day and not noticing any difference. I know how you feel!

I want to tell everyone who is interested in working in iOS that you absolutely can do it. No one can stop you. You’re limitless.

If I was to offer any piece of advice though I would say give yourself time, practice writing code and most importantly, build something you’re passionate about. Everyone gets into app development with a desire to make something of their own creation. Tap into that creativity and you’ll go much farther than just following other people’s lead.

Every now and then check your old work and you’ll see progress and always be working on something, no matter how small.

Most importantly I would say go out and actually meet real developers. Learning on your own makes it hard to know if you’re going at a good pace and talking things through with an iOS developer can really give you a lift and a catapult you forward towards your goal. Most developers will totally be able to relate to you even early on and will offer you advice and tips that can help. Also knowing people in the community opens doors for you later on.

My thirst for knowledge has only ever been satisfied when working in tech. It is the only career I’ve had where every single day I am absolutely set to give my all from morning to night and I rise the next day loving it even more. I simply can’t get enough of it.

Self-Taught Developer to Web Development Director: Jim’s Story

The post From Web Development to iOS Developer: Laurie’s Story appeared first on Treehouse Blog.

The CSS attr() function got nothin’ on custom properties

Original Source: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/

Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn’t know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is within an attribute on that HTML element.

It’s like this:

div::after {
content: attr(data-whatever);
}

That’s certainly interesting. You could use it for (rather inaccessible) tooltips, for example:

<button data-tooltip=”Information only mouse-having sighted people will see.”>
Button
</button>
button:hover::after {
content: attr(data-tooltip);
/* positioned and styled and whatnot */
/* ya, a :focus style would buy you a tad more a11y */
}

But you can’t put HTML in the attribute value, so those tooltips are limited to a string value, and couldn’t have a title, link, or anything like that inside them.

Here’s a better use case. There is an old print stylesheet chestnut where you use attr() to add the URL’s to links, so you can actually see what a link is linking to:

@media (print) {
a[href]::after {
content: ” (” attr(href) ” )”;
}
}

That’s clever. But what else? Could you pass a color down?

<h2 data-color=”#f06d06″>
Custom Colored Header
</h2>

That’s not invalid, but it isn’t useful.

h2 {
/* Not gonna work */
color: attr(data-color);
}

The value from attr() is a string. Even though that string is in the same format as a hex code, it won’t be used as a hex code.

Nor can you pass a URL that can actually be used in something like background-image(). Nor you can pass a unit like 3, 20px or 4rem or 0.8vw.

CSS’s attr() function is only strings, and strings are only really useful as content, and content (being unselectable and somewhat inaccessible) isn’t particularly useful anyway. You can’t select the text of psuedo content, for example, nor search for it, making it rather inacessible.

You know what can pass any sort of value and is equally easy to implement as attributes?

CSS custom properties!

You can pop them right into the style attribute of any element. Now those values are available to that element:

<button
style=”
–tooltip-string: ‘Ug. Tooltips.’;
–tooltip-color: #f06d06;
–tooltip-font-size: 11px;
–tooltip-top: -10px

>
Button
</button>

We’re passing a string to CSS above, but also a color and length values. Those values are immediately usable as-is:

button::after {
content: var(–tooltip-string);
color: var(–tooltip-color);
font-size: var(–tooltip-font-size);
}

Here’s that demo with some fiddly “logic” (would need to be improved a lot to be actdually useful) to allow variations:

See the Pen CSS Custom Properies Mo’ Betta’ than attr() by Chris Coyier (@chriscoyier) on CodePen.

This really isn’t any more accessible, for the record. If I were implementing tooltips for real, I’d probably read the heck out of this.

What about some other “good” use cases for attr()?

One that comes up a lot is responsive data tables. Imagine a table with headers along a top row and rows of data below:

<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
….
</tr>
</thead>
<tbody>
<tr>
<td>Chris</td>
<td>Coyier</td>

</tr>

</tbody>
</table>

Rows of data like that might become problematic on small screens (too wide). So in a reponsive data table, we might hide that top row, and show labels on a per-cell basis instead.

@media (max-width: 500px) {
thead {
display: none;
}
/* Need to reveal another label now that we’ve hidden the normal labels */
}

Where does that label come from? We could do…

. …
<tr>
<td data-label=”First Name”>Chris</td>
<td data-label=”Last Name”>Coyier</td>

</tr>

Then:

td::before {
content: attr(data-label);
/* Also display: block things and such */
}

That’s a pretty good use case. If we use some kinda of accessible hiding method for that <thead>, it might even pass a11y muster.

But this same exact thing is doable with CSS custom properties…

. …
<tr>
<td style=”–label: ‘First Name’;”>Chris</td>
<td style=”–label: ‘Last Name’;”>Chris</td>

</tr>
td::before {
content: var(–label);

}

Eric Bidelman pointed me to a method of using psueudo content to show an input’s value.

<style>
input {
vertical-align: middle;
margin: 2em;
font-size: 14px;
height: 20px;
}
input::after {
content: attr(data-value) ‘/’ attr(max);
position: relative;
left: 135px;
top: -20px;
}
</style>

<input type=”range” min=”0″ max=”100″ value=”25″>

<script>
var input = document.querySelector(‘input’);

input.dataset.value = input.value; // Set an initial value.

input.addEventListener(‘change’, function(e) {
this.dataset.value = this.value;
});
</script>

That feels a smidge dangerous to me since I didn’t think pseudo content was supposed to work on replaced elements like an <input>. It’s probably a job for output, and the JavaScript would be essentially the same. You could use pseudo content with the additional element, but there’s really no need for that.

Exploiting the fact that psuedo content can’t be copied is also clever. For example, GitHub does code block line numbering with data-line-number=”” and ::before { content: attr(data-line-number); }.

Nobody likes selecting line numbers when they are trying to copy code! Good use here (probably even more flexible than CSS counters), but again, something that CSS custom properties could handle as well.

<td style=”–line-num: 5″> … </td>

You could argue this is better because if you did want to use CSS counters, you could use that first value to kick things off and not need it on every line.

See the Pen Line Numbering by Chris Coyier (@chriscoyier) on CodePen.

Same deal with typographic trickery involving duplicating text in CSS for stylistic reasons. Check out this cool demo by Mandy Michael using attr(). I’m sure you can imagine how –heading: “Fracture”; could do the trick there.

The CSS3 Values spec (in Candidate Recommendation) has a way to make attr() useful

I’m not sure it matters much, as I’d argue CSS custom properties are a near total replacement for attr(), but the spec does specifically cover this, presumably as an attempt to make it more useful.

The idea is to set the type of value as you grab it in CSS.

<div data-color=”red”>Some Words</div>
div {
color: attr(data-color color);
}

Or…

<span data-size=”50″>span</span>
span {
font-size: attr(data-size px);
}

But as far as I can tell, no browser supports this.

The CSS attr() function got nothin’ on custom properties is a post from CSS-Tricks

New Illustrated Lettering Class with Gemma O’Brien

Original Source: http://justcreative.com/2017/10/26/illustrated-lettering-class-gemma-obrien/

Fellow Aussie, Gemma O’Brien (aka MrsEaves), is a talented award-winning artist who I started following a few years back when I saw her speak at a design conference. She creates incredible, envy producing lettering, illustration and typographic work.

The good news is that she has just released a brand new Skillshare lettering class.

In the class, you’ll create an intricate, illustrated letterform — and level up your skills with new creative approaches to typography, drawing, digital layout, and more.

Every lesson breaks down her step-by-step approach, while also sharing illustration and composition techniques you can add to your personal repertoire and bring to projects of your own.

All are invited to join this class and flex their creativity. Whether you’re new to illustration and looking for a weekend project, or a seasoned artist aiming to create a complex piece, you’ll gain insights and skills for use again and again.

Once you dive in to Gemma’s creative lettering, you’ll never look at illustration the same way again.

2 Free Months of Skillshare Premium!

Get unlimited access to this premium class and 17,000+ more with Skillshare Premium. .

» Get started for free

10 Design Principles That Will Dramatically Boost User Experience

Original Source: http://justcreative.com/2017/10/30/10-design-principles-that-will-dramatically-boost-user-experience/

This article was contributed HubMonks.

A strong user experience (UX) is instrumental in your online marketing success. Increased engagement results into increased leads, which translates into greater revenue.

In this article we will specifically dissect the design principles that influence the extent to which your web page performs for users.

Page Objectives

 

It is not enough to say that you want an excellent website with a good user experience. See the difference between UX and UI here. It is vital to define what your visitors and your business should achieve from the web page. It should be understood that your goals and the audience’s goals may differ. Your visitors’ goals are about finding information or getting a downloadable eBook, while your goals may include increasing engagement, form fill-ups or downloads. The trick is to strike a balance to create a win-win situation for both users and your business. Your goals should help you in establishing the following:

Who the target audience are?
How to craft effective content?
How to organize the website?
How to measure the effectiveness of the website?

In order to understand marketers’ vision it is important to have the key team-members of the design team while discussing online goals in an organization.

User Journey Mapping

User-journey mapping is a visual or a graphical representation of the overall storytelling from the user’s first touch point with your organization, to building a perspective around your service or product or brand, and communicates with them through various mediums. This process is very narrative in nature and requires a text-based approach to describe the nuances of the customer experience.

The story is told from the customer’s perspective, but also lays importance on the important intersections between user expectations and business requirements. Here are the key points that you will have to include in user journey mapping

Visual demonstration of the journey.
Understand user behaviour on the existing website analytics.
Understand the interactive elements that will help them achieve their goals.

Visual Hierarchy

Source: http://edgemm.com

The above picture clearly defines the purpose of visual hierarchy. Visual hierarchy covers almost all the considerations of design; however it tends to give importance to the vital elements of your web page where you want to draw the user’s attention. A robust visual hierarchy also groups similar elements and organize them into meaningful patterns to carry an effective communication process with the viewer. How does a designer actually create a good visual hierarchy? Well, they just need to look for that in their inventory! Here are the key components:

Size: Using size as a hierarchal tool is a great way to guide them to the key components of your web page.
Colour: Colour is a great organizer and also infuses personality. Bold and contrasting colors will demand attention.
Contrast: When audience see something on the web page that is a deviation from the others, they want to know more about it. You could differentiate an important part of the page from the core content of the page with the help of contrasting colors.
Proximity: If there are multiple sections in a web page, how you place related objects of a section is what defines a good proximity. It helps in clearly associating similar content.
Density and Whitespace: When you populate a section of the webpage densely, it looks unfavourable in terms of UX. Similarly, keeping too much space between elements will break the link. So, the elements need to be placed and separated with whitespace to differentiate which elements are related and which aren’t. 

F-Pattern Scanning

Visual signs in text such as headings, sections, bolding help users take shortcuts while scanning through the web page and they don’t need to read everything. When they don’t find these signals, they are left to help themselves. Users create their short while scanning the web page and make out if they would like to engage or not. According to this study by Nielsen Norman Group, the pattern of this scanning behaviour forms the shape of the letter “F.”

Source: Monsoon Consulting

If you want to ensure that your users’ attention is drawn towards the most important elements of the web page (Calls-to-action, forms, images, videos), it is highly recommended to follow an F pattern and place your elements accordingly. 

Responsive Design

Responsive design is like a jigsaw puzzle! Responsive web design requires movement of various elements of the page that changes the initial design. Organizing elements to fit could be a great challenge with responsive design as larger pages and their elements will have to shrink to fit on narrow platforms for a mobile phone or tablet. We have listed some vital considerations below:

Consider a mobile-first strategy.
Include a hamburger collapsible menu (or similar) in case of multiple items.
Optimize image for all the types of devices (desktop, smartphones, tablets).
Optimize the content for mobile devices as the content for desktop will occupy too much space.
Check the loading speed once the pages are live and check if certain design components are reducing the load speed.
Implement Google’s AMP (Accelerated Mobile Pages) that is meant to optimize the content load time on mobile phones.

Calls-to-action

Calls-to-action play a vital role in boosting your website conversions. A single call-to-action is empowered with the responsibility to attract attention and later get clicked on. These two factors will race your website towards a high ROI. So, what are the key principles of a call-to-action that designers need to consider?

Size: Decide the size of the call-to-action by ensuring that it gets noticed amongst the other elements of the web page. If the call-to-action button should be placed below a form, the size should be equal to that of the fields of that form.
Text: If the marketer has decided on the text for various pages and sections, they should be communicated with the designers with the copy. This will help them in determining the ideal size.
Colour: Colour plays 70% of the role in attracting the viewers’ attention. Ensure that it stands out from the rest of the section by smart usage of colours.
Button Shape: If there are various sections and smaller objects in a single webpage, how smartly you define a button by carving its shape is important. Ensure that the shape stands out from the rest of the objects.
A/B Testing: The best practice to gauge effectiveness of a call-to-action is by creating different variants of colour, text, and fonts. Monitor which CTAs are more successful. At HubMonks we insert the CTA from the HubSpot marketing tool for all our HubSpot COS web development projects so that clients are able to measure the button’s performance. 

Forms

There is a huge difference between forms and advanced forms that boost UX. Even forms have various design principles that help users understand its hierarchy and helps designers utilize less space with all the important fields included.

Label alignment helps users identify the field with its corresponding label. Proper alignment also consumes less space that ultimately boosts the psychological factor to get form-fills.
Placeholder text is a great innovation in forms, wherein the user is able to see the label inside the field which disappears once the user brings the cursor on the box.

Cognitive Load

 

Cognitive load in web design refers to the amount of thought process a person has to give while they are engaged in the buyer’s journey. The cognitive load theory is differentiated in two types for user experience:

Intrinsic cognitive load: It refers to minimal usage of copy so that the user is not hampered from completing a specific task on the web page.
Germane cognitive load: It refers to the effort devoted to process information and how user understands the pattern of the information by mentally organizing categories of information and any relationship among them.

Hick’s Law

Source: My Site Auditor

Designers could explain this law to the marketers so that users are not overwhelmed with too much information or options. Hick’s Law tells us that the time taken by a person to make a decision depends upon the number of choices available to him or her. See here for more psychology principles.

Interaction Design

Source: colossom.com

Interaction design is dedicated to creating engaging interfaces with prediction about the user behaviour. It is essential to know how users and technology communicate with each other. Here are some questions that you should consider when designing for the best interaction:

How users can interact? Which parts of the website will be interacted by the user with mouse, finger, or stylus?
Which clues will make it easier for the users to interact? The colour, size, shape, text will differentiate the objects and helps users in understanding these interactive points.
Is information chunked into seven items at a time? Users tend to keep only five-nine items in their short term memory.
Are various sections of the website differentiated with the help of edges and corners? Elements like menus need to be differentiated by these design considerations. Moreover, they form a boundary stating that the finger or the mouse cannot be moved beyond that boundary.

Conclusion

The whole concept of user experience is centered around having a clear understanding of the targeted users, their needs, their values, abilities, and their limitations. It takes into account your business goals and objectives. The best practices of UX works towards promoting the quality of how the user interacts with your website and the perceptions of the product and all related services.

When you are running a marketing campaign, you tend to pull interested prospects and make them a part of your marketing funnel. At every point of this funnel, your users need guidance to move smoothly towards their journey with your organization. The points discussed in this article will help you create an exceptional user experience that helps them achieve their goals and boost your business initiatives.

Dev is the Head of Marketing at HubMonks, a HubSpot content optimization system (COS) partner for major inbound marketing agencies and brands. You can contact him on Facebook and Twitter. Top photo by PhotoSpin.

5 Ways to Design With Accelerated Mobile Pages

Original Source: https://www.webdesignerdepot.com/2017/10/5-ways-to-design-with-accelerated-mobile-pages/

The mobile web keeps growing at a rapid pace.

Smartphones continue to sell strongly, with Apple alone forecasting to bring in $180 billion from its smartphones by 2021. There are over 224 million smartphone users in the United States, making the mobile web an essential focus for any website owner.

The continued growth of mobile web users makes it important for designers and front-end developers to grasp proper design for accelerated mobile pages.

The practice of accelerated mobile pages emphasizes design choices that align with what search engines perceive as friendly, including a defined audience, high-quality content, proper formatting and seamless mobile compatibility. You will notice a variety of accelerated mobile pages when browsing Google in mobile by the abbreviation AMP in search results.

Accelerated mobile pages still use HTML, though they incorporate special elements that prioritize speed on mobile devices. AMP technical requirements are established by the AMP Project, with the standards worked on alongside major traffic influencers like Google. The project was created in response to clunky user interfaces and slow load times when browsing sites on a mobile device.

AMP emphasizes instant speed and a familiarized appearance, giving creators the ability to style their pages within the AMP framework. The boilerplate-centric design on most AMP pages gives a similar feel of navigation, despite differences in content presentation and color schemes.

The result is a faster, more cohesive browsing experience that improves drop rates, increases reader engagement and ushers in mobile web browsing as a mainstay.

With the power and potential of AMP so evident, it’s practical for designers to regard the tips below to help optimize the AMP experience, so their clients will benefit in a variety of ways.

1. Consider AMP-Carousel for the Homepage

Make an impression on the page most of your visitors will begin with. Static content can be displayed on AMP to showcase available products, piquing interest for e-commerce sites as well as those displaying general content.

The AMP-carousel feature enables designers to display multiple similar pieces of content on a horizontal axis. After importing the carousel component in the header, you can utilize type=”carousel” to show up a list of images, appearing as a continuous strip. It’s an eye-catching feature that’s ideal for the front page when you’re trying to hook visitors into seeing something beyond the homepage.

2. Show Related Posts and Products

Encourage site visitors to dig deep into your content. You can accomplish this by showing a list of related products or posts to the one they’re presently viewing. You can statically publish a list of relevant content, accomplishing it instantaneously by using <amp-list>, which populates a CORS request into an amp-mustache template to result in dynamically generated content relevance you can personalize to your specific preference.

If visitors enter a landing page that doesn’t align with their requests, they will either leave the site or look further for what they’re seeking. The suggestion of product alternatives is an excellent method to accommodate the user’s search process, at the very least drawing them more into the site. Even if they do not find what they are searching for exactly, they may find an alternative that does the job just as well.

3. Use AMP-Analytics to Find Areas to Improve

It’s important for any website owner to know how visitors are interacting with the content. The <amp-analytics> component can be used either directly or integrated with a third-party analytics platform, including Google Analytics. Within the <amp-analytics> tag, add the “type” attribute and set the value to your vendor of choice, of which there are many options. The <amp-analytics> component will help website owners have a clearer picture of what pages and design elements are resulting in conversions and which components are experiencing low user engagement.

It’s important to keep in mind when analyzing analytics that, with AMP, smart caching is naturally embedded. The result is that you may view less traffic than usual. Just keep the caching element in mind when analyzing your numbers initially.

4. Use the Built-In Validator

Ideally, designers will never get something wrong, but it can happen. To ensure everything is working properly on a page, use AMP’s built-in validator by adding #development=1 to the end of the page URL. If you open Chrome dev-tools and see the message “AMP validation successful,” then everything is working. If not, you can dig in deeper until the issue resolves. You can also use Chrome dev-tools to verify that all external resources, ranging from images and videos to custom fonts and iframes, are loaded properly.

Additionally, you can validate metadata by using Google’s Structured Data Testing Tool, either by fetching a URL or inserting a code snippet. These tools can help ensure everything is validated, so search engine crawling is enabled. On the note of search engine crawling, also double-check your robots.txt file, to verify that “Disallow: /amp/” is not present in any line. If it’s there, crawlers will not be able to access your AMP files.

5. Implement Ads Within AMP

Another benefit of AMP is a preexisting framework for implementing ads. The amp-ad, or amp-embed, component is a container to display an ad. The ads load alongside all the other resources, with the <amp-ad> custom element.

JavaScript is nonexistent inside the AMP document. Instead, AMP load an iframe from an iframe sandbox. You can set width and height values within <amp-ad>, with the “type” argument specifying the ad network displayed. The “src” attribute loads a script tag for the specified ad network, with various data attributes available to accommodate further configuration from ad networks.

You can also set a placeholder or option for no available ad, via the placeholder attribute. Video ads are also possible with native support, with thorough media component support.

Accelerated mobile pages help increase search engine visibility among mobile users, especially now that Google is embracing AMP pages in its search results.

Additionally, quicker loading times, flexible personalization and visual components that seek to improve bounce rate make for a better mobile user experience than ever.

Accelerated mobile pages provide a fantastic framework for the continuing growth of mobile web users.

The Amazing New BLOCKS 3.2: Easily Create Professional Website Templates – only $14!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

7 Ways to Keep Your Site Alive

Original Source: https://www.webdesignerdepot.com/2017/10/7-ways-to-keep-your-site-alive/

Once upon a dark, stormy night, when all was quiet, a lone web designer was designing away. He had Sketch open, a coffee nearby, and a cheerful tune in his wired earbuds, because Bluetooth is weird and has a delay that bugged the heck out of our Hero. Ahem, anyway…

During a lull in the music, our intrepid designer saw a notification on his phone. It was an email from his favorite customer, and he smiled. That smile disappeared when he read the contents. There were three broken links in the client’s site. Three!

“It’s okay.” he thought. “That happens someti…” But the list went on. The slideshow was broken. The layout looked a “little bit weird, somehow”. And worst of all, the contact form didn’t work.

In a panic, he scrambled to type in the URL. Everything looked fine. No, it looked pristine. He’d just fix the broken links and… no. He was thorough and diligent. He opened up ChromeFox* to see how the site looked in the client’s browser of choice.

It was as though staring into the mouth of Hell, and this portal to damnation was three pixels off-center. But all is not lost, dear Reader. Our fictional designer might be shamed, but we can help you avoid this. New web designers would be wise to follow this list, and save themselves from incredible awkwardness!

* All names have been changed to protect imaginary browsers.

1. Check Your Links

Every so often, go back and click on every link in your website. Every. Single. One. You should definitely do this after making any major changes to your site, obviously, but not only then. Servers can be weird sometimes. And if you link to outside sources of information, you need to check to make sure they’ve not been broken, removed, moved, or simply been eaten by some computer error.

Few things look as amateur as links that are no longer relevant, or don’t work.

2. Update Your Content

Out-of-date content doesn’t look great. It’s not as bad as a broken link, but it can make people decide to leave, and not come back. Up-to-date information is relevant information.

God knows how often I’ve been looking for information, only to have Google’s top results be four or five years out of date

Now, if you have a brochure site for a small business, and the prices are not often subject to change, it can be fine to mostly leave the content alone. But if you have any sort of blog, media feed, or what-have-you: keep it up to date. Update once a month at the least.

If you offer useful information, tutorials, or reference information, keep that up to date, too. Go back and make edits when stuff happens. You might even want to publish new editions of entire articles when things change. God knows how often I’ve been looking for information, only to have Google’s top results be four or five years out of date.

3. Test On New Browsers And Devices

When a new browser comes out, test your site. If you friend gets a new phone or tablet, ask to borrow it so you can test your site. New version of JavaScript comes out? Test your site with it. Get a new TV that can browse the web? You get the idea, I’m sure.

4. Double Check All JavaScript Interactions

This is actually a big one. So many sites now rely on JavaScript for basic functionality. This is a practice I’ve never condoned; but I’ve decided that I dislike beating my head against brick walls. Scripters gonna script. Large swathes of content, and even entire websites will stop working if their JavaScript stops working for any reason.

Even if you didn’t build your site that way,

5. Double Check All Forms

It’s one thing if a small widget stops working. That’s not ideal. Forms are another matter. Forms are typically used for contacting people, or buying things, and other very essential functions. They are one of the primary ways that users provide websites with vital information. If they’re willing to fill out a form, that means they’re at least partially willing to commit to whatever you have to offer.

Forms can stop working for a variety of reasons. Maybe the form has JS, and it stopped working (see above), or maybe the PHP version on your server got upgraded. Maybe the email account your contact form is sending messages to stopped working for whatever reason. Maybe it’s getting flagged as SPAM. Whatever the reason, check the forms regularly, so you don’t lose business.

6. Update All Hacks And Workarounds

Okay, sometimes, when you build a site, you use hacks. You use workarounds. When things get dire, you use polyfills. This is normal, and everyone does it; because no matter how ugly the hacks might be, your site must be beautiful.

But browsers get updates, browser market saturation changes, and CSS gets updated, too. At least once a year—and whenever you hear of any big changes to browsers that might affect your site—you should check to see if any of your hacks and workarounds are now obsolete. If they are, they could actually slow your site down.

7. Have A Backup Plan

No, I mean that literally. Have a plan for backing up your entire website. Now, any decent web host should be handling backups for you, for the most part. However for smaller sites, it’s totally worth it to make regular manual backups yourself.

Large sites are another thing entirely. People with data caps (now those are spooky) could easily run into trouble when downloading gigabytes of data regularly. In this case, look into a third-party backup solution. It costs money, but it’s worth it.

And that’s it. Regular testing and considerable preparation are what it takes to make sure you are never shamed by a site that fails to work, or even “Just looks wrong”. Good luck!

Last Day: 5,000+ Pixel-Perfect Icons from Icon54 – only $24!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

10 Inspiringly Designed Admin Dashboard Layouts

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/nE1jeYhXOc8/

Admin dashboards are an integral part of almost any web-based service or product. They form the area where users can interact with a product or service via a password-protected login stage.

Prominent examples include WordPress, Stripe, and Shopify. They typically include a significant amount of options and editable content. As such, the designer of an admin dashboard is tasked with incorporating these options while maintaining usability, design consistency, and simplicity.

When executed to a high level, the results can be stunning and present some of the very best examples of user interface and user experience design.

You might also like: 10 Free Bootstrap Dashboard Admin Templates.

V – Role Editor

Role Editor Inspiring Designed Admin Dashboard Layouts

This role editor dashboard uses an abundance of white space alongside a beautifully selected color palette to use across default avatars, icons and buttons.

Pehia Dashboard

Pehia Dashboard Inspiring Designed Admin Dashboard Layouts

A highly visual example, Pehia’s dashboard utilises subtle pink and orange gradients throughout as well as overlapping shapes, simple icons, and large user imagery.

Project Management Dashboard

Project Management Dashboard Inspiring Designed Admin Dashboard Layouts

This project management dashboard utilises a card-based user interface with a bold use of color for project status and tracking. The sidebar and cards contrast perfectly with the grey background color.

Zeta Hr Dashboard

Zeta Hr Dashboard Inspiring Designed Admin Dashboard Layouts

This simple but effective dashboard design by Zeta offers tremendous contrast and a beautifully spacious layout. The colors are on-point and highlight the different dashboard sections particularly well.

Sweetapp

Sweetapp Inspiring Designed Admin Dashboard Layouts

Sweetapp’s user interface focuses on white with a primary green color. Depth is provided via subtle shadows and border outlines. The design is spacious and the iconography is excellent.

Tenory Practice Activity

Tenory Practice Activity Inspiring Designed Admin Dashboard Layouts

This dashboard design by TenorySync uses plenty of white space and bold card background colors. The timeline has been executed beautifully with great depth and visual effect.

SpendStore

SpendStore Inspiring Designed Admin Dashboard Layouts

SpendStore has kept their use interface design very simple. It’s highlighted with beautiful gradient buttons and a satisfying off-pink highlight color. The details have been executed with precision in this admin dashboard.

Tapcore

Tapcore Inspiring Designed Admin Dashboard Layouts

Tapcore’s dashboard is exceedingly clean and uses many aspects of the Material design movement. The content sections use a subtle drop shadow for contrast and the iconography is cohesive throughout.

Metronic

Metronic Inspiring Designed Admin Dashboard Layouts

The Metronic admin dashboard template is a standout amongst competition. The navigation is unique but has a high degree of usability. The colors work beautifully throughout the graphs, charts, and typography.

Papanda

Papanda Inspiring Designed Admin Dashboard Layouts

Papanda uses a two-tone color scheme of blue and orange. It also integrates custom illustrations which are a delight to experience and offer extra brand continuity throughout the design.


Halloween Illustration: Well That's Pennywise!

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/6VrVxj5tWUM/halloween-illustration-well-thats-pennywise

Halloween Illustration: Well That’s Pennywise!

Halloween Illustration: Well That's Pennywise!

AoiroStudio
Oct 26, 2017

We are only a few days from Halloween, are you still trick and treating? Hah! I’ve been quite fascinated by the latest adaption from Stephen King’s movie “It”. With both events combined, it’s a nice occasion to revisit the main character of one of the scariest movies of the year. Hello Pennywise! Let’s take a look at this illustration for Halloween by Germany-based designer Martin Hoffmann, after having 3 days of free time between two jobs. Why not having fun taking a poke at Pennywise? What do you think?

Martin Hoffmann is a graphic & character designer and illustrator based in Stuttgart, Germany. Focusing his work into Book Illustration, Cover Design, Kids Art, Children Books, Visual Concepts, Scribbles, Story Board, Logo Design and more. Check him out on Behance.

More Links
Learn more about Martin Hoffmann at illustration-und-design.com
Follow Martin Hoffmann on Behance
Illustration
Halloween Illustration: Well That's Pennywise!Halloween Illustration: Well That's Pennywise!Halloween Illustration: Well That's Pennywise!Halloween Illustration: Well That's Pennywise!Halloween Illustration: Well That's Pennywise!Halloween Illustration: Well That's Pennywise!

 

illustration
digital art
halloween


5 CCleaner Tips and How to Use It Efficiently

Original Source: http://www.hongkiat.com/blog/ccleaner-tips-and-tricks/

CCleaner is considered one of the best PC cleaning utilities that offers multiple cleaning tools in a single interface to ensure your PC is clean and junk free. If you want to use CCleaner but…

Visit hongkiat.com for full content.