Posts

Responsive vs. Adaptive vs. Fluid Design

The world of web design has changed quite a bit over the years and continues to evolve as mobile-friendly design becomes more of the rule rather than the exception. When it comes to choosing the right layout for your website, there are a number of factors to keep in mind including style, typography, imagery, user experience, performance and online ranking just to name a few.

It used to be that sites were built with fixed dimensions — that were meant to be viewed on a desktop screen only. Now there are variations based off this original idea to make room for the influx of mobile users. Your users are demanding to view your site — not only on a computer screen — but on a tablet or a mobile phone. As a result, three popular considerations for web page layout are: responsive, adaptive, and fluid design. While each of these web designs has similar features, they each have their sets of pros and cons.

Defining The Different Types of Design Types

Responsive: websites are built with media queries that target more general break points that scale images, wrap text and adjust layout accordingly. This is my prefered strategy when building websites.

Adaptive: websites are built with media queries that target specific device sizes (e.g. iPhone, iPad, Android, etc). One of the problems with an adaptive layout, is that as new devices get introduced your code will need to be updated. Which isn’t ideal.

Fluid: websites are built using percentages for widths. The concept of fluid design was being used way before Ethon Marcotte coined the term “responsive design.” It’s pretty safe to say, that fluid design evolved into responsive design.

Fixed: websites are built using fixed pixel widths. While a design with fixed dimensions can sometimes be the quickest way to get up and running, it’ll provide a less user friendly across multiple devices.

Diving in: Responsive vs. Adaptive Design

Responsive web design (RWD) is what is recommended and rewarded by Google. The search engine continues to change its algorithm to include the growing number of mobile users and take into consideration how a mobile-friendly site should and does rank higher than those that are not responsive. A responsive design can help ensure that your website provides both a good user experience and adequate load time when viewing on a phone, tablet, or other mobile devices.

However, many web designers and developers have debated whether adaptive web design (AWD) edges out responsive, especially for older sites that already have a strong domain and web history. Think about it: it wasn’t that long ago that we designed solely for desktop. As new mobile devices are created and different screen widths and resolutions become a factor, it’s important to be able to go back and make an existing site mobile-friendly rather than starting over from the beginning. Adaptive design allows for this.

AWD uses a series of static layouts and detects the screen size to load the layout to fit however it’s being viewed. Typically, there are six common screen widths that cover the different ways that a user might view a website. Although creating multiple widths for the design of one website might seem like extra work, in some cases, in can be better for the overall performance and display.

The benefits of an adaptive site is that you can measure which views and resolution options are performing best and alter design and development for the sizes that are getting the most online traffic. For example, if your site drives the majority of its traffic through desktop, than you’ll want to make sure that you’ve addressed all constraints such as site speed, usability, aesthetics, and media load time (when applicable) that a desktop user might experience. You can still add views for different types of mobile devices, but with adaptive design, efforts can be based on what is top priority.

Alternatively, the benefits of responsive design are that it takes far less work to build and maintain. It’s applicable for all screen sizes and will adjust accordingly. While responsive design is fluid and will adapt to the screen no matter what device you’re viewing the website on, this type of design is far more complex and can create issues depending on the amount of content and media on the site. This may slow load time and ultimately, hinders the user experience.

The designer must keep in mind the widths of images and different features that will appear differently when automatically “resized” as a person changes their view from mobile to tablet to desktop. In each case, it’s important to perform testing and QA on multiple devices. For new sites, responsive would be the easiest way to go, but for sites that already have a desktop build, adaptive would most likely be a better option due to its ability to retrofit.

How Fluid Design Compares

A third option is a fluid design, which has the same adaptability as both a responsive site and an adaptive site. Fluid design doesn’t use fixed units, as with static sites, but rather uses the same percentage of space no matter what screen you’re viewing the site on. It’s able to fill the width of a page, but this can create challenges depending on the size of the browser.

