Notes From Mobile First

The following verbatim notes are from Luke Wroblewski’s Mobile First.

Chapter 1: Why Mobile First?

Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.

Native vs. Web

Native mobile applications give you robust access to hardware capabilities that you currently can’t get through mobile web browsers. Core features like access to the address book, SMS, camera, audio inputs, and other built-in sensors are mostly unavailable.

Whether it’s through search, email, social networks, or on web pages, if you have content online, people will find and share links to it. Not having a mobile web solution means anyone that follows those links on a mobile device won’t have a great experience (if they can even access your content at all). Having a native mobile application won’t help.

Access might even be the biggest user benefit for a mobile web experience. Even if you build a native mobile application for one platform, chances are you won’t be able to create one for every platform.

Chapter 2: Embrace Constraints

Designing for mobile first forces you to embrace these constraints to develop an elegant mobile-ap- propriate solution. But the benefits go well beyond mobile.

Chapter 3: Capabilities

When you design and develop for mobile first, you can use exciting new capabilities on the web to create innovative ways of meeting people’s needs. Technical capabilities like location detection, device orientation, and touch are available on many mobile web browsers today.

Chapter 4: Align With Mobile Behaviors

  • Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
  • Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
  • Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
  • Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.

Content Over Navigation

As a general rule, content takes precedence over navigation on mobile. Focusing on content first, navigation second gets people to the information and tasks they want quickly.

Pivot and Explore

A simple anchor link in the site’s header jumps people to navigation options at the bottom of the page. Having this list present at the bottom of content pages allows people to pivot and explore other parts of the site.

Chapter 5: Ready, Set, Actions

As more touch-screen mobile devices get into people’s hands, we need to make sure they can use our websites with their hands. To do so:

  • Go big with appropriately sized and positioned touch targets.
  • Learn the language of touch by familiarizing yourself with common touch gestures and how they are used to navigate and interact with objects and screens.
  • Don’t be afraid to push toward natural user interfaces (NUIs) that make content (not chrome) the focus of people’s actions.
  • Transition your on-hover menus to mobile using the most appropriate solution for your site.
  • Remember to consider non-touch and hybrid devices when designing your mobile web interactions.

Chapter 6: Input

  • Actively encourage input and allow people to contribute and create using their mobile devices.
  • Make sure your questions are clearly presented with mobile-optimized labels.
  • Get rid of the pain associated with accurate mobile inputs by using input types, attributes, and masks in your designs where possible.

Chapter 7: Layouts

Through the application of fluid layouts, flexible media, CSS3 media queries, and (sometimes) a bit of JavaScript, re- sponsive web design allows you to adapt to devices more sig- nificantly. With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.

Device Experiences

different device experiences may require different user interface design solu- tions. The relative importance of primary tasks can differ between device experiences (because of user posture), as can the layout and interaction design needed to accommodate dif- ferent input modes and average display sizes.


Not only will reduction make putting mobile layouts to- gether easier, it will also give people focused ways to get things done.


And last but not least, don’t be afraid to start small. Some of the biggest successes in mobile today came from small experiments and teams of passionate web designers and developers. You don’t need to know everything about mobile—just take what you do know and go.

InDesign Training

After all these years of staring at the InDesign icon on my dock, I can now open it up and maneuver my way around the software. Thanks to Rae Ouellette and Ramla Mahmood, art students at George Mason, for the informative whole-day workshops.

Some notes:

Preflights: shows errors
Paragraph styles: Similar to CSS
Text Frame Option: Change texts
Place: import texts and images including Word, TIFF (Photoshop), EPS (Illustrator)
Package: ready for printing
Put open quotation mark outside texts: story > optical margin alignment
Insert page number: type > insert special character > markers > current document number
Hyphenate: uncheck in paragraph window to clear hyphens at the end of the line.
Select objects: control click

Red Hat Training: Day 5

# service vsftpd status
# service vsftpd start
# chkconfig vsftpd on
# chkconfig vsftpd –list

# ll /var/www/
# ln -s /var/ftp/pub /var/www/html/pub
# cat > /var/ftp/pub/index.html
Hello World!

Summary: My Red Hat System Administration I (RH124) training is now completed. I took the skills assessment before I took the training and RH124 was recommended. Although the course was not the right fit for my job, which is server administration, I have learned the basic of Linux.

The class concentrated more on GUI than command line. I wish it was the other way around. Nevertheless, the instructor provided as much command lines as he could. Pete Davis was the instructor. He has great knowledge of the subject as well as a sense of humor, which helped making the class engaging.

I definitely recommend this course for absolute beginner to Linux. It would had been perfect for me if I took this course about four months ago when I first started my job. At this point, I wish I had taken Red Hat System Administration II (RH135).

Red Hat Training: Day 4

Administer remote system including remote shell access, remote file transfer, using SSH keys

Managing physical storage including filesystem, partition and swap space

Install Linux with Anaconda.

# scp original-file new-file
# rsync -a /home/student demo:/tmp

# tar -cvf target/to/archive source/to/archive
-t=test (tell)

Using SSH
# ssh-keygen
# ssh-copy-id

# service crond status
# chkconfig –list crond

# vi /etc/ssh/sshd_config
PermissionRootLogin no
PassordAuthentication no
# service sshd restart

Summary: I am not really concentrating today. The subjects aren’t interesting and the installation process failed again.

Red Hat Training: Day 3

