Visual Basic Chapter 8 Arrays and More

8.1 Arrays in a calculation

 

 

40195

 Given an array a, write an expression that refers to the first element of the array.  

 

 

a(0)

40196

 Given an array a, declared to contain 34 elements, write an expression that refers to the last  element of the array. 

 

 a(33)

 

 

40197

 Assume that the array arr has been declared. Write a statement that assigns the next to last   element of the array to the variable  x, which has already been declared. 

 

 

x = arr(arr.length-2)

 

40198

 Given that the array monthSales of integers has already been declared and that its elements contain sales data for the 12 months of the year in order (i.e., January, February, etc.), write a statement that writes to standard output the element corresponding to October. Do not write anything else out to standard output. 

 

Console.Write(monthSales(9))

 

40211

 We informally define the term corresponding element as follows: The first element in an array and the last element of the array are corresponding elements. Similarly, the second element and the element just before the last element are corresponding elements. The third element and the element just before the element just before the last element are corresponding elements -- and so on. Given an array a, write an expression for the corresponding element of a(i).

 

 a(a.length - 1 - i)

 

 

40199

 Given that an array named a with elements of type Integer has been declared, assign 3 to its  first element. 

 

a(0) = 3

 

40200

 Assume that an array named salarySteps whose elements are of type int and that has exactly five elements has already been declared.

Write a single statement to assign the value 30000 to the first element of this array.

 

salarySteps(0) = 30000

 

 

40201

Assume that an array of integers named salarySteps that contains exactly five elements has been declared.

Write a statement that assigns the value 160000 to the last element of the array salarySteps. 

salarySteps (4)= 160000

 

 

40202

 Assume that an array named a containing exactly 5 integers has been declared and initialized.

Write a single statement that adds 10 to the value stored in the first element of the array. 

a(0) += 10

 

40203

 Given that an array of Integers named a with 30 elements has been declared, assign 5 to its last element. 

 

a(29) = 5

 

40204

  Assume that an array of Integers named a has been declared with 12 elements. The integer variable  k holds a value between 0 and 6. Assign 15 to the array element whose index is k. 

 

a(k) = 15

 

40205

 Given that an array named a whose elements are of type Integer has been declared, assign the value
         -1
to the last element in a. 

 

a(a.length - 1) = -1

 

40206

 An array of Integers named a has been declared with 12 elements. The integer variable  k holds a value between 0 and 6. Assign 9 to the element just after a[k]. 

 

a(k+1) = 9

 

40207

 An array of Integers named a has been declared with 12 elements. The integer variable  k holds a value between 2 and 8. Assign 22 to the element just before a[k]. 

 

a(k-1) = 22

 

40208

 Assume that an array of Integers named a that contains exactly five elements has been declared and initialized. In addition, an Integer variable  j has also been declared and initialized to a value somewhere between 0 and 3.