Say for instance you’re viewing a multi-column web layout on a smaller screen, like a mobile phone or a tablet, the content may seem to be crowded within the page. Or, on the opposite end of the spectrum, if you’re viewing on a large desktop or a smart TV for a presentation, the content can look stretched. The styles and features of a website will affect fluid design and may affect the amount of whitespace seen depending on what size screen you’re viewing the website on.

The benefits of fluid design are that it’s user-friendly because it adjusts to whatever device the viewer is looking at, same as responsive design. It’s definitely an improvement over a static design; although some designers might still argue that it doesn’t allow for as much control.

What to Consider When Choosing a Website Design

With so many similarities between these three types of design, how do you know which is best? In today’s business world, a person’s website might be the first point of contact that a consumer has with your product, business, and/or brand. This means that if the user experience is poor, it doesn’t leave a good impression to continue the business-to-consumer relationship. That’s why when deciding on which design is the best fit, your audience is the most important factor. Who’s viewing your site? Who do you want to view your site? And, what kind of device are they viewing your site on? These are some of the questions that you and your team need to analyze and then strategize for when developing a new site or altering your current one.

This information can be found through Google Analytics or even through basic focus group testing. If your analytics show a high bounce rate, your site might be loading too slowly, may not be aesthetically pleasing, or it may not have resized to their screen size. This way you can see which areas cause a person to leave your site.

The second thing to consider is whether you will be building a brand new site or working with an existing site. Most new sites are being built with responsive design, which is advantageous, again because of the increase in mobile traffic. Older sites can still transition to mobile, but may best do so by choosing an adaptive design.

Third, it’s a good idea to project your goals. The time it takes to launch or re-launch a website depends on the amount of design time and optimization necessary to make your site fully functional across all mediums. It also requires the strength of a good development team who can code accordingly and across multiple layouts.

Then, of course, there’s the importance of considering how a site design will affect your search engine optimization goals. How much content will you be placing on the home page? How will the navigation be designed to benefit user experience? What resolution do images need to be? Will there be video?

No matter which design you choose, know that every designer will have a slightly different take on why responsive is better than adaptive or why fluid is equal to either of the two. The key goals to keep in mind are: desired functionality, adaptability to mobile, and the overall user experience.

How Much Does a Website Cost These Days?

Launching a new business involves many details, and at some point, you will start to think about your online presence. You need a website, and not just any website, but a fully functional site that includes some form of email capture, and enough branding to tell your story. Accomplishing these goals, however, comes with a price tag, and you may start wondering how much does a website cost these days.

The majority of customers — 61 percent — are researching products online. In fact, 12 billion searches are taking place each month in the United States, making a high-quality website very important. But once you start asking for quotes, you’ll likely discover that they vary greatly. You may receive one quote for $2,000 and another for $20,000.

So what is the difference, and what’s involved in the actual process of building a website?

Breaking Down the Costs

Many web designers will explain that pinpointing the exact cost of a website project is difficult. This is mostly because there are so many different variables involved, with no two projects being identical. For example, what kind of functionality and features do you need? Is it an e-commerce site? Do you need a blog? Do you already have content created, or will you need to have it written during the design process?

You may be figuring out these answers as you go along, which is totally normal, but it’s also helpful to have a nice little starting point to build off of. Getting a general sense of what’s involved in the process, and a ballpark cost for each task, will help you estimate your overall budget and solidify your project requirements. Here’s an average cost breakdown.

Domain name. One of the first tasks on your website development list is purchasing the domain name. Costs vary, but you can expect to spend around $10 annually.

Website hosting. Your website will need to be hosted, which basically involves a company selling you space on its server to store your website data and files. Costs vary, but you are looking at about $10 to $100 annually.

Premium theme. If your developer is building your website in WordPress, you may need to invest in a premium theme. Costs differ based on the specific theme that you select, but you will likely be paying a $50 to $200 one-time fee for a beautiful looking theme that you can change up to fit your specific needs.

