Mobile-First Design

The project was to redesign Smitty's Lawn And Garden Website, using media queries and mobile first rules. This process is different from responsive site building because you start backwards. Step one was to figure out what was important and fill out a packet pretending you are with the client. Afterwards, I designed the sketches, starting with mobile, all the way to desktop on paper.

First I'll show you my before and after photos of the sketch vs. how it actually turned out: (keep in mind they are zoomed out so that you can see how the content is included. In reality you would need to scroll and it would be a lot bigger!

OKAY!
So now, I will now explain further in the process on how I achieved what is displayed above. Starting with mobile.

I used dreamweaver and put the display mode on mobile in order to see how it would fit on a mobile device. Then I added the basic divs and content, along with css rules. From there, my tablet and desktop sketches only contained the search bar and media icons in similarity. This is where css comes in handy, and a little html changing.

Here is part of the css I used for the mobile portion. Everything is the same on how you would make it, meaning you have a style sheet and then rules. So for instance I created a content section #content, and the rules and everything under the classes,tags, and such are applying to everything...(tablet,mobile,desktop),however  I specifically set the rules to apply to a mobile site. Then when designing the tablet portion, you take the specific information your changing and add rules that apply to the tablet. So I created another div called content4 and put that as display:none;, so you couldn't see it on the mobile site. Then when I put in media queries, I applied a new rule in order to show it, which was -----display:block!important;

As you can see from the example I have of a @media (min-width:960px). So all the rules under this section of the style sheet will apply for desktop. I didn't need to copy everything, but it gives you a better example on how they are the same css, with few changes. Also I had to pasted most all of the coding from mobile since I changed them to display:none in order for them not to show.

This is really confusing at first! I had to play around with this a lot. I mean A LOT! I didn't understand how this was working and how I could change my mobile to hide everything or add things. I created the mobile first as your suppose to, but then created a tablet on a different site. You do not need to do this because things like body, headings, and all that are the same throughout. Classes you apply to divs and such are what need to change. For instance on desktop I kept everything from tablet, but added another section for the about part of the page. This is just making it hidden on mobile and tablet, and displaying it on the css sheet coding. 

It hit me after I started watching my coding every now and then in "preview safari". Also just changing it on the actual dreamweaver part. This image you see is your new best friend!

Want to see this actual site of me redesigning Smitty's Lawn and Garden (pretend) (links are just #)!
CLICK HERE-


Warning it looks better in safari. and for some reason not good at all on firefox,  (the portfolio page)

Waybackmachine-3 websites' before and after

BEFORE AND AFTER

The old Deviant-art Website

The previous Deviant-art website had little to know contrast, with very dark green as their main color. The only different colors used were a lighter shade for highlighting titles, and the change of green for the link icon. The usability is still good to use, very current to now, with searches.

The current 2014 Deviant-art Website

The new Deviant art website contains a much contrast that is appealing to look at. The graphics are displayed first hand, and the pops of color stand out apart from the background, images, and titles. The usability is easier to use because it is less cluttered with wording and organzied well. The layout is also better without list, instead the graphics are the main attraction.

Previous Coding for Deviant Art

The coding in comparison has more color css, along with divs, although both still contain tables. The coding goes further in depth, even simplified, and changes the colors of borders, text, highlights, and divs. The new site also adds the graphics in new in the coding. You have different font-weight, and alignment.

Current 2014 coding for Deviant Art

The design layout is much different with the color scheme and layout principles. Both still contain graphics, however you can see the logo changes with the wiki checkmark to a nice clean cut layout tiny by the search, with the graphics now the main attention spot. The  green in the new layout makes a great contrast, along with the bigger graphic images and less words.  The tabs are now icons and do not look like "actual tabs" like before...

The old Wiki how coding

the new coding for wiki how

 The differences I mainly notice in the coding is the use of tables vs. divs. The divs have their own class and image, with titles as the other coding has tables with things separated into rows. There is also id's and style sheets now, opposed to the tables with more padding and longer codes. The new html is simpler, looks more organized and controlled. They also plugged in background images with html, not a plain color without texture that set each individual with their own unique coding...

The previous ebay

the current eBay