Write a single statement that assigns a new value to element of the array indexed by j. This new value should be equal to twice the value stored in the next element of the array (i.e. the element after the element indexed by j. 

a(j) = a(j+1) * 2

 

40209

 Assume that an array of integers named a has been declared and initialized. Write a single statement that assigns a new value to the first element of the array. The new value should be equal to twice the value stored in the last element of the array. 

 

a(0) = a(a.length - 1) * 2

 

 

 

 

 

8.2 Array Processing Techniques

 

 

 

40210

  Given an array temps of Doubles, containing temperature data, compute the average temperature. Store the average in a variable  called avgTemp. Besides temps and avgTemp, you may use only two other variables  -- an Integer variable  k and a Double variable  named total, which have been declared. 

 

 

k = 0
total = 0
Do
 total += temps(k)
 k += 1
Loop Until (k = temps.length)
avgTemp = total / k

 

 

40213

 Given:

• an Integer variable  k,
• an Integer array currentMembers that has been declared and initialized,
• an Integer variable  memberID that has been initialized, and
• an Boolean variable  isAMember,

write code that assigns True to isAMember if the value of memberID can be found in currentMembers, and that assigns false to isAMember otherwise. Use only k, currentMembers, memberID, and isAMember. 

isAMember = false
k = 0
Do
 If memberID = currentMembers(k) Then
  isAMember = true
 End If
 k += 1
Loop Until (k = currentMembers.length)

 

 

40214

 You are given an Integer variable  k, an Integer array zipcodeList that has been declared and initialized, and an Boolean variable  duplicates. Write some code that assigns True to duplicates if there are two adjacent elements in the array that have the same value, and that assigns False to duplicates otherwise. Use only k, zipcodeList, and duplicates.

 

 duplicates = false
k = 0
Do
 If zipcodeList(k) = zipcodeList(k+1) Then
  duplicates = true
 End If
 k += 1
Loop Until (k = zipcodeList.length - 1)

 

 

40215

 You are given two Integer variables  j and k, an Integer array zipcodeList that has been declared and initialized, and an Boolean variable  duplicates. Write some code that assigns True to duplicates if any two elements in the array have the same value, and that assigns False to duplicates otherwise. Use only j, k, zipcodeList, and duplicates.

 

 

duplicates = false
k = 0
j = 0
For k = 0 to zipcodeList.length-1
 For j = 0 to zipcodeList.length-1
  If (zipcodeList(k) = zipcodeList(j)) And (j<>k) Then
   duplicates = true
  End If
 Next
Next

 

40216

Give

• an Integer variable  k,
• an Integer array incompletes that has been declared and initialized,
• an int variable  studentID that has been initialized, and
• an int variable  numberOfIncompletes,

write code that counts the number of times the value of studentID appears in incompletes and assigns this value to numberOfIncompletes.

You may use only k, incompletes, studentID, and numberOfIncompletes. 

numberOfIncompletes = 0
For k = 0 to (incompletes.length-1)
 If studentID = incompletes(k) Then
  numberOfIncompletes += 1
 End If
Next

 

 

 

40219

 An array of integers named parkingTickets has been declared and initialized to the number of parking tickets given out by the city police each day since the beginning of the current year. (Thus, the first element of the array contains the number of tickets given on January 1; the last element contains the number of tickets given today.)

A variable  named mostTickets has been declared, along with a variable  k.

Without using any additional variables , write some code that results in mostTickets containing the largest value found in parkingTickets. 

 

 

 mostTickets = 0
For k = 0 to (parkingTickets.length-1)
 If mostTickets < parkingTickets(k) Then
  mostTickets = parkingTickets(k)
 End If
Next

 

 

 

40212

 Reversing the elements of an array involves swapping the corresponding elements of the array: the first with the last, the second with the next to the last, and so on, all the way to the middle of the array.

Given an array a and two other Integer variables , k and temp, write a loop that reverses the elements of the array.

Do not use any other variables  besides a, k, and temp.

 

 For k = 0 to ((a.length-1)/2)
 temp = a(k)
 a(k) = a((a.length-1)-k)
 a((a.length-1)-k) = temp
Next

 

 

 

 

 

 

 

 

 

Visual Basic Chapter 6 Procedures and Functions

6.1 Procedure Invocations

 

 

40073

Write the code for a message whose method name is sendSignal. There are no arguments for this message.  

 

sendSignal()

 

40439

printTodaysDate is a function that accepts no parameters and returns no value.

Write a statement that calls printTodaysDate. 

printTodaysDate()

40440

printErrorDescription is a function that accepts one int parameter and returns no value.

Write a statement that calls the function printErrorDescription, passing it the value 14.

 

 

printErrorDescription(14)

 

 

40441

printLarger is a function that accepts two int parameters and returns no value.

Two int variables , sales1 and sales2, have already been declared and initialized.

Write a statement that calls printLarger, passing it sales1 and sales2. 

printLarger(sales1, sales2)

Procedure Definitions

41082

Write the definition of a function named quadratic that receives three double parameters a, b, c. If the value of a is 0 then the function prints the message "no solution for a=0" and returns. If the value of "b squared" – 4ac is negative, then the code prints out the message "no real solutions" and returns. Otherwise the function prints out the largest solution to the quadratic equation. The formula for the solutions to this equation can be found here: Quadratic Equation on Wikipedia. 

 

 Function quadratic(a as double, b as double, c as double) as double
 Dim x,y as double
 If (a = 0) Then
  System.Console.Writeline("no solution for a=0")
 ElseIf ((b*b - 4*a*c) < 0)
  System.Console.Writeline("no real solutions")
 Else
  x = ((-b + Math.Sqrt(b*b - 4*a*c)) / (2*a))
  y = ((-b - Math.Sqrt(b*b - 4*a*c)) / (2*a))
  If (x > y) Then
   System.Console.Writeline(x)
  Else
   System.Console.Writeline(y)
  End If    End If
 End Function

 

 

6.2 Passing Arguments to Procedures an argument to a procedure

 

40074

  Write the code for a message whose method name is sendNumber. There is one argument for this message, which is an int. Send the number 5 as an argument in the message. 

 

sendNumber( 5)

 

40075

Write the code for a message whose method name is sendVariable. There is one argument for this message, which is an int.

Suppose an int variable  called x has been declared and initialized to some value. Send this variable  in your message.

 

 

sendVariable (x)

 

40076

 Write the code for a message whose method name is sendTwo. There are two arguments for this message: a double and an int. Send the Double value of 15.955 and the Integer value of 133 in the message. 

 

 

sendTwo(15.955, 133)

 

40077

Write the code for a message whose method name is sendObject. There is one argument for this message, which is of type Customer.

Suppose there is an object of type Customer, called John_Doe. Send this object within your message.

 

 

 sendObject(John_Doe)

 

 

 

6.3 Functions

 

Function invocations

 

 

40442

add is a function that accepts two int parameters and returns their sum.

Two int variables , euroSales and asiaSales, have already been declared and initialized. Another int variable , eurasiaSales, has already been declared.

Write a statement that calls add to compute the sum of euroSales and asiaSales and store this value in eurasiaSales.

 

 

 eurasiaSales = add (euroSales, asiaSales)

 

40443

toThePowerOf is a function that accepts two int parameters and returns the value of the first parameter raised to the power of the second.

An int variable  cubeSide has already been declared and initialized. Another int variable , cubeVolume, has already been declared.

Write a statement that calls toThePowerOf to compute the value of cubeSide raised to the power of 3, and store this value in cubeVolume. 

cubeVolume = toThePowerOf (cubeSide, 3)

 

40804

If a right triangle has sides of length A, B and C and if C is the largest, then it is called the "hypotenuse" and its length is the square root of the sum of the squares of the lengths of the shorter sides (A and B). Assume that variables  a and b have been declared as doubles and that a and b contain the lengths of the shorter sides of a right triangle: write an expression for the length of the hypotenuse.

 

Math.sqrt(Math.pow(a,2) + Math.pow(b,2))

 

 

MPL Extra: composition

 

40445

max is a function that accepts two int parameters and returns the value of the larger one.

Four int variables , population1, population2, population3, and population4 have already been declared and initialized.

Write an expression (not a statement!) whose value is the largest of population1, population2, population3, and population4 by calling max. (HINT: you will need to call max three times and you will need to pass the return values of two of those calls as arguments to max. REMEMBER: write an expression, not a statement.) 

 max(max(population1, population2), max(population3, population4))

40801 

 Assume that x is a variable  that has been declared as a double and been given a value.

Write an expression to compute the quartic root of x. The quartic root of a number is the square root of its square root.

EXAMPLES: For example, the quartic root of 16.0 is 2.0 because: the square root of 16.0 is 4.0 and the square root of 4.0 is 2.0. Another example: the quartic root of 81.0 is 3.0 because the square root of 81.0 is 9.0 and the square root of 9.0 is 3.0. Thus, to find the quartic root of a number you take the square root of the number and then take the square root of that.

In this exercise you must find the quartic root of x in a single expression-- you must not write any statements. Also, you may only use the sqrt() function-- no other functions.

(HINT: you will need to call the sqrt() function twice-- and you will need to pass the return value of one of those calls as argument to the other call. AND REMEMBER: write an expression, not a statement.)

 

 

sqrt(sqrt(x))

 

 

 

 

40802

Assume that x is a variable  that has been declared as an int and been given a value. Assume that twice is a function that receives a single integer parameter and returns twice its value. (So if you pass 7 to twice it will return 14. Thus the expression twice(7) has the value 14.

Write an expression whose value is eight times that of x without using the standard C arithmetic operators (*,+, etc.). Instead, use calls to twice to accomplish this.

In this exercise you must write this as a single expression-- you must not write any statements. Also, you may only use the twice() function-- no other functions or operators.  

twice(twice(twice(x)))

 

40803

 Assume that x is a variable  that has been declared as an int and been given a value. Assume that oneMore is a function that receives a single integer parameter and returns a value that is one greater than its argument. (So if you pass 7 to oneMore it will return 8. Thus, the expression oneMore(9) has the value 10.

Write an expression whose value is four more than x without using the standard C++ arithmetic operators (*,+, etc.). Instead, use calls to oneMore to accomplish this.

In this exercise you must write this as a single expression-- you must not write any statements. Also, you may only use the oneMore function-- no other functions or operators.

 

 

 

 

oneMore(oneMore(oneMore(oneMore(x))))

 

 

 

 

 

 

Emirates Palace

Abu Dhabi...

Visual Basic Programming Exercises: Chapter 5 Lists and Loops

5.3 Introduction to Loops: The Do While Loop a posttest loop 

 

40181

 

Given an Integer variable  n that has been initialized to a positive value and, in addition, Integer variables  k and total that have already been declared, use a While loop to compute the sum of the cubes of the first n whole numbers, and store this value in total. Use no variables  other than n, k, and total. 

k = 0
total = 0
Do While (k <= n)
 total = (total + (k*k*k))
 k += 1
Loop

 

40178

Given an Integer variable  k that has already been declared, use a pretest Do While loop to print a single line consisting of 88 asterisks. Use no variables  other than k. 

Do While k < 88
    Console.Write("*")
    k+= 1
Loop

 

40179

Given an Integer variable  n that has already been declared and initialized to a positive value, use a pretest Do While loop to print a single line consisting of n asterisks. Use no variables  other than n.

 

 Do While (n > 0)
 Console.Write("*")
 n -= 1
Loop

 

 

40387

 

Write a statement that increments the value of the int variable  total by the value of the int variable  amount. That is, add the value of amount to total and assign the result to total. 

total += amount

 

40180

Given Integer variables  k and total that have already been declared, use a pretest Do While loop to compute the sum of the squares of the first 50 whole numbers, and store this value in total. Thus your code should put 1*1 + 2*2 + 3*3 +... + 49*49 + 50*50 into total. Use no variables  other than k and total. 

k = 1
total = 0
Do While (k <= 50)
 total = (total + (k*k))
 k += 1
Loop

 

40379

 

Given an int variable  n that has been initialized to a positive value and, in addition, int variables  k and total that have already been declared, use a while loop to compute the sum of the cubes of the first n counting numbers, and store this value in total. Thus if n equals 4, your code should put 1*1*1 + 2*2*2 + 3*3*3 + 4*4*4 into total. Use no variables  other than n, k, and total. Do NOT modify n. 

k = 0
total = 0
Do While (k <= n)
 total = (total + (k*k*k))
 k += 1
Loop

40378

 

Given int variables  k and total that have already been declared, use a while loop to compute the sum of the squares of the first 50 counting numbers, and store this value in total. Thus your code should put 1*1 + 2*2 + 3*3 +... + 49*49 + 50*50 into total. Use no variables  other than k and total. 

k = 1
total = 0
Do While (k <= 50)
 total = (total + (k*k))
 k += 1
Loop

 

 

5.4 The Do Until and For...Next Loops

 

40182

 

Given an Integer variable  k that has already been declared, use a posttest Do While loop to print a single line consisting of 53 asterisks. Use no variables  other than k. 

Do
    Console.Write("*")
    k+= 1
Loop While k < 53

 

40183

 

Given an int variable  n that has already been declared and initialized to a positive value, use a posttest Do While loop to print a single line consisting of n asterisks. Use no variables  other than n. 

Do
    Console.Write("*")
    n -= 1
Loop While n > 0

 

40184

 

Given int variables  k and total that have already been declared, use a posttest Do While loop to compute the sum of the squares of the first 50 whole numbers, and store this value in total. Thus your code should put 1*1 + 2*2 + 3*3 +... + 49*49 + 50*50 into total. Use no variables  other than k and total. 

k = 1
total = 0
Do While (k <= 50)
 total = (total + (k*k))
 k += 1
Loop

 

40174

 

Given an int variable  k that has already been declared, use a for loop to print a single line consisting of 97 asterisks. Use no variables  other than k. 

For k = 1 To 97
Console.Write("*")
Next

 

40288

  Write a for loop that computes the following sum: 5+10+15+20+...+485+490+495+500. The sum should be placed in a variable  sum that has already been declared and initialized to 0. In addition, there is another variable , num that has also been declared. You must not use any other variables .

 

 sum = 0
For num = 5 to 500 step 5
 sum += num
Next

 

 

40185

 

Given an int variable  n that has been initialized to a positive value and, in addition, int variables  k and total that have already been declared, use a do...while loop to compute the sum of the cubes of the first n whole numbers, and store this value in total. Use no variables  other than n, k, and total. 

total = 0
For k = 0 to n
 total += k*k*k
Next

 

40385

 

Assume the int variables  i, lo, hi, and result have been declared and that lo and hi have been initialized.

Write a for loop that adds the integers between lo and hi (inclusive), and stores the result in result.

Your code should not change the values of lo and hi. Also, do not declare any additional variables  -- use only i, lo, hi, and result. 

result = 0
For i = lo To hi
 result += i
Next

 

40374

  Given int variables  k and total that have already been declared, use a for loop to compute the sum of the squares of the first 50 counting numbers, and store this value in total. Thus your code should put 1*1 + 2*2 + 3*3 +... + 49*49 + 50*50 into total. Use no variables  other than k and total.

 

total = 0

For k = 0 To 50

total = total + k*k

Next

 

 

40375

 

Given an int variable  n that has been initialized to a positive value and, in addition, int variables  k and total that have already been declared, use a for loop to compute the sum of the cubes of the first n whole numbers, and store this value in total. Thus if n equals 4, your code should put 1*1*1 + 2*2*2 + 3*3*3 + 4*4*4 into total. Use no variables  other than n, k, and total. 

total = 0

For k = 1 to n

total += k*k*k

Next

 

40502

 

Assume the integer variables  counter, low, high, and result have been declared and that low and high have been initialized.

Write a For loop that adds the integers between low and high (inclusive), and stores the result in result.

Your code should not change the values of low and high. Also, do not declare any additional variables  -- use only counter, low, high, and result. 

result = 0

For counter = low to high

result = result + counter

Next

 

40176

 

Given int variables  k and total that have already been declared, use a for loop to compute the sum of the squares of the first 50 whole numbers, and store this value in total. Thus your code should put 1*1 + 2*2 + 3*3 +... + 49*49 + 50*50 into total. Use no variables  other than k and total. 

total = 0

For k = 0 to 50

total = total + k*k

Next

 

40177

 

Given an Integer variable  n that has been initialized to a positive value and, in addition, Integer variables  k and total that have already been declared, use a For loop to compute the sum of the cubes of the first n whole numbers, and store this value in total. Use no variables  other than n, k, and total. 

total = 0

For k = 1 to n

total += k*k*k

Next

 

40187

 

Assume the int variables  i,lo, hi, and result have been declared and that lo and hi have been initialized. Assume further that result has been initialized to the value 0.

Write a for loop that adds the integers between lo and hi (inclusive), and stores the result in result.

Your code should not change the values of lo and hi. Also, do not declare any additional variables  -- use only i,lo, hi, and result. 

For i = lo To hi

result += i

Next

 

40223

 

Give that two Integer variables , total and amount have been declared, write a loop that reads non-negative values into amount and adds them into total. The loop terminates when a value less than 0 is read into amount. Don't forget to initialize total to 0.

To read a value into amount use a method, getNum() that we provide for you a class named TC:
   amount = TC.getNum();

total = 0
amount = 0

Do

    total += amount

    amount = TC.getNum()

Loop Until (amount < 0) 

Great Ideas for Data Visualization

Sources:
http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/

http://www.informationisbeautiful.net/

http://www.visualisingdata.com/

Progressive Design for the Web

Source:
http://www.webdesignerdepot.com/2015/08/progressive-design-for-the-modern-web/

Progressive design for the modern web

Good responsive web design, by its nature, goes unnoticed to those consuming content online. So when someone asks for a new website, they’re often completely unaware of the concept, despite experiencing it on a daily basis. And yet, responsive website design is now acknowledged as standard practice throughout the industry.

Building responsive websites has altered our processes, from creating mockups of complete pages, to building libraries of reusable components and layouts.

layout is content-driven and styles are brand-driven

Recently we were approached by an existing client to responsively redesign their website. We’d previously worked with them using a rigid waterfall process. Moving to an agile workflow, we were able to embrace change at any point in the project.
Throughout the process we adhered to the philosophy that layout is content-driven and styles are brand-driven.

Wire-framing the specifications

Specification documents work great for listing out all the functionality a site is required to have. But is it really what the client needs? It’s very hard to visualize these features in place. Thus the result is that specification documents often turn into bloated wishlists. This doesn’t help the client, designers, or the final website.
Instead of specification documents, we opted to use wire-frames. The first step of the project involved creating wire-frames for every page. This may sound like overkill, but the wire-frames led to early discussions of the content and features for each page. We found that features that we never considered before were added, while many were removed.
Wire-frames gave us a clear, visual representation of how content and functionality should be prioritized on each page. These wire-frames then became a reference point, replacing a specification document.
Key takeaway: producing wire-frames in place of specification documents focuses everyone on the core features and the importance of content.

Auditing

Auditing the wire-frames allows us to form a list of all the common components. Across a single site there will be dozens of small sections on each page that are very similar. These components can be collated into an exhaustive list which will be used later on.
This stage has three main benefits:

• It flags any discrepancies in the wire-frames. Think of it as proof-reading the wire-frames. Some areas may be different for no real reason. We can tie the whole site together before we start building unnecessary components or layouts.
• It helps keep all of the front-end code as lean as possible. Planning how the CSS will be structured has become vital on large projects. We want the website to be as fast as possible and structuring the CSS early on helps this.
• Large websites will involve multiple people at any time, both during development and in the future. Creating maintainable code is important for the project moving forward.

Key takeaway: planning how to approach the front-end development of a project is important to create a maintainable, lean code base.

Pattern libraries

Pattern libraries are a collection of common elements used on a website. By focusing the front-­end development on building components that are not dependent on pages, we can reduce the code overhead and improve consistency.
Using the list of components we collated during the auditing stage, we are able to structure our Sass into a manageable collection of files.

Naming conventions are important

We’ve used pattern libraries on a few projects but have always struggled with naming conventions, particularly the folder structure: where do you put your styles for this music player, in components, or in partials?
Previously, we’d been using terminology such as partials and components to organize our Sass files. While these seem like completely legitimate naming conventions, they are open to interpretation. When there are multiple developers working on a project, leaving the organization of the code base open to interpretation leads to unorganized CSS.
BEM (Block, Element, Modifier), provides us with a common convention to follow, and creates an understanding between front­-end developers. The old way was left to individual developers to come up with class names that were all too high-level to glean any meaning from. Fortunately we were lucky to see Brad Frost speak about his pattern library at the Upfront Conference in Manchester. Pattern Lab lends terminology from chemistry to describe the components that make up the library. Using atoms, molecules and organisms to describe the differences between components on a page helps explain the concept to developers new to the project.

Atoms – the essentials

In nature, atoms are the smallest denomination (unless we delve into quarks and electrons). In web development, atoms are the most basic elements of HTML. To all intents and purposes they don’t do much on their own. These include headings, paragraphs, inputs, buttons, lists…You get the idea.

Molecules – scalable patterns

These are the next layer up. In chemistry, molecules are made up of atoms, and the same applies to the structure of CSS. Molecules are components on the website that use atoms to form them.
A good example of a molecule is a search box. This contain 3 atoms:­ a label, input and button. The molecule layer starts to form some of the elements we can use on the website. It’s important to make all of these molecules scalable. They should be designed with the idea they could be used anywhere on the site. Our ultimate goal to make the CSS as flexible and reusable as possible.

Organisms – collections of patterns

As the name suggests, organisms are groupings of molecules. Some examples of these include a header, footer, or list of products.
If we take the example of a header, this would include a logo, search, and navigation. These were all created as molecules and are combined to form a header organism.

Templates – The glue of a page

This is where the biochemistry analogy ends. As Brad says, “get into language that makes more sense to clients and final output”. Templates are the glue of a website. These combine all of the organisms we’ve created into a layout that could be applied to a page on the website.
An example could be a blog listing. This template would include a header, footer, a list of blog items, and a sidebar. Templates are generally structural, containing only the layout.

Pages – Handling variations

The final section is pages. This is where you can test the templates with real data. Pages are specific instances of a template. This part is important because it allows us to see how successful the atoms, molecules, organisms and templates have been.
It’s inevitable that when building the website, certain scenarios will be missed. The classic example is long titles, or catering for different currencies and languages.
Key takeaway: Naming conventions matter. Layering CSS creates a clean codebase to work from that is as small as possible.

Designing with flexibility in mind

Designing patterns is hard. You can’t design an isolated pattern such as a news item, and expect it to fit with the rest of the page. The way we build websites and the way we design them differ.

Designs are likely to change regardless of whether we get sign-off…Sign-off became an irrelevant step in the process that only put pressure on both sides

We used Photoshop to create mockups of the wire-frames with these styled components in place. Once we were happy with the look and feel of the designs we moved to isolating each component. This allowed us to ensure each component was flexible enough to work anywhere on the website.
We were very conscious to not get sign-off on any design work. Design sign-off creates a barrier where the designer feels pressured to create something that will be set in stone. Designs are likely to change regardless of whether we get sign-off or not. Generally we are happy to accommodate any changes at any point in the project timeline. Sign-off became an irrelevant step in the process that only put pressure on both sides to the detriment of the relationship.

Move from Photoshop to code quickly

Knowing when to move from Photoshop to code is important. This step is much earlier than we were used to for two reasons:

1. Perfecting layouts in Photoshop is time consuming and ultimately a waste of time. Time perfecting the website is better spent at the end, on the actual code.
2. It creates a reference point for what the website should look like. The reality is, it will never look identical; but once a client has seen (and perfected) the designs, an expectation is created.

Instead of spending additional time in Photoshop we opted to invest the time in code. If we should perfect anything, it should be the code, the bit that will actually be used and seen by all the website users. For us, Photoshop was a tool for creating a design style that could be used across the website.
Design is much more about collaboration between everyone on the team. Mockups were still a very important part of the process, helping the client to visualize how the site would look. If we were all happy with the general direction of the design, we would move it to code. We rarely spent time going backwards and forwards making amends to Photoshop documents.
Key takeaway: Photoshop is a great tool for creating design concepts. Moving to code as soon as possible is important. Perfect it in code, not Photoshop.

Iterate for better usability

The beauty of this workflow is there are so many places to review and improve the website.
It is important to note that these are loose steps in our project process. If we need something new during the project, we will generally treat it as a standalone, modular component that can be dropped into the website and adopt the design theme of the site.

• At the wire-framing stage we plan the project
• At the auditing stage we review and improve the wire-frames
• At the design stage we mockup a design style
• At the coding stage we integrate it all together

Each of these steps offers a point where we can review our work so far. It also allows for a fresh set of eyes to see things from a different perspective.
During any of these stages we may find that some parts aren’t working as well as expected. This is okay. In fact it’s good. Catching poor usability early is key for a successful website. Going back and wire-framing these parts of the website will make the project better when it goes live.
Key takeaway: Don’t be scared to go back to the beginning if something needs improving. Catching these early will make the project better when it goes live.

The finish

We spent days working together to ensure every part of the website was finished to a high standard. We tested as many scenarios as possible, ensuring the browsing experience was consistent.
Once the data is in the website we are able to fully test the website. It’s often too easy to set a project live without fully testing. We can check the speed, ease of navigation and most importantly the purchasing flow.
Everyone mentions Apple for being perfectionists but I am sure their first attempts were far from perfect. It takes time and dedication to make those final improvements to give us the products we love today. Using our device lab, that includes most of the popular devices and platforms, we were able to ensure that the experience was the optimized on as many of the latest platforms and screen sizes as possible.

Retrospective

Learning from each project is important so we can continually improve processes that lead to better websites.
This project saw the birth of our own in­-house pattern library that encourages consistency between projects. When working in an agency, we may have dozens of projects currently in development simultaneously. The ability for anyone to work on any project is important.
Creating a base we can all work on will help contribute to this goal.
The performance of the website was only considered towards the end of the project. A successful responsive website needs to be lean and fast. The huge range of devices and their capabilities vary massively from brand new Mac computers to old smartphones. When building a media rich website is can be very hard to manage the performance, especially when retrospectively trying to improve it.
At Upfront Conference in Manchester, we saw Yesenia Perez Cruz speak about considering performance at every stage of a project, including design. In hindsight, this is something we should have implemented. As a team of multiple designers, developers and front-end developers, managing the overall size and performance (particularly the perceived performance) should have been a bigger priority.
Everything on a page has a cost for performance. Prioritizing what is important ensures the website is not only fast, but accessible to more devices. On some older devices, we found that the website crashed not just the browser, but the entire device. Trying to speed up the website retroactively meant we couldn’t make the website as fast as it could have been.
Next time we will make sure performance ingrained into every stage of the process, so it isn’t an afterthought.