Web Design


Published on

Web Design Strategies - http://www.daryabushmakin.com/

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design

  1. 1. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakin@gmail.com WEB DESIGNSemantic HTML markup: o Tags applied to convey meaning and content structure o HTML5’s new elements and attributes such as <nav>, <footer>, <article> and <aside>, which replace common generic block <div> and inline <span>, or new <audio> and <video>, which replace generic <object>.Enhanced searchability and relevance o Up-to-date is imperativeInternal and external communications o Integrate a Submit an RFP form on your website with a lead generation database, such as SalesForce o A CMS function such as a Contact Us form or Submit Your Questions tool can enhance communications between lapsed or potential clients and you.Progressive Enhancement (PE) o Create websites that are accessible to all devices, using a layered approach with a set of core principals stressing accessibility of content and functionality. o Content layer = rich semantic HTML markup o Presentation layer = CSS and styling o Client-side scripting layer = JavaScript or jQuery behaviorsPresentation styling and CSS o Semantic markup found in HTML5 o Evolving CSS3 standards o Colors, images, backgrounds, gradients, shadowing, text effects and moreQuick updatesContent Management System (CMS) o Used in meetingsAdaptive Images o A PHP script that works on any website, can help in this regard o Detects screen sizes abd re-scales versions of your HTML imagesFitText o The JQuery plugin o Will allow you to resize your fonts and ensure that they fit where they are supposed to regardless of the device or browser.PhotoSwipe o Free HTML/CSS/JavaScript libraryLess FrameworkSkeleton o Use of a lightweight 960-grid
  2. 2. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakin@gmail.com o Lightly styled forms, tabs, buttons and other elements that form the basic foundation of any mobile website. Responsive Design Usability o Keep things the same Rapid prototyping o Process of quickly mocking up the future state of a system, and allowing all stakeholders to provide input, to see that input thought out visually, observe users using it, and finally, to participate in an open discussion about what is learned. o A way to visualize, influence, explore, discuss, learn, test, fail, and iterate the user experience o “Neutral” artifact owned by all.Tools Aptus o Mac App for testing your responsive, adaptive, or mobile site at custom screen sizes. o First, select the desired screen sizes and user agents of your ‘devices.’ o Then load your site’s URL. Test it at those set breakpoints. You can also take screenshots of websites with the app, and it has the full WebKit inspector built-in. o Aptus doesn’t allow you to preview local files. Instead, you have to use a local hosting solution such as MAMP, and test your site that way. Also, you can’t paste a URL into the path bar, which makes the app useless compared to the bookmarklets available. RWD Bookmarklet by Victor Coulon o It’s easy to view your design at iPad and iPhone sizes, in both landscape and portrait orientation. o There’s even a button to toggle the onscreen keyboard, so you can optimize your forms for iOS devices. o Lack of custom screen size values. The Responsinator o Display your site inside the frames of popular smartphones and tablets. o Just enter a URL, and preview it on an iPhone, iPad, Kindle, and too many Android phones. PHP5 o PHP - http://php.net/downloads.php o PHP - http://en.wikipedia.org/wiki/PHP Front-End Development o What does a front-end web developer do? - http://www.onlinetools.org/articles/fed2.html o Great User Experiences Require Great Front-End Development - http://www.uxmatters.com/mt/archives/2012/04/great-user-experiences-require- great-front-end-development.php
  3. 3. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakin@gmail.com o Front-end development feeds to follow - http://paulirish.com/2010/front-end- development-feeds-to-follow/ o Front-end Code Standards & Best Practices - http://na.isobar.com/standards/ o 10 Skills to Become a Frontend Developer worth Millions - http://devblog.springest.com/frontend-developer-worth-millions CSS (Cascading Style Sheets) o CSS Tutorials - http://www.w3schools.com/css/ o Cascading Style Sheets - http://en.wikipedia.org/wiki/Cascading_Style_Sheets o CSS Beginner Tutorial - http://www.htmldog.com/guides/cssbeginner/ o Cascading Style Sheets - http://htmlhelp.com/reference/css/ Wordpress o Wordpress.org - http://wordpress.org/ o Developer Documentation - http://codex.wordpress.org/Developer_Documentation o WordPress - http://en.wikipedia.org/wiki/WordPress HTML5 o HTML5 - http://en.wikipedia.org/wiki/HTML5 o HTML5 Tutorial - http://www.w3schools.com/html5/default.asp o Browser Test - http://html5test.com/ o The Power Of HTML5/Javascript: A GameBoy Color Emulator In Your Browser - http://techcrunch.com/2012/08/13/the-power-of-html5javascript-a-gameboy-color- emulator-in-your-browser/ o Mobile HTML5 over-hyped; not suited to enterprise - http://www.cbronline.com/news/html5-on-mobile-over-hyped-not-suited-to- enterprise-130812 o Responsive HTML5 magento themes and WordPress themes – SmartStart - http://www.joomlavision.com/responsive-html5-magento-themes-wp-themes- smartstart/ Jquery o jQuery - http://jquery.com/ o jQuery UI - http://jqueryui.com/ o jQuery - http://en.wikipedia.org/wiki/JQuery o jQuery Tutorial - http://www.w3schools.com/jquery/default.asp o 50+ Amazing Jquery Examples- Part1 - http://www.noupe.com/jquery/50-amazing- jquery-examples-part1.html o jQuery Tools - http://jquerytools.org/A Few Examples janneyindustrialpainting.com - an industrial painting contractor weigelstownChildcare.com – a daycare, after school care, and summer camp provider focusdiscoverachieve.com/blog/ – a lifestyle and business coach blogger charleslichty.com – a couples and individual counselor
  4. 4. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakin@gmail.com allergyasthmafoundationLancaster.com - a non-profitHelpful Resources 7 Essential Books on Responsive Web Design You Do Not Want to Miss http://www.awwwards.com/7-essential-books-on-responsive-web-design-you-do-not-want-to- miss.html 4 ways a content management system makes it easy to keep your website fresh, http://blog.thepitagroup.com/2012/4-ways-a-content-management-system-makes-it-easy-to- keep-your-website-fresh/ Top 10 Responsive Web Design Tutorials http://www.webdesigndev.com/web- development/responsive-web-design-tutorials Understanding progressive enhancement techniques in web design, http://www.techrepublic.com/blog/webmaster/understanding-progressive-enhancement- techniques-in-web-design/1809 Responsive Web Design for the Ultimate User Experience - http://www.business2community.com/online-marketing/responsive-web-design-for-the- ultimate-user-experience-0243274 Rapid Prototyping the User Experience - http://solutions.wolterskluwer.com/blog/2012/08/rapid-prototyping-the-user-experience/ 3 Tools for Testing Responsive Web Designs - http://theindustry.cc/2012/08/07/3-tools-for- testing-responsive-web-designs/ What Content Marketing Can Learn From Your Closet - http://www.business2community.com/content-marketing/what-content-marketing-can-learn- from-your-closet-0242649 The Benefits of ‘Responsive Web Design’ - http://www.loungelizard.com/web-design- blogs/design/the-benefits-of-responsive-web-design/ 7 Tools for Responsive Web Design - http://www.developerdrive.com/2012/08/7-tools-for- responsive-web-design/ Separate Mobile Website Vs. Responsive Website - http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website- presidential-smackdown/ 10 Top Principles For Web Design (6) – Usability - http://www.seo-positive.co.uk/blog/10-top- principles-for-web-design-6-usability/ Responsive Web Design & What it Means for Future - http://webdesignsolutions.com/n-5226- responsive-web-design-what-it-means-for-the-future.html