# yum list (get the list of .rpm, which stands for RPM Package Manager)
# yum search kernel (kernel is the name of the package)
# yum install kernel
# yum update kernel
# yum remove kernel

# ip addr show eth0 (eth0 is the name of the network)
# more /etc/sysconfig/network-scripts/ifcfg-eth0
# service network restart
# system-config-network
# ip route
# host
# dig

Users and Groups
# useradd donny
# passwd donny
# vipw (let’s one user edit at the same time)

Manage Files
# echo $PATH
# pwd (current path)
# ls /home/{dir1,dir2} (show more two directories)
# ln file1 file2 (link file 1 to file 2)
# ln -s file1 file2 (symbolic link)
# su – username (change user)
# cp -av /dir/to/copy /dir/destination

r (view content)
w (change the content)
x (requires r to execute the content)

umask 002

u+s (suid=4: file executes as the user that owns the file, not the user that ran the file
g+s (sgid=2: file executes as the group that owns the file
o+t (sticky=1: no effect)

Summary: The best day so far of the training. Picked up many useful information. Hope the next two days will be even better.

Red Hat Training: Day 2

Introduced to Bash

Commands entered at the shell prompt have three basic parts:
# chmod +x gedit demo.txt
[command] [options] [arguments]

Command lines:
# pwd (path you’re currently in)
# history
Using the tab key (“tab” “tab”) for completion
# scp filename [email protected]:/ (copy file from local folder to virtual server)

Introduced to managing physical storage using the graphical interface
Learned to manage logical volumes
Introduced to monitoring system resources

Summary: Even though the topics were interesting, they aren’t related to my job.

Red Hat Training: Day 1

Installing Red Hat 6, which took almost half a day.
Using GNOME graphical desktop.
Editing files with gedit.
Managing files with Nautilus.
Getting help with manuals (F1 for help)
Managing system clock.
Configuring printers.

Command Lines:
uname -r (find out what version of Red Hat)
$ su – (log in as substitute user)
# useradd visitor (add username “visitor”)
# passwd visitor (add password to “visitor”)
# ip addr show eth0 (show ip address)
# ls /usr/share/doc (documentations)
# man man (access manual)
# man -k print (-k is for keyword)

Summary: The first day is a very basic introduction to Linux. Installation process took half of a day.

Notes From Computers in Library 2012

I was interested in the three-day conference for technology in library particular in the tracks on mobile trends and web presence. Sine my supervisor attended the latter, I went into the topic on mobile trends. The speakers covered mostly on mobile apps and designing a separate a mobile web site. The strategy is to offered only contents that mobile users would want. One speaker went as far as providing a device-detection javascript with a whole list of variable for every mobile device. The easiest way to make a mobile-friendly site is to provide a css file to hide all the big, unnecessary design elements on the desktop site. One speaker mentioned mobile-first design, but didn’t really give responsive web design its justice. While the conference was informative, the library folks need some catching up to do.

I also signed up for a post conference workshop on taking Drupal to the next step. Unfortunately the workshop was only three hours and the instructors spent the first half an hour install Drupal and modules on people laptops. We didn’t get very far and I wanted to see how to create a theme. It looks like the best approach is to take a base theme and modify it to meet your needs. I took a look at some of the starter theme and there are tons of php and css files to customize. I’ll take a crack at theming Drupal one of these days, but right now MODX seems like the best choice for really coding the site the way I wanted.

Frequently Used Linux Command Lines

Install WordPress
tar xfz latest.tar.gz
cp -r * ~/public_html/your/website/folder/

Change Permissions (rwx => 4 + 2 + 1 = 7)
For Directories: find /path/to/your/directory/ -type d -exec chmod 755 {} \;
For Files: find /path/to/your/file/ -type f -exec chmod 644 {} \;

chmod -R 755 directory
chmod -R 644 files

Remove files and directory (use carefully)
rm -rf YourDirectory

Change Owner
chown -R apache new_name (change entire directory)

Remane Directory
mv {old} {new}

To access database: mysql -u root -p
mysql> create database [database name];
mysql> show databases;
mysql> drop database [database name];

VI editor
Reference: Using the VI editor

Notes From Building B-Schools Symposium: Day 2

Two years ago, social media was a hot topic at AACSB conference. This year a talk on social media sounds dated. Nevertheless, Samantha Novick who is the new media specialist for Thunderbird School of Global Management gave an insightful presentation on how to engage alumni using LinkedIn. The communication team in the School of Business doesn’t do much with LinkedIn since the Career Center handles it, which makes more sense in our case.

The last session was on maximizing marketing and communications reach with minimal resources. Stop outsourcing is one of the most effective cost-saving strategy and bringing staff in-house is a great move. Though hiring one person who handles both print magazine and web site design and development is the right method. I am not doubting that print designers can’t create a web site or vice versa, but to get the best from the both world is easier said than done. For me, someone with a strong web design background (HTML, CSS, SEO) and some graphic design skills is a much better fit for business school.

While all the sessions I had attended are informative, what I find most interesting is building a brand culture. How can we create something that is unique for our school? How can we position our school beyond our location, the usual academic programs and the overselling if “leadership?”

I didn’t expect to learn anything technical here, but it seems to me like everyone is struggling with its own CMS and some is looking for workaround using WordPress. Each mentioned about mobile version in development, but none makes use of its current content with responsive web design. I am more surprise that none of these schools is doing anything for the iPad. I could see all the cost of printing magazine, annual reports and publications could be saved if we start thinking about marketing our message for e-readers.