Website planning, design and development time. This category is a large chunk of your overall budget, and also where you’ll get the most variation in quotes. A site can take anywhere from 1 to 1,000 hours to complete; and expect to pay anywhere from $25 an hour (professional in developing company) to $150 an hour (or more). Keep in mind that you pay for what you get, but price alone won’t indicate quality. It’s a tricky dance.

Images and graphics. Your website will need graphics to liven up all that white space on the page. Basic stock images cost around $10 each, while higher-end images may cost you hundreds of dollars. While many stock image options have improved, sometimes its best to invest in custom images that fit your unique brand.

Content creation. Will you be writing content for your website, or will you need outside expertise to develop the pages? If so, budget at least $150 per page of new content.

Other Factors That Affect Costs

Sometimes, you just need a basic website to get your business off the ground. Other times, the functionality you need is more advanced, such as e-commerce capabilities or special programming. Here are a few additional costs to factor into your budget.

E-commerce shopping carts, catalogs and payment processing. If you need this functionality, plan to pay anywhere from $1,500 to $5,000.

Maintenance costs. It’s also important to think about the future of your website. Will you maintain the website in-house or seek outside assistance for maintaining the site?

What happens if the site 404s at 2am, who’s your developer 911? Put aside some budget each month for mainenance — factor it into your costs (maybe anywhere from $250 to infinity).

It’s also important to consider the benefits of a responsive design, which automatically resizes for mobile devices and tablets — an increasingly important feature as more and more people access websites in this way. Also, factor in your needs for multimedia elements. For example, do you plan to feature video on your site? If so, include this requirement when requesting a bid.

Total Cost Ranges

At this point, you may have a general sense of what’s involved in building your website and what pieces need to come together, but what should you budget for total cost? Here are the general price ranges. They are complete estimates that you might just use as a rule of thumb:

Basic website — This level will allow you to brand and market your company, showcase your products and services, and use the site as a lead-generation tool. However, it may not have two-way functionality and features such as a blog or social media tools.

Price range: $2,000-$10,000+

Advanced website — You have all the components of a basic website, but you maybe also have something extra like a super-duper fancy design layout, e-commerce (so that you can sell products), or some optimized conversion considerations (like A/B testing, and deeper analytics for your email capture).

Price range: $7,500-$30,000

Custom website — This is suited for a large business with complex Web development needs, including social networking, blogging, e-commerce and other Web applications.

Price range: $15,000-$100,000

Taking the First Steps

The best way to get started with building a website is to work to define the project scope. List what your website “must have.” What items do you need that are nonnegotiable? Then, list your “nice to have” items. Present these items to developers to get bids on the project, and based on their estimates, you can add in — or take out — some of the nice-to-haves in order to make the project work with your vision and your budget.

By defining specific requirements upfront, and ensuring that you select a developer that is equipped to deliver to those specifications, you’ll ensure that your vision and desired outcome are achieved and there are no surprises along the way.

5 Fool Proof Tips for Building a Strong Web Developer Portfolio

The demand for web developers is growing quickly. But even with this rapidly expanding demand, if you’re looking for a permanent or freelance assignment, landing the right work can feel daunting. The competition can be intense, and trying to stand out can be exhausting.

Many employers will look at your education and work history, but what they’re interested in most is your web developer portfolio. What have you done in the past, and more importantly, does your work fit their needs? Fortunately, there are steps you can take that will differentiate you from other web developers, and make landing your next position or assignment more effortless.

You likely have an online portfolio, but what do prospects think when they view it? After spending time on your site, do they feel like you’re a natural fit for their projects? Or are they left with unanswered questions? Here are some tips for refreshing your web designer portfolio when it’s not getting the job done.

Develop a specialty. It may be tempting to highlight a broad range of experiences so you will “fit” whatever the visitor is looking for, but this can be a mistake. Instead, focus on highlighting expertise for the projects that you most want to pursue. Or even better, focus on specific niches and industries. When you get specific about project expertise, the right employers will be attracted to your work, and will perceive you as a “better fit” than the majority of competitors.

