Index
A
- <a> tag / How to do it
- Adapt.js
- characteristics / Adapt.js
- adopting, pre-points / Adapt.js
- adopting / How to do it
- adaptive features
- implementing / Comparing responsive, fluid, and adaptive web
- Adaptive Web Design / Comparing responsive, fluid, and adaptive web
- Anystretch
- about / Anystretch – stretching your background easily
- advantage / Anystretch – stretching your background easily
- stretchMe / How to do it
- data-stretch / How to do it
- anystretch method / How to do it
- asNavFor option / Example 2 – slider with carousel slider as navigation control
- autocomplete feature
- Magicsuggest, using with / The autocomplete feature with Magicsuggest
- implementing / How to implement it
B
- </body> tag / How to do it
- Backstretch
- about / Backstretch – creating a responsive background slideshow
- responsive background slideshow, creating / How to do it
- Baseline Grid / Fluid Baseline Grid system
- Basic option / How to do it
- box-model / Improving your element dimensioning using the box-sizing property
- box-sizing property / Improving your element dimensioning using the box-sizing property
- boxshadow property / Modernizr
- breakpoint settings / Expandable responsive tables
- browser supporting features
- checking / Checking the features the browser supports
- CanIUse.com / CanIUse.com
- MobileHTML5.org / MobileHTML5.org
- QuirksMode.org / QuirksMode.org
C
- Calendario plugin / Calendario, Summary
- CanIUse.com / CanIUse.com
- CDN
- about / Using a content delivery network
- using / Using a content delivery network
- centered column class / Foundation4
- CMS (Content Management Systems) / FlexSlider2 – a fully responsive slider
- Columns plugin
- used, for responsive structure creating / Creating simple responsive structures using Columns
- CSS
- used, for image resizing / Basic image resizing only using CSS
- CSS Browser Selector +
- about / CSS Browser Selector +
- items / CSS Browser Selector +
- CSS Sprites
- about / CSS Sprites
- Google image sprite / CSS Sprites
- creating, SpriteCow used / How to create sprites using SpriteCow
- Custom Screen Size button / Using the ScreenFly website tool
D
- 3D flow style
- using, on Swiper / Using the 3D flow style on Swiper
- data-base attributes / Riloadr
- data-class attributes / How to do it
- data-hide attributes / How to do it
- data-ignore attributes / How to do it
- device simulating
- browser tools, using / Simulating a device using browser tools, Using the Viewport Resizer website tool, Using the Surveyor website tool, Using the ScreenFly website tool
- Viewport Resizer website tool, using / Using the Viewport Resizer website tool
- Surveyor website tool, using / Using the Surveyor website tool
- ScreenFly website tool, using / Using the ScreenFly website tool
- div tag / Foundation4
E
- .eightcol class / 1140 Grid
- .elevencol class / 1140 Grid
- EasyResponsiveTabstoAccordion
- Elastislide plugin
- about / Elastislide plugin
- using / How to do it
- minimum of three visible images / Example 1 – minimum of three visible images (default)
- vertical with minimum of three visible images / Example 2 – vertical with a minimum of three visible images
- fixed wrapper with minimum of two visible images / Example 3 – fixed wrapper with a minimum of two visible images
- minimum of four visible images / Example 4 – minimum of four images visible in an image gallery
- element dimensioning
- improving, box-sizing property used / Improving your element dimensioning using the box-sizing property
- em unit / Relative unit – em
- Equalize plugin
- used, for element dimension adjustment / Using Equalize for element dimension adjustment
- using / Using Equalize for element dimension adjustment
- expandable responsive tables
- transforming, from HTML tables / Expandable responsive tables, How to do it
- Expert mode / How to do it
F
- .fivecol class / 1140 Grid
- .fourcol class / 1140 Grid
- @font-face
- @font-face method / Customizing the font family for beautiful responsive titles
- fallback
- about / Defining fallback
- feature detection tools
- about / Feature detection tools
- CSS Browser Selector + / CSS Browser Selector +
- Modernizr / Modernizr
- featured homepage images
- different image versions, creating for / Exercise – creating different image versions for featured homepage images
- FitVids
- about / FitVids – a quick win solution for responsive videos
- using / How to do it
- FlexNav
- used, for adding menu flexibility / Adding flexibility to your menu with FlexNav
- FlexSlider2
- about / FlexSlider2 – a fully responsive slider
- basic slider / Example 1 – basic slider (default)
- carousel slider as navigation control / Example 2 – slider with carousel slider as navigation control
- carousel settings / Example 3 – carousel setting minimum and maximum range
- Fluid Baseline Grid system
- code / Fluid Baseline Grid system
- about / Fluid Baseline Grid system
- advantages / Fluid Baseline Grid system
- Fluid Columns / Fluid Baseline Grid system
- Baseline Grid / Fluid Baseline Grid system
- Fluid Baseline Grid / Fluid Baseline Grid system
- Fluid Columns / Fluid Baseline Grid system
- Fluid design / Comparing responsive, fluid, and adaptive web
- Focal Point CSS framework
- about / Focal Point CSS framework, How to do it
- left-X/right-X / Focal Point CSS framework
- up-X/down-X / Focal Point CSS framework
- portrait / Focal Point CSS framework
- defining / How to do it
- example / How to do it
- fonts
- Font Squirrel tool
- features / Using Font Squirrel tool generating
- using / How to do it
- FooTable
- extensibility feature / Extending the plugin
- extending / Extending the plugin
- FooTable jQuery plugin
- used, for responsive table creating / Exercise 6 – creating a responsive table of prices using the FooTable jQuery plugin
- footer-only navigation
- about / Footer-only
- implementing / How to do it
- footer anchor pattern
- about / Footer anchor
- implementing / Footer anchor, How to do it
- Foresight
- about / Foresight – selecting the right image to display depending on the screen size
- right image, selecting / How to do it
- form inputs
- types / Types and attributes of form inputs
- attributes / Types and attributes of form inputs
- Foundation4
- URL / Foundation4
- about / Foundation4
- features / Foundation4
- using, for website structuring / Exercise 2b – using Foundation4 Grid to structure our website
- full-table.css file / How to do it
- Function option / The autocomplete feature with Magicsuggest
G
- 1140 Grid
- Guideguide plugin
- URL / Photoshop grid templates
- about / Photoshop grid templates
H
- <head> tag / How to do it, How to do it
- Hammer
- about / Hammer – a nice multitouch library, How to do it
- gestures / Hammer – a nice multitouch library
- high-density displays
- dealing with / Dealing with high-density displays, How to do it
- Foresight, using / How to do it using Foresight
- homepage title
- customizing / Exercise 4 – customizing the homepage title
- horizontal overflow technique
- using / Horizontal overflow, How to do it
- header orientation flip / Header orientation flip
- html5shiv / html5shiv
- HTML tables
- converting, into expandable responsive tables / Expandable responsive tables, How to do it
- HTTP requests
- reducing, techniques / Making fewer HTTP requests
- conditional loaders, using / Using conditional loaders
- resources, consolidating / Consolidating and minifying resources (JavaScript and CSS)
- CSS Sprites / CSS Sprites
I
- IdealForms
- URL / Responsive form using IdealForms
- about / Responsive form using IdealForms
- implementing / How to implement it
- used, for contact form creating / Exercise 8 – creating a contact form using the IdealForms framework
- image
- resizing, CSS used / Basic image resizing only using CSS
- image-set() function / Foresight – selecting the right image to display depending on the screen size
- image breakpoints
- using / Using image breakpoints
- Imageoptim
- about / Image optimization
- image slider
- creating, Swiper plugin used / Exercise 6 – creating an image slider using the Swiper plugin
J
- JavaScript plugins
- used, for touch event implementing / Implementing touch events with JavaScript plugins
- jPanelMenu jQuery plugin
- jquery library / How to do it
- jQuery plugins
- used, for responsive background images / Responsive background images by using jQuery plugins
- JSON data source
- No data source option / The autocomplete feature with Magicsuggest
- Static source option / The autocomplete feature with Magicsuggest
- URL option / The autocomplete feature with Magicsuggest
K
- Kern.js tool / The Kern.js tool
- Kernjs.com link / How to use it
L
- Launch button / Opera mobile emulator
- lettering
- about / Lettering
- steps / How to do it
- Kern.js tool / The Kern.js tool
- using / How to use it
- Link to full-table technique
- about / Link to full-table
- using / How to do it
M
- Magicsuggest
- autocomplete feature / The autocomplete feature with Magicsuggest
- Magnific Popup plugin / Magnific Popup
- max-height property / The toggle menu
- MediaElements.js
- about / MediaElements.js, How to do it
- media queries
- using / Adapting the screen with media queries
- specifying, features used / Adapting the screen with media queries
- menu design, analyzing
- improving / Designing a menu by improving its usability
- scanning round / Designing a menu by improving its usability
- page space round / Designing a menu by improving its usability
- item priority round / Designing a menu by improving its usability
- visibility round / Designing a menu by improving its usability
- Topics and interests round / Designing a menu by improving its usability
- menu navigation plugins
- about / Plugins for menu navigation
- Sidr / Creating a side menu with Sidr
- EasyResponsiveTabstoAccordion / Knowing about EasyResponsiveTabstoAccordion
- FlexNav / Adding flexibility to your menu with FlexNav
- meta tag of viewport
- Mobile-first project
- use case, analyzing / Mobile-first
- designing / Mobile-first
- MobileHTML5.org / MobileHTML5.org
- Mobitest
- Modernizr
- about / Modernizr
- YepNope.js / YepNope.js
- html5shiv / html5shiv
- multi toggle pattern
- about / Multi toggle
- implementing / How to do it
N
- .ninecol class / 1140 Grid
- <nav> tag / How to do it...
- <noscript> tag / Riloadr
- No data source option / The autocomplete feature with Magicsuggest
O
- .onecol class / 1140 Grid
- off canvas menu pattern
- about / The off-canvas menu
- jPanelMenu jQuery plugin / The jPanelMenu jQuery plugin, How to do it
- open-box class / How to do it
- open class / How to do it
- Opera mobile emulator
- about / Opera mobile emulator
- out of the box customization / Expandable responsive tables
P
- <picture> tag
- Packery plugin
- used, for card website layout implementing / Implementing a card website layout with Packery
- PageSpeed Insights / PageSpeed Insights
- pagination class / Extending the plugin
- payloads size
- reducing / Reducing the size of payloads
- progressive JPEG / Progressive JPEG
- image optimization / Image optimization
- page simplification, HTML5 used / Simplifying pages with HTML5 and CSS3
- percentage
- about / How percentage gives flexibility to the structure
- advantage, over pixel / How percentage gives flexibility to the structure
- pixel, converting to / Converting pixel to percentage
- Pickadate plugin
- about / Pickadate – responsive date/time picker
- using / How to do it
- Picturefill
- picture tag
- working / How the picture tag works
- pixel
- about / How percentage gives flexibility to the structure
- converting, to percentage / Converting pixel to percentage
- pixels per inch (PPI) / Dealing with high-density displays
- plugins
- Columns / Creating simple responsive structures using Columns
- Equalize / Using Equalize for element dimension adjustment
- Packery / Implementing a card website layout with Packery
- Sidr / Creating a side menu with Sidr, Knowing about EasyResponsiveTabstoAccordion
- FlexNav / Adding flexibility to your menu with FlexNav
- SVGeezy / SVGeezy
- Prefix free / Prefix free
- Magnific Popup / Magnific Popup
- Riloadr / Riloadr
- Calendario / Calendario
- PngGauntlet / Image optimization
- polyfill implementations
- about / Polyfill implementations
- MediaElements.js / MediaElements.js
- SVG / SVG
- Respond.js / Respond.js
- polyfills
- about / Defining fallback
- Prefix free plugin / Prefix free
Q
- quickSetup function / Creating simple responsive structures using Columns
- QuirksMode.org / QuirksMode.org
- QuoJS
R
- relative units
- responsive text, converting to / Understanding and converting the text to relative units
- rem / Relative unit – rem
- Respond / Adapting the screen with media queries
- Respond.js
- downloading / Respond.js
- characteristics / Respond.js
- cons / Respond.js
- adopting / How to do it
- about / Respond.js, How to do it
- responsive background images, jQuery plugins used
- responsive form
- IdealForms, using / Responsive form using IdealForms, How to implement it
- responsive grid system
- about / What is a responsive grid system?, Responsive grid systems
- advantage / What is a responsive grid system?
- using, need for / What is a responsive grid system?
- characteristics / What is a responsive grid system?
- Fluid Baseline Grid system / Fluid Baseline Grid system
- 1140 Grid / 1140 Grid
- Foundation4 / Foundation4
- responsive images
- art direction, controlling / Control of art direction for responsive images
- Focal Point CSS framework / Focal Point CSS framework
- responsive image sliders
- about / Responsive image sliders
- Elastislide plugin / Elastislide plugin
- FlexSlider2 / FlexSlider2 – a fully responsive slider
- ResponsiveSlides / ResponsiveSlides – the best of basic slides
- Swiper / Swiper – performatic touch image slider
- Slicebox / Slicebox – a slice animation when using slide images
- Responsive Measure
- about / Responsive Measure
- idealLineLength / How to do it
- minimumFontSize / How to do it
- maximumFontSize / How to do it
- responsive navigation patterns
- about / Most-used responsive navigation patterns
- Top nav / Top nav
- footer anchor / Footer anchor
- toggle menu / The toggle menu
- select menu / The select menu
- footer-only / Footer-only
- multi toggle / Multi toggle
- toggle and slide / Toggle and slide
- off canvas menu / The off-canvas menu
- Responsive Nav plugin
- about / The Responsive Nav plugin
- features / The Responsive Nav plugin
- Responsive Nav window / How to do it
- ResponsiveSlides
- about / ResponsiveSlides – the best of basic slides
- examples / Example 1, Example 2, Example 3
- responsive structure
- creating, Columns plugin used / Creating simple responsive structures using Columns
- responsive tables
- about / Responsive tables
- creating, FooTable jQuery plugin used / Exercise 6 – creating a responsive table of prices using the FooTable jQuery plugin
- responsive text
- converting, to relative units / Understanding and converting the text to relative units
- responsive touch design
- touch target sizes / Introducing touch gestures to user experience
- placement of controls / Introducing touch gestures to user experience
- about / Introducing touch gestures to user experience
- responsive video elements
- creating / Making responsive video elements
- responsive web design
- responsive websites
- design testing, tips / Tips for design testing of responsive websites
- testing / Exercise 9 – let's test our website in different screen sizes
- Retina / Dealing with high-density displays
- Riloadr plugin
- root em / Relative unit – rem
S
- .sevencol class / 1140 Grid
- .sixcol class / 1140 Grid
- screen
- adapting, with media queries / Adapting the screen with media queries
- ScreenFly website tool
- using / Using the ScreenFly website tool
- select menu pattern
- about / The select menu
- TinyNav.js jQuery plugin / The TinyNav.js jQuery plugin
- implementing / How to do it
- Select Sprite tool / How to create sprites using SpriteCow
- Shims / Defining fallback
- Sidr
- used, for side menu creating / Creating a side menu with Sidr
- site
- adapting, JavaScript used / Adapting the site using JavaScript
- site, adapting with JavaScript
- about / Adapting the site using JavaScript, How to do it, Respond.js
- Adapt.js, using / Adapt.js
- SlabText plugin
- about / The SlabText plugin, How to do it
- Slicebox
- Stackedtable plugin
- about / Stackedtables
- using / How to do it using the table from the previous example
- small device view / How to do it using the table from the previous example
- desktop view / How to do it using the table from the previous example
- static source option / The autocomplete feature with Magicsuggest
- Surveyor website tool
- using / Using the Surveyor website tool
- SVG
- about / SVG
- as background image / SVG as a background image
- as <svg> tag / SVG as the <svg> tag
- as simple <img> tag / SVG as a simple <img> tag
- SVGeezy plugin / SVGeezy
- swipe events / Elastislide plugin
- Swiper
- about / Swiper – performatic touch image slider
- using / How to do it
- featured options / Featured options
- 3D flow style, using on / Using the 3D flow style on Swiper
- Swiper plugin
- used, for image slider creating / Exercise 6 – creating an image slider using the Swiper plugin
T
- .tencol class / 1140 Grid
- .threecol class / 1140 Grid
- .twelvecol class / 1140 Grid
- .twocol class / 1140 Grid
- The FitText plugin
- about / The FitText plugin, How to do it
- TinyNav.js jQuery plugin / The TinyNav.js jQuery plugin
- Toggle and slide pattern
- about / Toggle and slide
- implementing / How to do it
- toggle menu pattern
- about / The toggle menu
- Responsive Nav plugin / The Responsive Nav plugin
- implementing / How to do it
- using / Exercise 3 – customizing menu using the toggle menu solution
- tooltip feature
- about / The tooltip feature
- advantages / Tooltipster – modern tooltip feature
- using / How to do it
- Top nav pattern
- about / Top nav, How to do it...
- implementing / How to do it...
- touch event implementation, JavaScript plugins used
- touch events
- implementing, with JavaScript plugins / Implementing touch events with JavaScript plugins
U
- URL option / The autocomplete feature with Magicsuggest
V
- vh (viewport height) / Understanding and converting the text to relative units
- Viewport Resizer website tool
- using / Using the Viewport Resizer website tool
- advantages / Using the Viewport Resizer website tool
- vw (viewport width) / Understanding and converting the text to relative units
W
- WebPagetest
- about / WebPagetest
- test result / WebPagetest
- website layout
- implementing, Packery plugin / Implementing a card website layout with Packery
- website performance
- testing / Testing website performance
- PageSpeed Insights / PageSpeed Insights
- YSlow / YSlow
- WebPagetest / WebPagetest
- Mobitest / Mobitest
- website structure plugins
- Columns / Plugins for website structure
- Equalize / Plugins for website structure
- Packery / Plugins for website structure
- wireframe
- about / Using wireframe tools
- using / Using wireframe tools
- URL / Using wireframe tools
- mobile-first development example / Exercise 1 – practicing mobile-first development in wireframes
- layout design, creating / Exercise 2a – creating the layout design for wireframes
Y
- YepNope.js / YepNope.js
- YSlow