Develop points of differentiation. Many designers are available for work, which can make these professionals seem like a commodity, especially in the freelance market. So what makes you different? Maybe it’s your expertise in a specific niche, or perhaps it’s the way you approach projects. Don’t be afraid to weave your points of differentiation into every aspect of your site.

Don’t showcase everything, only your “greatest hits.” Think about your web design portfolio like a greatest hits album. Many projects could be included in your body of work, but there are some projects that are stellar. Cherry-pick the projects, and displaying only a select few, rather than everything.

Highlight your skills and abilities through testimonials. Prospective employers and clients want to know “If I hire you, what will working together look like?” Will you improve their overall work dynamic and deliver excellent outcomes, or will they have regrets?

Ask previous co-workers, clients and others who can speak to the quality of your work to write testimonials. Request testimonials on LinkedIn if possible, and then leverage that content onto your portfolio site, doubling the impact.

Develop a clear call to action on every page. Oftentimes, a developer will create a fantastic portfolio, but there is no clear call to action. What should your visitor do next? Maybe it’s a “Hire Me” button for freelance projects or “Request a Quote.” Or perhaps it’s a softer call to action, such as “View My Recent Work.” Whatever it is, don’t leave your potential customer at the end of the page without a clear next step or a good idea of how they can contact you.

Portfolio Building Blocks: Finding the Missing Pieces

You’ve figured out how to make your portfolio stronger, differentiate your positioning and showcase your best work, but what are the basic elements that your portfolio should have? More importantly, are you missing anything? Here are some basics that every great portfolio should include.

Name and picture. Your site and work might be compelling, but nothing adds a personal connection like a photo of you. If you prefer not to include a photo, and it fits with your personal brand, consider including a logo that reflects your individual brand infuse additional personality into your site.

Who you are. This can be a basic “About Me” page that details your background, relevant education and anything else that demonstrates your expertise as a web developer.

Contact details. This information should be on every single page. Once you sell a potential employer or prospect, it shouldn’t be hard for them to get in touch with you. Make the experience fast and easy.

Recent work. A carefully selected sampling of your greatest work.

Social icons and networks. Encourage visitors to connect with you on social networks, whether it’s LinkedIn, Twitter, Facebook or other media.

Building a Portfolio With Limited Samples

Developing a great portfolio may appear simple for the seasoned pro with many samples to choose from. But what if you’re a relatively new developer, and you don’t have many work samples? Even if you don’t have a large body of work, you can still create an excellent portfolio.

First of all, if you don’t have a few samples to showcase, get some quickly. This isn’t as difficult as many people think. The easiest way is to handpick a few companies in the niches where you’d like to work, and offer to do a pro bono assignment for them. In return, ask the client for a strong testimonial, assuming they are happy with the work. If all goes well, hopefully they’ll hire you in the future, or at least provide a solid referral to another prospect.

Potential clients and employers won’t know the sample was completed at no cost. And more importantly, once you’ve completed a few work samples, you can upload them to your portfolio and have a starting point. A few strong projects are enough to start. Once you’re established and have more samples, you can swap out older samples and focus on displaying the most impressive work.

The Next Steps

Depending on the current state of your portfolio, there may be lots of work to do. Don’t feel overwhelmed. Select a small task to complete each day. By taking a single step daily, you will build the required momentum to create an excellent portfolio.

A web developer’s portfolio will always be a “work in progress,” but by continually tweaking it and making it better, you will become an established developer in your niches, and land your next assignments with greater ease.

Sass vs. Less

If you’ve been in the world of web development for at least a few weeks, you’ve probably heard about Sass and/or Less.

That’s because Sass and Less are two of the most common CSS preprocessors in the industry, and are used by many web designers and developers alike.

In this article we’re going to talk about the differences between Sass vs. Less, and more importantly which you should learn as a beginner.

I’m a newb, what’s a preprocessor?

Formally speaking, a preprocessor is a program that takes in one “type of data and converts it to another type of data,” according to Shay Howe.

CSS preprocessers, like Sass and Less, convert into CSS so that web browsers can read the styles.

Some say Sass and Less are like supercharged CSS, because they are extensions of the CSS we know and love. They extend the CSS language by adding features like variables, mixins, functions, and more.

Don’t worry if you don’t understand what these words (mixin, etc.) mean yet.

What is important to understand is that using a CSS preprocessor like Sass or Less makes writing CSS easier, allows you to organize your stylesheets better, and is more maintainable.

The main takeaway: using a CSS preprocessor makes your workflow faster and more efficient. Overall, it makes your life as a designer or developer easier.

Learning a CSS Preprocessor

There are several options when it comes to CSS preprocessors, but the two most common are Sass and Less.

The good news is that once you learn one CSS preprocessor, it is not difficult to switch to another if needed.

Below I’m going to talk about reasons why you should consider each.

Reasons why you should learn Sass

Note: There is Sass (Syntactically Awesome Stylesheets) and then there is Scss (Sassy CSS). In this article, I will be saying Sass, but will be referring to both Sass and Scss.

1. Sass has better language ability.

When comparing Less vs. Sass it’s clear that Sass is more like programming. It has if/the/else statements, for loops, while loops, and each loops.

If you are familiar with writing programming languages, like JavaScript or Ruby, this will be nothing new. Except now you’re able to use them in your stylesheets, thanks to preprocessors.

Less has most of these capabilities, too. They are just not as complex.

Moreover, Sass allows you to do a more variety of math equations. And it has better selector nesting, which can help you keep your stylesheets more in line with DRY principles.

Overall, Sass has more advanced language features and capabilities.

2. Sass has Compass.

Compass is a beloved open-source CSS authoring framework.

Translation: Compass is a framework that goes along with Sass.

And people who use Compass, love Compass.

Even more, lots of big name websites rely on Compass, such as:

The problem? Getting started with Compass is not so easy. (However, there are a lot of awesome tutorials to help you out!)

Aside from Compass, there are other Sass libraries/frameworks. And, yes, there are libraries/frameworks for Less, too. (Check out a list of them all here.)

But none of the Less extensions compare in popularity to Compass.

Learn to Code Websites and Apps →

Reasons why you should learn Less

Less came to the scene after Sass in 2009. Less stands for “Leaner CSS”.

1. Setup (may) be easier

Less uses JavaScript. And you can get going with Less just by downloading less.js, where it will compile the stylesheets in the browser. However, this is not a good approach to take. (Because it will perform AJAX requests to grab the Less files, convert into CSS, and then inject the result back into head of document.)

Obviously, this is inefficient. However, if you’re just playing around and testing out the Less waters — this method will do.

Now, with both Sass and Less most designers/devs will use the command line to compile their files into CSS.

But if the command line terrifies you, fear not. There are a variety of GUI compilers available.

One last thing to keep in mind when setting up either on your machine:

While Less uses JS, Sass uses Ruby. Windows machines do not have Ruby pre-installed. Meaning setting up Sass on a Windows computer may be more difficult. (Again, this is where one of the GUI compilers could be helpful.)

2. Less is like training wheels

Many people say that Less is easier to learn than Sass. Some even say it’s like training wheels.

Moreover, Less’s syntax is more comparable to CSS. Which may be nice for people just starting out, wanting to move from CSS to a preprocessor.

The main differences between Sass and Less

Differences between the two are not massive. Here are a few key ones.

1. Less runs on JS, Sass on Ruby.

As we talked about previously, this could make a difference when setting up your environment.

Again, there are several GUI compilers available where you don’t need to venture into the command line at all.

Meaning this shouldn’t be a factor when determining which to use.

2. Less doesn’t have as many awesome frameworks, like Compass.

As mentioned previously, Less does have some extensions. But nothing like Compass — which people rally behind. In fact, some people use Sass because of Compass.

3. The way you write variables differs.

This is not a huge issue. Both store values in the same way, they just use different symbols.

Sass uses $, whereas Less uses @.

One issue that could arise for some would be confusion while using Less’s @ symbol because in CSS the @ symbol has other meanings—like @media queries and @keyframes. In CSS, the dollar sign has no other value.

In the end, this mostly it comes down to personal preference.

4. In Less, loops only allowed for numeric values.

Again — back to the more complex capabilities with Sass. In Sass you can iterate through any kind of data.

But in Less, you can only loop through numeric values with recursive functions. Being able to loop through any kind of data, like you can with Sass, is much more helpful.

5. Better nesting in Sass

Both Sass and Less allow nesting, but Sass takes it a step further by allowing you to nest individual properties.

Still unsure? Go with Sass.

Unless you are working with something that relies on Less (like a certain frontend framework), go with Sass.

Yes, the learning curve may be steeper at first. However, most agree that Sass is better in the long haul bauce:

  • Sass has a better language syntax
  • Sass has more features
  • Sass has Compass (and other frameworks to choose from)

Basically, Sass is next level.

At the end of the day, using a CSS preprocessor (any preprocessor) is better than using none. It’ll speed up your workflow and make your styles more efficient regardless.

Plus, you can always switch later on. Just start using one.

Which team are you on? #teamsass or #teamless?

Why 80% of Websites Are The Same

1. Yelp is Just a “Blog” with Ratings and a Map

  • The posts are the same.
  • The descriptions are the same.
  • The avatar image is the same.
  • Yelp adds ratings and map functionality!

Similarities: The skeleton of both of these sites starts the same: Medium is a list of blog posts, Yelp is a list of restaurants.

Differences: Yelp then adds ratings, and maps.

2. Airbnb is like Yelp With Payment Processing

  • The posts are the same.
  • The Google Map API functionality is the same.
  • The concept of search is the same.
  • Showing a logged in user on the top right-hand corner is the same.
  • Airbnb let’s you put in a credit card and make payments.

Similarities: Yelp is a site that categorizes restaurants, Airbnb is a site that categorizes vacation homes.

Differences: Airbnb allows you to send money via credit card to the person who created the listing.

3. Twitter is just Public Facebook

  • The posts are the same. Note that Facebook calls their posts “Posts”, Twitter calls their posts “Tweets.” But it’s basically the same stuff.
  • Both sites are two column sites.
  • This concept of user pages is the same.
  • Twitter just allows functionality to make the posts public. Whereas Facebook is private.

Similarities: Both Twitter and Facebook allows users to make posts.

Differences: Facebook is a private version of Twitter, and has some differences on how two people connect: On Twitter you click to “follow” a user, on Facebook you “add friend” and you’ll need a confirmation from the other person.

4. WordPress is just WordPress

Millions of websites that you see around the web use WordPress: they’re just post-based layouts with differences in styling.

  • The posts are the same.
  • Almost everything is the same.
  • The big change here is the layout (ie. the HTML & CSS Layout)

Similarities: Most WordPress sites are the 80% the same.

Differences: The HTML, CSS and PHP (ie. the site layout) changes slightly for each new theme. In addition to that, each site may have differences in plug-ins that the developer chose.

The Two Most Common Types of Sites:

When you look across all these examples, most websites can either be understood one of two sites: a Blog or a Web App.

1. The Blog (80% of all websites):

  • One-to-many: one person writes blog posts, and many people are reading them.
  • Only admin users can sign in and create new content.
  • Examples: WordPress sites, Squarespace, About.me sites, simple landing pages.

2. The Web App

  • Many-to-Many: many people are writing posts, and many people are reading them.
  • Anyone can sign up and create new content.
  • Examples: Airbnb, Facebook, Twitter, Ebay, etc

Beyond Themes

If it’s all so simple, what are web developers doing all day!?

The last 20% is the tricky part. That’s why it’s free to get an 80% WordPress blog, and it’s $4000 to add your company’s face to the header, SEO lead tracking, and a customized payment page. Because as soon as you want some weird customizations, you need to hire someone.

Luckily, each coding framework comes with a library of plug-ins to make life easier. (FYI — Plug-ins are free code that you can use to install specific features to your existing project) For each type of website framework, you have a corresponding set of plug-in tools:

  • Ruby on Rails: Gems
  • Python: Packages
  • WordPress: Plug-ins

Did you just create a “Yelp”-like site, and now you want to take payments? There’s a plug-in for that.

Take a Look at These Patterns

In the new One Month Python class Eric Neuman (the teacher) and myself (producer) put some thought into how you can learn these common Website patterns.

In the class, we convert a static page to a landing page, and a Blog into a Web App. We also deploy some customizations like the Google Map API, and ratings.

Check out the projects. What patterns can you notice?

I’m Oversimplifying — Don’t Freak Out

I’m sure some developers on Hacker News are reading this saying “Facebook is SO MUCH MORE complex than Twitter! It’s impossible to compare the two.”

Yep, I get it.

Comparing the two is not very different from saying, “The Beatle’s Let it Be is only four chords.” It’s a true statement, but admittedly the art is in how you play those chords.

You can play Beatles songs with just four chords, but to become The Beatles, it might take a lifetime. That doesn’t mean you shouldn’t master the basic chords and begin to play — everyone should learn the basic chords. And who knows? You might become the next Big Thing.


Ready to start learning? Check out these courses:
One Month Ruby | One Month Python

What is UX?

Key Takeaways

  • User experience defines the user.
  • Information architecture puts all of that user and project information on paper. It typically functions in the form of a wireframe.
  • In the digital agency, wireframes (and other documents like this) are known as deliverables. You’ll hear that word a lot. For example, “When are the deliverables due?” and “I’m paying you $10,000 to talk to people and research? Okay, but what’s the actual deliverable?”

How to Learn User Experience Design (UX) Today

Additional Resources to Keep You Learning

What is Web Development?

Key Takeaways

The four most important roles for building a website are:

  1. User Experience (UX)
  2. Information Architecture (IA)
  3. Visual Design
  4. Development

To clarify this… they’re not “people,” they are roles.

If you’re at a small startup, you may have to be all four of these roles. At a larger company, each of these roles might be covered by a group of people.

Your Assignment: Learn The Web Development Process Today

Are you missing one of these four roles on your project?

If so, leave a comment down below with a description of your team and what you’re working on. Ask any questions you might have, and I’ll try to get back to you ASAP!

Additional Resources to Keep You Learning

What is Responsive Design?

Key Takeaways

Responsive design means writing code ONCE, and having the page look great EVERYWHERE. A great, responsive site should be able to adapt to various screen resolutions. It will look good on a desktop computer, iPhone, iPad, or any of the other devices that people carry around in their pockets.

Your Assignment: Learn Responsive Design Today

  1. Look at the images of Pack below. What is the difference between the smallest screenshot (on the left) and all of the other screenshots? Write down at least 3 differences that you see.
  2. After writing down the differences you will quickly see what it means for a site to be “responsive”. After you complete Pack, do the same for The Japanese Times. More examples can be found at http://mediaqueri.es/. (5 minutes).
  1. “Media Query” is the official CSS property largely responsible for making a site responsive. If you’re a developer, try adding this CSS into your stylesheet. See what happens!
@media (min-width: 400px) and (max-width: 600px) {
    h1,h2,h3,p {
        color: red !important;
    }
}

The code listed above should make your h1, h2, h3, and p tags (headers and paragraphs) red. You can play around with some example code over at Google’s page on media queries.

Additional Resources to Keep You Learning

Bootstrap: a popular framework for making a responsive website. Download it for free.

Zurb Foundation: another framework for making responsive websites. It’s free.